Skip to main content

WebSocket教學與應用

一、什麼是 WebSocket？​

  • WebSocket 是一種網路通訊協定，允許 用戶端 (Client) 和 伺服器 (Server) 建立 持久連線，並且可以 雙向傳輸資料。

  • 和傳統的 HTTP 請求/回應模式 不同，WebSocket 在握手成功後，伺服器可以主動推播資料，不需要等待客戶端請求。

特色：

  1. 全雙工 (Full-duplex)：雙方可同時傳輸。

  2. 低延遲：不需要重複建立 TCP 連線。

  3. 節省流量：沒有冗長的 HTTP header。

  4. 即時性：適合需要快速資料更新的應用。

二、WebSocket 工作流程​

  1. Client 發送 HTTP 請求給 Server，並帶上 Upgrade: websocket。

  2. Server 接受後，建立 TCP 通道，升級協定為 WebSocket。

  3. 雙方透過 Frame (訊息框架) 傳輸資料，直到其中一方關閉連線。

三、基本使用範例​

前端 (JavaScript)​

const socket = new WebSocket("ws://localhost:8080");
// 監聽連線開啟
socket.onopen = () => {
  console.log("已連線到伺服器");
  socket.send("Hello Server!");
};
// 監聽伺服器訊息
socket.onmessage = (event) => {
  console.log("收到訊息:", event.data);
};
// 監聽錯誤
socket.onerror = (error) => {
  console.error("WebSocket 錯誤:", error);
};
// 監聽關閉
socket.onclose = () => {
  console.log("連線已關閉");
};

後端 (Node.js - ws 套件)​

import { WebSocketServer } from "ws";
const wss = new WebSocketServer({ port: 8080 });
wss.on("connection", (ws) => {
  console.log("有客戶端連線進來");
  ws.on("message", (message) => {
    console.log("收到訊息:", message.toString());
    ws.send(`伺服器回覆: ${message}`);
  });
  ws.on("close", () => {
    console.log("客戶端已斷線");
  });
});

四、應用場景​

  1. 聊天室 (Chat App)

    • 即時訊息推播，所有人可以即時看到訊息。

  2. 即時遊戲 (Online Games)

    • 玩家動作、遊戲狀態同步。

  3. 股票、加密貨幣報價

    • 秒級推播價格，使用者不需刷新頁面。

  4. 即時通知系統

    • 系統狀態、訊息推播。

  5. IoT 裝置

    • 感測器數據即時傳送到後端。

五、WebSocket vs 替代方案​

技術特點適用場合
Polling定時請求，延遲高，浪費流量簡單、不需長連線
Long Polling伺服器延遲回應直到有資料比輪詢好，但效能差
SSE (Server-Sent Events)單向由伺服器推資料訊息流、通知
WebSocket雙向、低延遲、持久連線聊天、遊戲、交易所

六、進階應用​

  1. 與 Redis Pub/Sub 結合

    • 適合分散式伺服器架構，訊息可跨伺服器推播。

  2. 結合 JWT 驗證

    • 在連線時檢查使用者身分，保護聊天室/遊戲伺服器。

  3. 結合前端框架 (React/Vue/Angular)

    • 做到 UI 即時更新。

  4. 負載平衡 (Load Balancing)

    • 使用 Nginx / HAProxy 代理 WebSocket。