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

1. websocket
過去現在..未來？
By Fillano
12年4月27日星期五

2. 自我介紹
• 卑微的IT工程師
• Javascript技術狂熱者
• 喜歡探索新技術
• 渾名：fillano
12年4月27日星期五

3. websocket經驗
• 2010年ITHelp鐵人賽後
• GTUG HTML5 Hackathon
• 以node.js實作過簡單的Hixie-76 Draft版
本的websocket伺服器
• 其實不多XD
12年4月27日星期五

4. Hixie 76
• 時間：2010年
• socket.io剛出現
• handshake大不同
• data frame大不同
• 只能傳送utf-8字串
12年4月27日星期五

5. RFC 6455
• 2011年底
• handshake比較簡單
• data frame大不同
• 可傳送binary資料及utf-8字串
• ping/pong frame
12年4月27日星期五

6. 到底什麼是websocket
• ⼀一套client side API（HTML5）
• ⼀一個與HTTP相容的通訊協定（ex.
hixie-76, hybi-10, RFC6455）
• 提供client/server間雙向資料傳輸的機制
• 除非⼀一方關閉連結，否則連結就是持續
不斷的。關閉後需要從頭開始...
12年4月27日星期五

7. websocket life cycle
request / handshake
response / handshake
時 客 伺
frames
間 戶 服
端 ping 器
pong
frames
close
12年4月27日星期五

8. 與http相容的特性
• 類似⼀一個keep alive的request/response
• client會送出request header
• server會回覆response header
• ⼀一些header資訊也可以同時利用，例如
cookie
• 也支援https的傳輸加密，wss://*
12年4月27日星期五

9. 跟http不同的地方
• header中許多欄位跟⼀一般http不同，用來
傳遞特定資訊，或是做handshake
• 連結是keep alive的，不會重複送出header
• 資料傳送是雙向的
• 資料傳送有特定的binary格式
12年4月27日星期五

10. client端的使用方式
• 利用WebSocket這個constructor建立連結
的instance
• ex. new WebSocket(‘ws://localhost:8080,
[‘echo-protocol’,‘chat’])
• 利用send()方法送資料
• 利用message事件接收資料
12年4月27日星期五

11. server端的使用方式
• 以node.js來說，就看你用哪個module
• 目前支援比較好的是websocket-node
(npm install -g websocket)
• socket.io用的不⼀一定是websocket，它會
優先使用flash做傳輸（請看他網站上的
faq說明），所以我才選上面這個module
來做測試
12年4月27日星期五

12. 展示：多人共享白板
12年4月27日星期五

13. 未來？
• WebSocket與RFC6455本身應該不會有大
變動
• WebRTC目前制定的規格，還很難跟
websocket直接整合，而且效能...
• Microsoft提案Stream API，利用它可以把
資料append到blob，這樣就有機會利用
websocket轉送blob來播放audio/video
12年4月27日星期五

14. Q&A
12年4月27日星期五

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/Documentation
12年4月27日星期五