SSE 與 WebTransport：實時通訊的三劍客抉擇

雖然 WebSocket 是當前最強大的全雙工方案，但它並不是唯一的選擇。有時候「大砲不一定要打小鳥」，在某些場景下，SSE (Server-Sent Events) 可能更輕量，而 WebTransport 則代表了未來的高性能標準。

本章我們將橫向對比這三種技術，並給出一份決策清單。

---

一、 SSE (Server-Sent Events)：單向之美

SSE 是基於 HTTP 協議的單向推播技術。伺服器可以持續向客戶端發送數據，但客戶端無法透過同一個連結反回數據。

SSE 的優勢

1. 極致輕量：它是標準 HTTP 請求，不需要握手升級。
2. 自動重連：瀏覽器內建自動重連機制。
3. 防火牆友善：就是普通 HTTP/HTTPS 流量。

Node.js SSE 實作範例

const http = require("http");

http
  .createServer((req, res) => {
    if (req.url === "/events") {
      res.writeHead(200, {
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
        Connection: "keep-alive",
      });

      const timer = setInterval(() => {
        res.write(`data: ${JSON.stringify({ time: new Date() })}\n\n`);
      }, 1000);

      req.on("close", () => clearInterval(timer));
    }
  })
  .listen(8081);

---

二、 WebTransport：HTTP/3 的未來

WebTransport 是基於 QUIC (HTTP/3) 的新一代通訊 API。它試圖解決 WebSocket 在 TCP 上的某些限制。

為什麼我們需要它？

• 解決隊頭阻塞 (Head-of-Line Blocking)：QUIC 封包損毀不會阻塞其餘流。
• 支援多流 (Multiplexing)：單個連線可並行多個獨立流。
• 低延遲：對於遊戲或極致即時影音傳輸非常有利。

---

三、 三劍客對比表

特性	WebSocket	SSE	WebTransport
方向性	全雙工	單向	全雙工
底層協議	TCP (Upgrade)	HTTP (Keep-alive)	UDP/QUIC (H3)
連線上限	較多限制	同 IP 通常 6 個	高擴展性
資料格式	文字 / 二進制	純文字 (含 JSON)	二進制 / 文字

---

總結

技術的選擇不在於誰最先進，而在於誰最適合你的場景。SSE 適合單向推播，WebSocket 適合穩定雙向互動，而 WebTransport 則是未來高頻低延遲的霸主。

下一章，我們將深度剖析 Socket.io 的核心原理與適配器架構。

---

️ 進階挑戰

1. 實作挑戰：嘗試將文中的 SSE 伺服器與前端 EventSource API 結合，建立一個每秒更新一次的簡單儀表板。
2. 架構思考：如果你正在開發一個「多人白板」，使用者會頻繁畫圖。在使用 HTTP/1.1 或 HTTP/2 的情況下，選用 SSE 搭配普通 POST 請求來畫圖，其效能表現會與 WebSocket 有何差異？

---

延伸閱讀與資源

• MDN：Using server-sent events
• web.dev：WebTransport Explainer