17370845950

WebSocket是浏览器与服务器间持久化全双工通信通道，通过一次Upgrade握手复用TCP连接，以帧轻量传输数据，解决轮询延迟高、开销大等问题，适用于聊天、实时通知等场景。

WebSocket 是浏览器与服务器之间建立的持久化、全双工通信通道，能真正实现客户端和服务器实时双向收发数据。它不像 HTTP 那样每次请求都要重新握手、带大量头部，而是通过一次升级（Upgrade）握手后，复用同一个 TCP 连接长期保持连接，后续数据以帧（frame）形式轻量传输。

为什么需要 WebSocket？

传统轮询（Polling）或长轮询（Long Polling）有明显缺陷：频繁建连开销大、延迟高、服务器压力大、无法真正“即时”响应。而 WebSocket 解决了这些——连接建立后，双方随时可主动发消息，适合聊天、协作编辑、实时通知、行情推送等场景。

如何创建并使用 WebSocket？

前端只需一行代码即可发起连接（注意协议是 ws:// 或安全的 wss://）：

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

之后监听关键事件：

• onopen：连接成功，可立即发送初始化消息
• onmessage：收到服务器推送的数据（event.data 可能是字符串或 Blob）
• onerror：发生网络或协议错误（注意：这里不触发重连，需手动处理）
• onclose：连接关闭（可检查 event.code 和 event.reason 判断原因）

发送消息也很简单：ws.send('hello')，支持字符串、ArrayBuffer、Blob。

服务端怎么配合？

主流语言都有成熟 WebSocket 库。以 Node.js 的 ws 库为例：

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

wss.on('connection', (ws, req) => {
  console.log('新客户端已连接');
  
  ws.on('message', (data) => {
    console.log('收到：', data.toString());
    // 广播给所有其他客户端（不含自己）
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(`广播：${data}`);
      }
    });
  });

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

关键点：

• 服务端需正确响应 HTTP Upgrade 请求，完成 WebSocket 握手
• 每个连接对应一个 ws 实例，可绑定独立事件
• 注意检查 readyState 再发送，避免因连接异常导致报错
• 生产环境务必加心跳保活（如每 30 秒 send ping / expect pong），防止中间代理断连

实际开发中要注意什么？

WebSocket 很强大，但不是“万能胶”。用之前得想清楚：

• 浏览器兼容性没问题（IE10+，所有现代浏览器都支持）
• 必须走 HTTPS 域名才能用 wss://（本地 ws://localhost 除外）
• 连接不稳定时要实现自动重连（带退避策略，比如 1s → 2s → 4s…）
• 消息需自行设计协议（如 JSON 格式 + type 字段区分消息类型），服务端也要做校验和防刷
• 单页应用切换路由时，记得在组件卸载前调用 ws.close()，避免内存泄漏

基本上就这些。WebSocket 本身协议不复杂，难的是围绕它构建健壮、可维护的实时逻辑。