Share the course of Realtime web development Link: http://eighty20.cc/apps/e2-rtw-v01/index.html

1. REALTIME WEB
DEVELOPMENT
RICH

2. 即時網頁應用開發 - 手把手
郭二文 (二哥)
緯創資通(Wistron)員工。在緯創創立「緯創IT先進技術實驗室(witlab)」、並於2015年「witlab-1期」協助導
入Elasticsearch(分散式全文檢索引擎),「witlab-2期」MQTT的IoT信息核心及2016年「witlab-3期」Apache
Spark的大數據平台。熱愛軟體開發與物聯網創新，喜歡整合性資料分析與探索性研究。

3. AGENDA
Why Realtime
AngularJS
Websocket
MQTT
我們一起追的女孩CHAT-APP

4. 遙想當年….我們一起追的女孩
西元 1976年(民國六十五年) 引進台灣

5. 遙想當年….我們一起追的女孩

6. Why Realtime
焦慮等待的時間縮短了
知道要去要其它對象的電話/手機/LINE的時間縮短了

7. AngularJS
由 Google 打造的前端 JavaScript MVC框架
它直接延伸現有的 HTML 架構
透過宣告式語法（Directives Syntax）直接賦予 HTML 額外的
能力
通過雙向的資料綁定來適應動態內容

8. AngularJS

9. AngularJS
MVC

10. Demo
AngularJS 2 way binding

11. WebSocket
HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的
協定。
在WebSocket API中，瀏覽器和伺服器只需要做一個交握的動
作，然後，瀏覽器和伺服器之間就形成了一條快速通道。
兩者之間就直接可以資料互相傳送。

12. WebSocket

13. WebSocket

14. WebSocket
IOC

15. MQTT
MQTT是為了物聯網(M2M)而設計的protocol
它是透過publish/subscribe的方式來做訊息傳送
它所需要的網路頻寬是很低的
所需要的硬體資源也是很低的

16. Demo
MQTT Web Client - PUB/SUB

17. Question
怎麼支援不同的溝通群組?
怎麼支援不同的溝通型態?

18. MQTT Topic
MQTT broker用來決定client訊息發佈與訂閱的目地或來源
Topic的名稱是一個UTF-8編碼的文字字串
Topic包含了一個或多個層級並使用了"/"符號來做分隔
Topic的有效名稱必需至少要有一個字元以上
Topic的名稱是case-sensitive

19. MQTT Topic
當一個Mqtt的client想要一次同時訂閱多個Topics時, 可以使用
"wildcard"
Wildcard只能使用於Mqtt client在訊息的訂閱(subscribe)而不
能使用在訊息的發佈(publish)

20. MQTT Topic
單一層級WILDCARD: +
訂閱
myhome/groundfloor/+/temperature
發佈
myhome/groundfloor/livingroom/temperature
myhome/groundfloor/kitchen/temperature
myhome/groundfloor/kitchen/brightness
myhome/firstfloor/kitchen/temperature
myhome/groundfloor/kitchen/fridge/temperature

21. MQTT Topic
複合層級的WILDCARD: #
複合層級的wildcard可以同時吻合多個level的topic層級
複合層級的wildcard只能設定在topic的最後一個層級
透過複合層級wildcard"#"來訂閱topic, 會收到所有符合這個規則的訊息, 不論
訊息的topic層級深度有多少層
訂閱 myhome/groundfloor/#

22. 我們一起追的女孩CHAT-APP
使用者上線 (Presence)
rtwchat/user/{user_id}/presence
動作: 每個user連上mqtt時都要訂閱
rtwchat/user/+/presence
動作 每個user連上mqtt時都要發佈一個訊息"online"
rtwchat/user/{user_id}/presence

23. Demo
angular-mqtt-presence.html

24. 我們一起追的女孩CHAT-APP
使用者私聊 (Private Chat)
rtwchat/user/{user_id:TO}/chat/{user_id:FROM}
動作: 每個user在連線時都訂閱
rtwchat/user/{user_id}/chat/+
動作: user_A要私聊user_B時發佈訊息到
rtwchat/user/{user_id:B}/chat/{user_id:A}

25. Demo
angular-mqtt-privatechat.html

26. Problem
只有最先上線的人才能看到所有上線的使用者名單
如果沒有透過點擊"Disconnect"而離線的話會產生錯誤的上線
使用者名單

27. MQTT ADVANCED
RETAINED MESSAGES

28. MQTT ADVANCED
RETAINED MESSAGES
Retained message跟其它MQTT message的結構差不多, 唯一的差別在於在MQTT訊息中的
"retained flag" 被設定成 true
MQTT Broker會儲存同一主題下的最後一封的retained message的訊息(就像是Cache)
MQTT broker針對每一個主題只會有一個retained message
Retained messages可以幫助新訂閱的clients來取得該訂閱主題最後的一筆被發佈的訊息

29. Demo
angular-mqtt-presence2.html

30. MQTT ADVANCED

31. MQTT ADVANCED
L.T.W (LAST WILL AND TESTAMENT)
LWT這個功能是MQTT Broker用來通知其它的clients有關於某一個client的無
預警離線或斷線的這種情形
MQTT client可以在連接到MQTT Broker時標註一個LWT的訊息
MQTT broker會先保留這個LWT訊息並在client無預警地離線或斷線時發出這
個LWT的訊息到預定的topic去

32. Demo
angular-mqtt-presence3.html

33. Highcharts
http://www.highcharts.com/

34. AngularJS with Highcharts
AngularJS Directive
Example: http://jsfiddle.net/L7QEE/15/
highcharts-ng

35. Demo
angular-highchart-mqtt.html