WebSocket通訊過程詳解

今天要跟各位分享的是WebSocket通訊的運作過程。不論是網頁開發新手,還是想深入了解網路協定的老鳥,這篇文章都能讓你對WebSocket有更全面的認識。

WebSocket是什麼?

WebSocket是一種網路通訊協定,它能在瀏覽器和伺服器之間建立全雙工、雙向的通訊管道。不同於傳統的HTTP請求-回應模式,WebSocket讓瀏覽器和伺服器可以隨時互相傳送訊息,而不需要重新發起連線。

WebSocket通訊過程

讓我們一步步來看WebSocket的通訊過程:

1. 建立連線

  1. 客戶端(通常是瀏覽器)向伺服器發送一個HTTP請求,要求升級連線為WebSocket。
  2. 這個請求會包含一些特殊的標頭:
    • Upgrade: websocket
    • Connection: Upgrade
    • Sec-WebSocket-Key: [一個隨機生成的金鑰]
    • Sec-WebSocket-Version: 13

2. 伺服器回應

  1. 如果伺服器支援WebSocket,它會回應一個HTTP 101狀態碼(Switching Protocols)。
  2. 回應中也會包含特殊標頭:
    • Upgrade: websocket
    • Connection: Upgrade
    • Sec-WebSocket-Accept: [根據客戶端發送的金鑰計算出的值]

3. 連線建立完成

一旦客戶端收到伺服器的正確回應,WebSocket連線就建立成功了。現在,雙方可以開始互相傳送訊息。

4. 資料傳輸

  1. WebSocket使用幀(Frame)來傳輸資料。每個幀都有一個小型的標頭,用來描述資料的類型和長度。
  2. 資料可以是文字或二進制格式。
  3. 雙方都可以隨時發送資料,不需要等待對方的回應。

5. 心跳機制

  1. 為了保持連線活躍,WebSocket協定包含了一個心跳機制。
  2. 客戶端或伺服器可以定期發送一個小型的Ping幀。
  3. 接收方必須回應一個Pong幀。

6. 關閉連線

  1. 任何一方都可以發起關閉連線的請求。
  2. 發送一個帶有狀態碼的關閉幀。
  3. 另一方接收到關閉幀後,也會回應一個關閉幀。
  4. 雙方都發送和接收到關閉幀後,連線正式關閉。

WebSocket的優點

  1. 即時性: 資料可以立即傳送,不需要輪詢。
  2. 效能: 相較於反覆建立HTTP連線,WebSocket更節省資源。
  3. 雙向通訊: 伺服器可以主動向客戶端推送資料。
  4. 較低延遲: 一旦連線建立,資料傳輸的延遲就很低。

適用場景

WebSocket特別適合需要即時更新的應用,例如:

  • 線上遊戲
  • 即時聊天室
  • 股票行情顯示器
  • 線上協作工具

結語

WebSocket為網路應用帶來了新的可能性,讓我們能夠建立更即時、互動性更強的網站和應用程式。