WebSocket 实时通信实战：构建双向通信应用

为什么需要 WebSocket？

在 Web 开发中，传统的 HTTP 请求 - 响应模式存在一个根本性限制：客户端必须主动发起请求才能获取数据。对于需要实时更新的场景（如聊天室、股票行情、在线协作），这种模式效率低下。

WebSocket 协议应运而生，它提供了全双工通信通道，允许服务器主动推送数据到客户端。

WebSocket vs HTTP 轮询

方案	延迟	带宽消耗	连接数
HTTP 轮询	高（取决于轮询间隔）	高（大量空请求）	频繁创建销毁
HTTP 长轮询	中	中	较高
Server-Sent Events	低	低	单向下行
WebSocket	最低	最低	持久连接

快速上手

服务端（Node.js + ws）

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

wss.on("connection", (ws) => {
  console.log("新客户端连接");
  
  ws.on("message", (data) => {
    console.log("收到消息:", data.toString());
    // 广播给所有客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
  
  ws.on("close", () => {
    console.log("客户端断开连接");
  });
});

客户端

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

ws.onopen = () => {
  console.log("连接成功");
  ws.send("Hello Server!");
};

ws.onmessage = (event) => {
  console.log("收到消息:", event.data);
};

ws.onerror = (error) => {
  console.error("连接错误:", error);
};

ws.onclose = () => {
  console.log("连接关闭");
  // 实现自动重连
  setTimeout(() => {
    console.log("尝试重连...");
    // new WebSocket(...)
  }, 3000);
};

实战：心跳检测

生产环境中，需要处理网络波动和连接超时。实现心跳机制是标准做法：

// 服务端心跳检测
const HEARTBEAT_INTERVAL = 30000; // 30 秒

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

const interval = setInterval(() => {
  wss.clients.forEach((ws) => {
    if (!ws.isAlive) {
      return ws.terminate();
    }
    ws.isAlive = false;
    ws.ping();
  });
}, HEARTBEAT_INTERVAL);

注意事项

1. 连接管理：维护客户端列表，处理断开重连
2. 消息格式：建议使用 JSON 结构化数据
3. 安全性：生产环境使用 wss://（WebSocket over TLS）
4. 负载均衡：WebSocket 需要粘性会话（sticky sessions）
5. 消息队列：高并发场景下配合 Redis Pub/Sub 使用

适用场景

✅ 实时聊天应用
✅ 在线协作编辑（如 Google Docs）
✅ 实时数据仪表盘
✅ 多人在线游戏
✅ 股票/加密货币行情推送
✅ 实时通知系统

❌ 简单表单提交
❌ 静态资源获取
❌ 不需要实时性的 API 调用

总结

WebSocket 是构建实时 Web 应用的核心技术。理解其原理并掌握最佳实践，能让你在需要低延迟、双向通信的场景中游刃有余。

关键点：持久连接、双向通信、心跳检测、自动重连、安全传输。