HTTP 不夠用的時候
為什麼即時 app 需要不同連線
⏱ 預估 ~7 分鐘
01 · 讀一讀
你蓋了回應請求的 server。瀏覽器要頁面、server 送回。表單送資料、server 處理。這請求-回應循環是 web 大部分怎麼運作。
但如果 server 要先跟你講話，你沒問呢？
西洋棋對手走一步。聊天訊息到。股價變。一般 HTTP,server 不能主動 — 它要等你問。蓋任何即時東西時這是問題。
💡 想像一下HTTP 像來回寄信。你寫信、寄、等回。它運作，但每次有延遲。WebSocket 像電話 — 連線開了，雙方隨時都能講。不用等信。
重點整理
- HTTP 是請求-回應：client 永遠主動
- Server 用 HTTP 永不能主動送資料到 client
- 像遊戲、聊天、即時更新的即時功能需要別的
- WebSocket 用持久、雙向連線解決這個
02 · 讀一讀
WebSocket 存在前，工程師試著用叫polling 的技巧駭即時功能。瀏覽器每一兩秒問 server「有更新嗎？」有新的 server 送、沒有 server 送空回應。
Polling 技術上運作。但浪費。想像每 30 秒打電話問披薩店「我訂單好了嗎？」大多時候答案是沒、你浪費你跟他們時間。
WebSocket 用真解法取代這 hack：雙方隨時能送訊息的持久連線、不用問。
重點整理
- Polling:client 計時器問「有更新？」 — 浪費
- 大部分 poll 回應空 — 浪費頻寬跟 server 負載
- WebSocket：一個連線、保持開、雙方自由送
- 每個主要即時 app 都用 WebSocket:Slack、Discord、Google Docs、多人遊戲
03 · 步驟說明
下面是 WebSocket 連線怎麼建立 — 從一般 HTTP 請求開始升級。
1. Client 送 HTTP 請求
瀏覽器送正常 HTTP 請求到 server，但包含特殊 header:'Upgrade: websocket'。告訴 server「我要從 HTTP 切到 WebSocket。」
2. Server 同意升級
Server 支援 WebSocket 就用狀態碼 101(Switching Protocols)回應。HTTP 連線現在升級到 WebSocket 連線。
3. 持久連線開了
現在雙方隨時能送訊息。Server 不用被問就推資料到 client。Client 不用等回應就送資料到 server。
4. 訊息自由流
任一邊送叫 'frame' 的小資料封包。沒請求-回應模式 — 就訊息按需求來回。這是西洋棋移動怎麼立刻出現在對手螢幕。
5. 做完關連線
任一邊隨時能關連線。瀏覽器在你離開時關。Server 在你登出時關。在那之前保持開。
04 · 分類拖拉
把每個功能分類：這用 HTTP 還是 WebSocket？
(本節為互動練習，請啟用 JavaScript 體驗)
05 · 選擇題
WebSocket 對多人遊戲比 HTTP 主要優勢？
- Server 能立刻推更新到玩家不用他們問
- WebSocket 比 HTTP 安全
- WebSocket 初始頁載入用較少頻寬
- WebSocket 完全不要 server
06 · 填空
不像 HTTP 請求-回應循環，WebSocket 建 _____ 連線、雙方隨時能送訊息。
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。