WebSocket 实时通信：构建双向数据通道

什么是 WebSocket？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，适合实时应用场景。

与 HTTP 的对比

特性	HTTP	WebSocket
连接方式	请求 - 响应	持久连接
数据方向	单向	双向
头部开销	大	小
实时性	低	高

服务端实现（Node.js）

const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 8080 });

wss.on("connection", (ws) => {
  console.log("Client connected");
  
  ws.on("message", (message) => {
    console.log("Received:", message.toString());
    // 广播给所有客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
  
  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

客户端实现

const ws = new WebSocket("ws://localhost:8080");

ws.onopen = () => {
  console.log("Connected to server");
  ws.send(JSON.stringify({ type: "message", data: "Hello" }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("Received:", data);
};

ws.onerror = (error) => {
  console.error("WebSocket error:", error);
};

ws.onclose = () => {
  console.log("Disconnected");
};

心跳机制

// 服务端心跳
const interval = setInterval(() => {
  wss.clients.forEach((ws) => {
    if (ws.isAlive === false) {
      return ws.terminate();
    }
    ws.isAlive = false;
    ws.ping();
  });
}, 30000);

wss.on("connection", (ws) => {
  ws.isAlive = true;
  ws.on("pong", () => {
    ws.isAlive = true;
  });
});

应用场景

1. 实时聊天

消息即时推送，无需轮询。

2. 在线协作

多人同时编辑文档，实时同步。

3. 实时通知

系统通知、消息提醒即时送达。

4. 股票行情

实时推送价格变动。

5. 游戏同步

多人游戏状态实时同步。

安全性考虑

• 使用 WSS（WebSocket over TLS）
• 验证 Origin 头
• 实现认证授权
• 限制消息大小
• 速率限制

Socket.io 封装

// 服务端
const io = require("socket.io")(3000);
io.on("connection", (socket) => {
  socket.on("chat message", (msg) => {
    io.emit("chat message", msg);
  });
});

// 客户端
const socket = io("http://localhost:3000");
socket.emit("chat message", "hello");
socket.on("chat message", (msg) => {
  console.log(msg);
});

WebSocket 是构建实时应用的利器，掌握它将让你轻松实现双向通信功能。