Network

[Network] 07. 通訊方式

 · 1 min read

輪詢（Polling）* 1

ex. 每 5 秒發一次請求。

  • 讓瀏覽器每隔一段時間就自動送出一個 HTTP 請求（Request）給 Server，獲取最新的網頁資料。
  • Request 以 JSON 或 AJAX（xhr)的方式取得最新的資料。
  • 即時性的網頁應用程式上效率較差，在伺服器沒有新資料時，瀏覽器如果也送出 HTTP 請求，就會造成浪費網路資源的狀況。


Polling ＆ WebSocket

  • Polling：每五秒由瀏覽器發送一次請求。

  • WebSocket：第一次由瀏覽器先註冊一次，拿到 WebSocket-Key，若 Server 有新消則會再回應給用戶。


WebSocket

建完一次連線後拿到 key，之後 Server 有需要才會回應 給 Client。

  • HTML5 標準中的一個新的網頁傳輸方式。
  • 全雙工、雙向的資料傳輸，即時性的網頁應用程式（ex：FB 聊天訊息）。
  • 瀏覽器與伺服器之間若要建立一條 WebSocket 連線，在一開始的交握（handshake）階段中，要先從 HTTP 協定升級為 WebSocket 協定：

    • 瀏覽器送出：

        GET /chat HTTP/1.1
  Host: server.example.com
  Upgrade: websocket      #websocket協定
  Connection: Upgrade
  Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==     #KEY
  Origin: http://example.com
  Sec-WebSocket-Protocol: chat, superchat
  Sec-WebSocket-Version: 13

    • 而伺服器回應：

        HTTP/1.1 101 Switching Protocols
  Upgrade: websocket
  Connection: Upgrade
  Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
  Sec-WebSocket-Protocol: chat


Long Polling 1

  • Facebook、Plurk 實現動態更新的方法。
  • 發一個長時間等待的 Request，當 Server 端有資料 Response 時立刻斷掉、接著在發一個新的 Request。
  • 與 Polling 不同之處的在於他比較有效率，可以等到 Timeout 或拿到新資料的時候在重新發送。