17370845950

WebSocket是基于TCP的全双工通信协议，通过HTTP升级握手建立持久连接，实现高效双向实时通信；前端用原生API，后端需专用服务，实际应用需处理心跳、鉴权、可靠性及连接管理。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它让浏览器和服务器之间可以持续保持连接，实现真正的实时双向数据交换，而不是靠轮询或长轮询“假装”实时。

WebSocket 和 HTTP 的核心区别

HTTP 是请求-响应模型：客户端发一次请求，服务器回一次响应，连接就断开。WebSocket 则不同——握手阶段用 HTTP 升级（Upgrade: websocket），一旦建立成功，连接长期保持，双方随时可主动发消息。

• 连接建立后不关闭，节省反复建连开销
• 数据帧轻量（无 HTTP 头），传输效率高
• 服务端能主动推送，不再依赖客户端轮询

前端如何使用 WebSocket

浏览器原生支持 WebSocket 构造函数，只需传入服务端 WebSocket 地址（wss:// 或 ws://）：

const ws = new WebSocket('wss://example.com/chat');

ws.onopen = () => {
  console.log('连接已建立');
  ws.send(JSON.stringify({ type: 'join', user: 'Alice' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('收到消息：', data);
};

ws.onerror = (error) => {
  console.error('连接出错：', error);
};

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

注意：务必监听 onclose 并做重连逻辑（如指数退避），否则网络抖动会导致功能中断。

后端需配合 WebSocket 服务（以 Node.js + ws 库为例）

浏览器不能直接连数据库或业务逻辑，必须由后端提供 WebSocket 服务端。常用方案：

• Node.js：用 ws 库（轻量、性能好）
• Python：用 websockets 或 FastAPI + WebSockets
• Java：Spring Boot 的 @MessageMapping 支持

简单示例（Node.js）：

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

wss.on('connection', (ws, req) => {
  console.log('新用户接入');

  ws.on('message', (data) => {
    const msg = JSON.parse(data);
    // 广播给所有在线用户（或按房间过滤）
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify({ ...msg, from: 'server', time: Date.now() }));
      }
    });
  });

  ws.on('close', () => console.log('用户断开'));
});

实际开发中要注意的关键点

WebSocket 不是“开了就能用”，真实场景需要补足能力：

• 心跳保活：客户端和服务端定期互发 ping/pong，防止中间代理（如 Nginx、负载均衡）因超时断连
• 消息可靠性：WebSocket 本身不保证送达，需应用层加序号、重发、ACK 机制（如聊天消息需“已读”“送达”状态）
• 鉴权与安全：握手时通过 URL 参数或 Cookie 传递 token，在 connection 回调里校验；生产环境必须用 wss://（TLS 加密）
• 连接管理：记录用户 ID 与 socket 实例映射，支持单聊、群聊、离线消息等业务逻辑