WebSocket 实时通信：原理与实战

为什么需要 WebSocket？

HTTP 是请求 - 响应模式，不适合实时通信场景。WebSocket 提供全双工通信，服务器可主动推送数据。

工作原理

1. 客户端发起 HTTP 升级请求
2. 服务器响应 101 Switching Protocols
3. 建立持久连接，双向通信

服务端实现（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());
    ws.send(`Echo: ${message}`);
  });
  
  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

客户端实现

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

ws.onopen = () => {
  console.log("Connected");
  ws.send("Hello Server");
};

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

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

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

应用场景

• 在线聊天室
• 实时协作编辑
• 股票行情推送
• 游戏实时对战
• 实时监控面板

心跳机制

const interval = setInterval(() => {
  if (ws.readyState === WebSocket.OPEN) {
    ws.ping();
  }
}, 30000);

WebSocket 是构建实时应用的首选技术。