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