Upload
hsu-ping-feng
View
1.269
Download
0
Embed Size (px)
DESCRIPTION
a rough introduction to websocket both server side and client side.
Citation preview
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日星期五