即時性傳輸技術

技術	單向 or 雙向	即時性	相容性（瀏覽器）	使用情境
Short Polling	單向	低	✅ 全面支援	簡單輪詢，不需即時
Long Polling	單向	中	✅ 全面支援	接近即時，低頻事件（如通知）
SSE	單向	高	✅ 除 IE 不支援	即時新聞/通知串流
WebSocket	雙向	非常高	✅ 全面支援	聊天、遊戲、協作編輯
HTTP/2 Push	單向	中	❗瀏覽器逐漸淘汰	預加載資源（非資料）

---

🧩 各技術逐個說明

1. 🔁 Short Polling（短輪詢）

• 客戶端每隔幾秒主動發請求問伺服器「有沒有新資料？」。

• 無論是否有資料，伺服器都會回應。

• **缺點：**資源浪費、不是即時。

📌 用法場景：

setInterval(() => {
  fetch('/api/updates')
    .then(res => res.json())
    .then(data => console.log(data));
}, 5000);  // 每 5 秒請求一次

2. 🔄 Long Polling（長輪詢）

• 客戶端送出請求後，伺服器會等「有資料」才回應（或等 timeout）。

• 回應後客戶端馬上再送下一個請求。

📌 用法場景：即時通知，但無法用 WebSocket

function poll() {
  fetch('/api/notifications')
    .then(res => res.json())
    .then(data => {
      console.log(data);
      poll(); // 回來後再送出下一次
    });
}
poll();

3. 📢 Server-Sent Events (SSE)

• 一種只允許「伺服器 ➡ 客戶端」的單向即時資料推送。

• 用 HTTP 協定的 text/event-stream 。

• 保持連線，伺服器可隨時發訊息給客戶端。

📌 用法場景：天氣更新、即時價格

const eventSource = new EventSource('/api/stream');
eventSource.onmessage = (event) => {
  console.log('Received:', event.data);
};

4. 🔌 WebSocket（雙向即時通訊）

• 建立持久連線，伺服器與客戶端可互相發送資料。

• 真正的雙向、即時溝通。

• 需要支援 WebSocket 協定（ws:// or wss://）。

📌 用法場景：聊天室、多人協作、即時遊戲

const socket = new WebSocket('wss://example.com/chat');
socket.onmessage = (event) => {
  console.log('Server says:', event.data);
};
socket.send('Hello Server');

5. 🚀 HTTP/2 Server Push（已逐漸退場）

• 不是真正「資料推送」機制，而是伺服器在你請求 HTML 時順便推送其它資源（如 CSS、JS）。

• 幫助「預加載」。

• 目前瀏覽器和 Cloudflare 均不再推薦使用，正在逐步被淘汰。

📌 **適合場景：**初次載入時預推 JS/CSS，不適合做即時推送

✅ 總結：怎麼選？

你想做什麼？	推薦技術
即時聊天	WebSocket ✅✅✅
即時通知（低頻）	Long Polling 或 SSE
即時資料串流（如新聞）	SSE ✅
後端簡單、資料不常變	Short Polling
HTTP 資源加速（已過時）	HTTP/2 Push（不推薦）