Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Websocket talk in nodejs.tw

1,570 views

Published on

a rough introduction to websocket both server side and client side.

Published in: Technology
  • Be the first to comment

Websocket talk in nodejs.tw

  1. 1. websocket 過去現在..未來? By Fillano12年4月27日星期五
  2. 2. 自我介紹 • 卑微的IT工程師 • Javascript技術狂熱者 • 喜歡探索新技術 • 渾名:fillano12年4月27日星期五
  3. 3. websocket經驗 • 2010年ITHelp鐵人賽後 • GTUG HTML5 Hackathon • 以node.js實作過簡單的Hixie-76 Draft版 本的websocket伺服器 • 其實不多XD12年4月27日星期五
  4. 4. Hixie 76 • 時間:2010年 • socket.io剛出現 • handshake大不同 • data frame大不同 • 只能傳送utf-8字串12年4月27日星期五
  5. 5. RFC 6455 • 2011年底 • handshake比較簡單 • data frame大不同 • 可傳送binary資料及utf-8字串 • ping/pong frame12年4月27日星期五
  6. 6. 到底什麼是websocket • ⼀一套client side API(HTML5) • ⼀一個與HTTP相容的通訊協定(ex. hixie-76, hybi-10, RFC6455) • 提供client/server間雙向資料傳輸的機制 • 除非⼀一方關閉連結,否則連結就是持續 不斷的。關閉後需要從頭開始...12年4月27日星期五
  7. 7. websocket life cycle request / handshake response / handshake 時 客 伺 frames 間 戶 服 端 ping 器 pong frames close12年4月27日星期五
  8. 8. 與http相容的特性 • 類似⼀一個keep alive的request/response • client會送出request header • server會回覆response header • ⼀一些header資訊也可以同時利用,例如 cookie • 也支援https的傳輸加密,wss://*12年4月27日星期五
  9. 9. 跟http不同的地方 • header中許多欄位跟⼀一般http不同,用來 傳遞特定資訊,或是做handshake • 連結是keep alive的,不會重複送出header • 資料傳送是雙向的 • 資料傳送有特定的binary格式12年4月27日星期五
  10. 10. client端的使用方式 • 利用WebSocket這個constructor建立連結 的instance • ex. new WebSocket(‘ws://localhost:8080, [‘echo-protocol’,‘chat’]) • 利用send()方法送資料 • 利用message事件接收資料12年4月27日星期五
  11. 11. server端的使用方式 • 以node.js來說,就看你用哪個module • 目前支援比較好的是websocket-node (npm install -g websocket) • socket.io用的不⼀一定是websocket,它會 優先使用flash做傳輸(請看他網站上的 faq說明),所以我才選上面這個module 來做測試12年4月27日星期五
  12. 12. 展示:多人共享白板12年4月27日星期五
  13. 13. 未來? • WebSocket與RFC6455本身應該不會有大 變動 • WebRTC目前制定的規格,還很難跟 websocket直接整合,而且效能... • Microsoft提案Stream API,利用它可以把 資料append到blob,這樣就有機會利用 websocket轉送blob來播放audio/video12年4月27日星期五
  14. 14. Q&A12年4月27日星期五
  15. 15. 參考資料 • http://tools.ietf.org/html/rfc6455 • http://www.whatwg.org/specs/web-apps/ current-work/#network • http://dev.w3.org/html5/websockets/ • http://www.w3.org/TR/FileAPI/ • https://github.com/Worlize/WebSocket- Node/wiki/Documentation12年4月27日星期五

×