WebSocket 即時通訊實戰：用 Node.js 從零打造聊天室完整教學

HTTP 與 WebSocket 的差異

傳統 HTTP 採用「請求-回應」模型，每次需要新資料就得重新建立連線。WebSocket 則在一次握手後建立持久的雙向通道，雙方都可以隨時推送資料。用比喻來說：HTTP 像是寄信，WebSocket 更像是打電話，一旦接通就可以隨時說話。

環境準備與 ws 套件安裝

選用 ws 套件而非 Socket.IO，為了理解底層邏輯。

mkdir ws-chat && cd ws-chat
npm init -y
npm install ws

搭配 JWT 認證教學讓連線更安全。

建立 WebSocket 伺服器

核心：建立 HTTP 伺服器提供靜態檔案，把 WebSocket 伺服器掛在同一個 HTTP 伺服器上。用 Map 儲存所有連線用戶。

const WebSocket = require("ws");
const wss = new WebSocket.Server({ server });
const clients = new Map();

wss.on("connection", (ws) => {
  clients.set(ws, { id: Date.now(), username: "訪客" });
  ws.on("message", (data) => handleMessage(ws, JSON.parse(data)));
  ws.on("close", () => clients.delete(ws));
});

訊息廣播與房間機制

廣播函式遍歷所有連線，只傳給狀態正常的客戶端。房間機制在 clients Map 中多記錄 room 屬性。複雜架構可考慮 Redis Pub/Sub。參考 Docker Compose 部署指南。

生產環境注意事項

心跳機制：每 30 秒 ping 檢查連線。自動重連：前端加入指數退避重連。其他：WSS 加密、maxPayload、速率限制、身份驗證。參考 GraphQL vs REST 比較。

結語

從理解差異到實作廣播、房間機制、生產環境設定。接下來可加入持久化訊息、已讀狀態、打字提示等功能。動手做，是學習後端開發最快的路。