即時通訊機制(Polling / SSE / WebSocket)
核心導讀
瀏覽器如何實現資料的即時更新? 傳統的 HTTP 協定基於「請求-回應」模型,客戶端必須主動發起請求,伺服器才能回傳資料。如果我們需要實現聊天室、股票行情推送等即時場景,這種模型將面臨挑戰。
本章將介紹前端應對即時資料通訊的三種主要技術:短輪詢(Polling)、伺服器推送事件(SSE)與全雙工 WebSocket,並探討它們的原理與適用場景。
1. 傳統 HTTP 的侷限性
HTTP 協定的設計初衷是用於文件檢索,它具有無狀態(Stateless)和由客戶端單向發起的特點:
- 客戶端發起 HTTP 請求。
- 伺服器處理請求並回傳回應。
- 連線完成任務後通常會釋放對應的邏輯請求(HTTP/1.1 雖然支援長連線複用,但業務層面的請求-回應模型並未改變)。
在此模式下,伺服器無法主動將狀態的改變隨時通知正在等待的客戶端。為了取得最新資料,必須尋找其他技術架構方案。
2. 短輪詢(Polling)
最直接的解決方案是短輪詢。即客戶端利用計時器(如 setInterval),每隔一段固定的時間,自動向伺服器發送 HTTP 請求,詢問是否有新資料到達。
技術特點與侷限:
- 優點:實現機制極為簡單,完全依賴標準的 HTTP 協定和 AJAX/Fetch 技術。
- 缺點:可能產生巨大的網路開銷與資源浪費。大多數時間裡,伺服器的回應可能是「無新資料」。無論有無資料,每次請求都需要攜帶完整的 HTTP 標頭(Headers、Cookies 等),在並發量較高的場景下,會導致網路資源被大量無意義的查詢佔據。
3. 伺服器推送事件(Server-Sent Events)
為了降低頻繁建立 HTTP 連線的開銷,Server-Sent Events (SSE) 提供了一種輕型的單向資料流推送架構。
SSE 建立在 HTTP 協定之上。客戶端發起一個包含特殊請求標頭(Accept: text/event-stream)的 HTTP 請求後,伺服器在回傳回應時會保持底層的 TCP 連線不斷開。隨後,伺服器可以透過這條持久的通道,持續不斷地向客戶端推送文字格式的資料。
技術特點與侷限:
- 優點:連線持久化,網路開銷小;瀏覽器原生支援斷線自動重連機制;非常適合從伺服器向客戶端單向傳輸串流資料(例如大型語言模型的文字逐字輸出、即時交易行情推送)。
- 缺點:通訊通道是單向的。如果客戶端需要向伺服器發起控制指令或傳送新資料,必須另外建立普通的 HTTP 請求。
4. WebSocket:全雙工通訊協定
當應用場景涉及高頻的雙向互動(如多人線上動作遊戲、精密的協同文件編輯)時,我們需要一種既能降低通訊開銷,又能實現真正雙工通訊的技術——WebSocket。
WebSocket 是一種獨立的網路通訊協定。它精妙地借助了 HTTP 協定來完成初始建連:
- 握手階段:客戶端發送一個特殊的 HTTP 請求,聲明希望將其升級為新協定(攜帶
Upgrade: websocket標頭)。 - 連線質變:伺服器若支援並同意該協定,則回覆
101 Switching Protocols狀態碼。 - 徹底自由:此時 HTTP 的規範使命結束,底層的 TCP 連線被移交給 WebSocket 協定。此後,客戶端與伺服器享有平等的全雙工(Full-Duplex)通訊權利,雙方可隨時收發極簡格式的資料訊框。
技術特點與侷限:
- 優點:支援真正意義上的雙向即時通訊;資料訊框的標頭資訊極小,通訊延遲低、吞吐效率高;支援原生二進位資料(ArrayBuffer)的傳輸。
- 缺點:架構與開發複雜性較高;由於維護著持久長連線,對伺服器端的系統架構、負載均衡策略和心跳監測設計提出了更嚴格的工程要求。
5. 總結:技術選型對比
| 維度 | 短輪詢 (Polling) | 伺服器推送事件 (SSE) | WebSocket |
|---|---|---|---|
| 通訊方向 | 客戶端主動輪詢拉取 (單向) | 伺服器持續主動推送 (單向) | 客戶端與伺服器享有平等收發權 (雙向全雙工) |
| 底層協定 | 標準 HTTP | 標準 HTTP | 獨立的 WebSocket 協定 (基於 TCP) |
| 資料開銷 | 極高 (包含完整的 HTTP 標頭) | 較低 | 極低 (極簡的資料訊框標頭) |
| 典型應用場景 | 定時檢查後台非同步任務的完成狀態 | 大模型對話單向串流輸出、新聞或系統通知推送 | 即時音視訊信令、多人線上對戰、協同白板與編輯 |
在實際工程中,開發者應依據具體業務場景對即時性與雙向互動頻率的要求,在系統的維護複雜度和通訊效率之間取得平衡,選擇最契合的技術棧。