Jex’s Note

Websocket 介紹

前言

introduction.png

傳統網頁無法從 server 主動丟訊息給 browser, websocket 是一個能讓 client 跟 server 雙向溝通的 protocal

簡單的解決方法 : Ajax Polling

ajax-polling.png

利用 setInterval() 與 server 持續溝通

優點:

  • 簡單易做
  • 跨瀏覽器

缺點:

  • 消耗伺服器頻寬和資源

改良上述的缺點 Ajax Long-Polling

Ajas-long-polling.png

透過 HTTP 1.1 協定新增的 Chunked Transfer Encoding, 告知瀏覽器, 不要中斷連線, 進入等待

client 發一個長時間的 request, 當 server 回覆馬上斷掉, client 再重發一個

Facebook 及 Plurk 目前也是使用這種方法

FB network : fb_header.PNG

FB header fb_header_chunked.PNG

優點:

  • 在無消息的情況下不會頻繁請求
  • 支援 IE6

缺點:

  • 只能單向溝通
  • 無法 cross-domain

HTML5 提供更好的解決方法 : websocket

websocket.png

第一次 browser 和 server 只需握手, 就可以形成一條雙向通道

優點

  • client 與 server 可隨時互丟資料
  • cross-domain
  • 允許 binary data
  • 節省 server 資源與頻寬

缺點:

  • 只支援 Firefox, Chrome, Safari, IE10

比 websocket 更好的解決方法(跨 browser 問題) : socket.io

  • node.js 的套件
  • 整合 websocket, long-polling, iframe polling 等技術, 讓每個 browser 也能達到 realtime 的效果

Comments