websocket過去現在..未來？

By Fillano

12年4月27日星期五

自我介紹

• 卑微的IT工程師

• Javascript技術狂熱者

• 喜歡探索新技術• 渾名：fillano

12年4月27日星期五

websocket經驗• 2010年ITHelp鐵人賽後

• GTUG HTML5 Hackathon

• 以node.js實作過簡單的Hixie-76 Draft版本的websocket伺服器

• 其實不多XD

12年4月27日星期五

Hixie 76

• 時間：2010年

• socket.io剛出現

• handshake大不同

• data frame大不同

• 只能傳送utf-8字串

12年4月27日星期五

RFC 6455

• 2011年底

• handshake比較簡單

• data frame大不同

• 可傳送binary資料及utf-8字串

• ping/pong frame

12年4月27日星期五

到底什麼是websocket• ⼀一套client side API（HTML5）

• ⼀一個與HTTP相容的通訊協定（ex. hixie-76, hybi-10, RFC6455）

• 提供client/server間雙向資料傳輸的機制

• 除非⼀一方關閉連結，否則連結就是持續不斷的。關閉後需要從頭開始...

12年4月27日星期五

websocket life cycle

客戶端

伺服器

request / handshake

response / handshake

frames

ping

pong

frames

時間

close

12年4月27日星期五

與http相容的特性• 類似⼀一個keep alive的request/response

• client會送出request header

• server會回覆response header

• ⼀一些header資訊也可以同時利用，例如cookie

• 也支援https的傳輸加密，wss://*

12年4月27日星期五

跟http不同的地方• header中許多欄位跟⼀一般http不同，用來傳遞特定資訊，或是做handshake

• 連結是keep alive的，不會重複送出header

• 資料傳送是雙向的• 資料傳送有特定的binary格式

12年4月27日星期五

client端的使用方式• 利用WebSocket這個constructor建立連結的instance

• ex. new WebSocket(‘ws://localhost:8080, [‘echo-protocol’,‘chat’])

• 利用send()方法送資料

• 利用message事件接收資料

12年4月27日星期五

server端的使用方式• 以node.js來說，就看你用哪個module

• 目前支援比較好的是websocket-node (npm install -g websocket)

• socket.io用的不⼀一定是websocket，它會優先使用flash做傳輸（請看他網站上的faq說明），所以我才選上面這個module來做測試

12年4月27日星期五

展示：多人共享白板

12年4月27日星期五

未來？• WebSocket與RFC6455本身應該不會有大變動

• WebRTC目前制定的規格，還很難跟websocket直接整合，而且效能...

• Microsoft提案Stream API，利用它可以把資料append到blob，這樣就有機會利用websocket轉送blob來播放audio/video

12年4月27日星期五

Q&A

12年4月27日星期五

參考資料• 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日星期五