Download to read offline
Realtime web development
- 1.
- 2. 即時網頁應用開發 - 手把手 郭二文(二哥) 緯創資通(Wistron)員工。在緯創創立「緯創IT先進技術實驗室(witlab)」、並於2015年「witlab-1期」協助導 入Elasticsearch(分散式全文檢索引擎),「witlab-2期」MQTT的IoT信息核心及2016年「witlab-3期」Apache Spark的大數據平台。熱愛軟體開發與物聯網創新，喜歡整合性資料分析與探索性研究。
- 3.
- 4.
- 5.
- 6.
- 7. AngularJS 由 Google 打造的前端JavaScript MVC框架 它直接延伸現有的 HTML 架構 透過宣告式語法（Directives Syntax）直接賦予 HTML 額外的 能力 通過雙向的資料綁定來適應動態內容
- 8.
- 9.
- 10. Demo AngularJS 2 waybinding
- 11. WebSocket HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的 協定。 在WebSocketAPI中，瀏覽器和伺服器只需要做一個交握的動 作，然後，瀏覽器和伺服器之間就形成了一條快速通道。 兩者之間就直接可以資料互相傳送。
- 12.
- 13.
- 14.
- 15.
- 16. Demo MQTT Web Client- PUB/SUB
- 17.
- 18.
- 19. MQTT Topic 當一個Mqtt的client想要一次同時訂閱多個Topics時, 可以使用 "wildcard" Wildcard只能使用於Mqttclient在訊息的訂閱(subscribe)而不 能使用在訊息的發佈(publish)
- 20.
- 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.
- 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.
- 26.
- 27.
- 28. MQTT ADVANCED RETAINED MESSAGES Retainedmessage跟其它MQTT message的結構差不多, 唯一的差別在於在MQTT訊息中的 "retained flag" 被設定成 true MQTT Broker會儲存同一主題下的最後一封的retained message的訊息(就像是Cache) MQTT broker針對每一個主題只會有一個retained message Retained messages可以幫助新訂閱的clients來取得該訂閱主題最後的一筆被發佈的訊息
- 29.
- 30.
- 31. MQTT ADVANCED L.T.W (LASTWILL AND TESTAMENT) LWT這個功能是MQTT Broker用來通知其它的clients有關於某一個client的無 預警離線或斷線的這種情形 MQTT client可以在連接到MQTT Broker時標註一個LWT的訊息 MQTT broker會先保留這個LWT訊息並在client無預警地離線或斷線時發出這 個LWT的訊息到預定的topic去
- 32.
- 33.
- 34. AngularJS with Highcharts AngularJSDirective Example: http://jsfiddle.net/L7QEE/15/ highcharts-ng
- 35.