websocket 簡介

20160923 前端例會分享

Transcript

1. Websocket 簡介 20160923 報告人：曹家嘉
2. Client - Server 如何溝通？ HTTP Requset / Response 須由 Client 發起 Requset －＞ Server 接收後回傳 Response 通常 Server 都是處於被動等待 Client 來要求資料
3. New feature • Client - Server 雙向溝通 • 快速反應時間越短越好 • 頻繁使用短訊息相互溝通 發展出 Comet 機制 ex: Long polling, Streaming 讓 Client 每隔一段時間對 Server 發出 HTTP Request 來確認 Server 是否有資料回傳
4. Comet 的問題 • Server 與 Client 之間建立 2 條連線，對Server的負擔極大。 • Client 需不斷發出 Request 給 Server 確認是否有資料回傳，而 HTTP Request Header 占了大量的 Bytes。 • Client 也需要維持與 Server 的連線資訊來判斷 Server 回傳的資 料並進行動作。
5. Websocket 的出現 IETF 制定的協定(RFC-6455)，W3C 在 HTML5 規範內制定了 WebSocket API的標 準。建立於 HTTP 原有的架構之上，和 HTTP 一樣使用 80 與 443 port。 改善 Comet 的缺點 • 將連線數量減少為一條，全雙工連線。 • 當 Server 有資料更新時，自動傳送給 Client 進行即時更新。 • Header 只有 2 bytes 長度大小。
6. 建立 Websocket 連線 1. Client 發送 HTTP Request 給 Server，並要求 Server 將 HTTP Protocol 更新為 WebSocket Protocol。 2. 待 Server 更新完後即完成了 HandShake，此時 Server 與 Client 就 建立了一條雙向的 WebSocket 連線。 3. 雙方能開始做即時的資料傳輸。
7. Client API Event & Lifecycle onOpen onClose onError onMessage 連線錯誤 強制中斷 接收資料 關閉連線 資料 錯誤
8. Websocket 使用例 • 多人協作: Hackpad, trello • 線上多人網頁遊戲: Agar.io • 聊天室: http://socket.io/demos/chat/
9. Reference • WebSocket – 新一代網路傳輸技術 • When to use a HTTP call instead of a WebSocket (or HTTP 2.0) • Socket.IO