喂!我是 Wei

Front-End Engineer

Be a Problem Solver.

⌘K

導覽

所有文章緣起互動小功能

文章分類

目錄
PollingLong PollingSSEWebSocket怎麼選?WebSocket 實務問題斷線重連怎麼做?常見追問SSE 可以 client 傳資料嗎?WebSocket 可以經過 load balancer 嗎?AI streaming 一定用 WebSocket 嗎?面試回答模板

相關文章

前端 CI/CD 與正式環境除錯:從 Pull Request 到事故排查

2026年6月24日

前端系統設計:如何拆元件、資料流與大型專案架構?

2026年6月22日

無障礙不是加 ARIA:語意化 HTML、鍵盤操作與焦點管理

2026年6月21日

最新文章
全部 →
前端 CI/CD 與正式環境除錯:從 Pull Request 到事故排查
2026-06-24
即時資料怎麼選?Polling、SSE、WebSocket 比較
2026-06-23
前端系統設計:如何拆元件、資料流與大型專案架構?
2026-06-22
無障礙不是加 ARIA:語意化 HTML、鍵盤操作與焦點管理
2026-06-21
CSS 與 RWD 面試整理:Flexbox、Grid、定位與層疊脈絡
2026-06-19
← 返回文章列表

即時資料怎麼選?Polling、SSE、WebSocket 比較

2026年6月23日·約 4 分鐘閱讀·
前端面試系列即時通訊WebSocket

通知、聊天室、即時報價、任務進度都需要更新資料,但不一定全部都要用 WebSocket。

面試回答的重點是根據資料方向、頻率、延遲和基礎設施選擇。


Polling

前端固定時間呼叫 API:

const timer = setInterval(() => {
  fetchLatestStatus();
}, 5000);

優點:

  • 簡單
  • 使用既有 HTTP API
  • 容易經過 CDN、proxy、load balancer

缺點:

  • 沒有資料變化也會送 request
  • 更新延遲取決於 interval
  • 大量 client 可能增加 server 壓力

適合低頻、允許數秒延遲的狀態,例如背景任務進度。


Long Polling

Client 發 request 後,server 暫時不回覆,直到有新資料或 timeout。收到後 client 再建立下一個 request。

它比固定 polling 更接近即時,但 request 管理、timeout 和 server connection 成本較複雜。


SSE

Server-Sent Events 透過一條 HTTP connection,持續由 server 推送文字事件給瀏覽器。

const source = new EventSource("/api/events");
 
source.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log(data);
};
 
source.onerror = () => {
  console.log("connection error");
};

優點:

  • 瀏覽器 API 簡單
  • server → client 單向推送
  • 內建重連概念
  • 適合文字事件串流

缺點:

  • 主要是單向
  • binary 不方便
  • 連線數和 proxy 設定仍需注意

適合通知、log stream、AI 文字串流、即時狀態。


WebSocket

WebSocket 建立持續的雙向連線,client 和 server 都能主動傳訊息。

const socket = new WebSocket("wss://example.com/socket");
 
socket.onopen = () => {
  socket.send(JSON.stringify({ type: "join", roomId: "123" }));
};
 
socket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log(message);
};

適合:

  • 聊天室
  • 多人協作
  • 遊戲
  • 高頻雙向訊息
  • 即時交易資訊

代價是連線生命週期和 server architecture 更複雜。


怎麼選?

技術資料方向即時性適合場景
PollingClient 主動查詢低到中任務狀態、低頻更新
Long PollingServer 延後回覆中舊系統即時通知
SSEServer → Client中到高通知、log、文字串流
WebSocket雙向高聊天、協作、遊戲

如果每 30 秒更新一次就足夠,Polling 可能比維護 WebSocket 更合理。


WebSocket 實務問題

正式環境還要處理:

  • reconnect 與 exponential backoff
  • heartbeat / ping-pong
  • token 過期與重新認證
  • 重複訊息
  • 訊息順序
  • 斷線期間漏掉資料
  • 多分頁重複連線
  • server horizontal scaling

Client 不能只寫 onmessage 就算完成。


斷線重連怎麼做?

避免所有 client 同時瘋狂重連,可以使用 exponential backoff 加 jitter:

1s → 2s → 4s → 8s → max 30s

重連成功後,可能需要帶 last event id、sequence number 或重新抓一次 snapshot,補齊斷線期間資料。


常見追問

SSE 可以 client 傳資料嗎?

EventSource 主要是 server → client。Client 要傳資料通常仍用一般 HTTP request。

WebSocket 可以經過 load balancer 嗎?

可以,但 load balancer 要支援 connection upgrade,後端也要考慮 sticky session 或 pub/sub,讓不同 instance 能交換訊息。

AI streaming 一定用 WebSocket 嗎?

不一定。若主要是 server 持續回傳文字,SSE 或 streaming HTTP response 通常更簡單。


面試回答模板

我會先看資料方向、更新頻率與可接受延遲。低頻狀態用 polling 最簡單;server 單向推送通知或文字串流可用 SSE;需要高頻雙向互動才選 WebSocket。WebSocket 上線時還要處理 heartbeat、斷線重連、token 過期、訊息順序、漏訊息補償與多 instance 廣播,不會只考慮前端 API。

分享:XLinkedIn
← 上一篇前端系統設計:如何拆元件、資料流與大型專案架構?
下一篇 →前端 CI/CD 與正式環境除錯:從 Pull Request 到事故排查