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

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

3.
websocket經驗 • 2010年ITHelp鐵人賽後 • GTUG HTML5 Hackathon • 以node.js實作過簡單的Hixie-76 Draft版 本的websocket伺服器 • 其實不多XD12年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 frame12年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 close12年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/video12年4月27日星期五

14.
Q&A12年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/Documentation12年4月27日星期五