WebSocket 即時通訊實戰:用 Node.js 從零打造聊天室完整教學
趙柏翰14 分鐘閱讀
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 比較。
結語
從理解差異到實作廣播、房間機制、生產環境設定。接下來可加入持久化訊息、已讀狀態、打字提示等功能。動手做,是學習後端開發最快的路。
繼續閱讀
REST API 版本控制策略完整教學:URI Path、Header、Query 三種方案實戰比較與最佳實踐
相關文章
你可能也喜歡
探索其他領域的精選好文