WebSocket 实时通信：打造即时应用

为什么需要 WebSocket？

传统 HTTP 是请求 - 响应模式，不适合实时场景：

• 聊天应用
• 实时通知
• 在线协作
• 股票行情
• 游戏同步

WebSocket 提供全双工通信，服务器可主动推送数据。

工作原理

1. 客户端发起 HTTP 升级请求
2. 服务器同意升级协议
3. 建立持久 TCP 连接
4. 双方可自由发送消息
5. 连接保持直到主动关闭

前端实现

// 创建连接
const ws = new WebSocket("ws://localhost:8080");

// 连接打开
ws.onopen = () => {
  console.log("连接已建立");
  ws.send(JSON.stringify({ type: "login", userId: 123 }));
};

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

// 连接关闭
ws.onclose = () => {
  console.log("连接已关闭");
};

// 错误处理
ws.onerror = (error) => {
  console.error("WebSocket 错误:", error);
};

后端实现（Node.js + ws）

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

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

心跳机制

防止连接超时断开：

// 客户端心跳
setInterval(() => {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify({ type: "ping" }));
  }
}, 30000);

// 服务端响应
ws.on("message", (message) => {
  const data = JSON.parse(message);
  if (data.type === "ping") {
    ws.send(JSON.stringify({ type: "pong" }));
  }
});

重连策略

function connect() {
  const ws = new WebSocket("ws://localhost:8080");
  
  ws.onclose = () => {
    setTimeout(() => {
      console.log("尝试重连...");
      connect();
    }, 3000);
  };
  
  return ws;
}

安全考虑

• 生产环境使用 wss://（加密）
• 验证 Origin 头防止 CSRF
• 限制消息大小
• 身份认证和授权

WebSocket 是实时应用的核心技术，掌握它能打造出色的用户体验！