【Web前端】WebSocket 详解

告别轮询，开启真正的实时通信

在互联网应用中，实时通信的需求越来越强烈：即时聊天、协同编辑、股票行情、游戏对战......这些场景都离不开服务器与客户端之间的高效数据交换。

传统的 HTTP 协议采用的是"请求-响应"模式，客户端不主动请求，服务器就无法发送数据。为了实现实时效果，早期开发者不得不使用轮询或长轮询，但这种方式不仅延迟高，而且每次请求都携带大量 HTTP 头信息，造成了严重的资源浪费。

WebSocket 的出现，彻底改变了这一局面。

一、什么是 WebSocket？

WebSocket 是一种全双工通信协议，它通过在客户端和服务器之间建立持久连接，实现了真正的双向实时数据传输。

它的核心特点包括：

1. 全双工通信

连接建立后，双方可以在任意时间互相发送数据，没有传统 HTTP 请求中的"一问一答"限制。

2. 低延迟与高性能

省去了每次连接建立的开销，数据传输时只携带极少的帧头（约 2-10 字节），而不是庞大的 HTTP 头。

3. 协议标识与升级

使用 ws://（非加密）或 wss://（加密）作为 URI 方案。其连接通过 HTTP Upgrade 机制 建立，因此天然兼容 80 和 443 端口，能穿透大多数防火墙。

二、WebSocket 的工作流程

WebSocket 的连接建立过程分为两步：

1. 握手阶段

客户端通过 HTTP 发送一个特殊的请求，头部包含 Upgrade: websocket 和 Connection: Upgrade，表明希望将协议升级为 WebSocket。服务器验证后返回状态码 101 Switching Protocols，确认升级。此后，TCP 连接保持打开，协议从 HTTP 切换为 WebSocket。

2. 通信阶段

一旦握手完成，双方就可以通过"帧"的方式自由传输数据，支持文本、二进制数据以及心跳包（Ping/Pong）。整个通信过程中，连接始终保持，直到任意一方主动关闭。

三、WebSocket vs HTTP/2

很多人会混淆 WebSocket 和 HTTP/2，它们虽然都能提升传输效率，但定位不同：

特性	WebSocket	HTTP/2
通信模式	全双工双向	半双工，服务器推送是单向的
适用场景	实时交互、状态化通信	传统 Web 资源加载、多路复用
协议基础	独立协议，通过 HTTP 升级	HTTP 协议的升级版

简单来说，HTTP/2 的"服务器推送"仍然是"单工"推送，且受流优先级限制；而 WebSocket 才是真正的双向"对话"，更适合需要持续交互的场景。

四、主要应用场景

WebSocket 在以下领域有着广泛的应用：

1. 即时通讯：微信网页版、在线客服系统

2. 协同编辑：多人同时在线文档（如 Google Docs）

3. 实时游戏：对延迟敏感的多人对战游戏

4. 金融行情：股票、币圈实时价格推送

5. IoT 设备控制：远程下发指令与状态上报

五、实战：从代码上手

1. 前端（浏览器）创建连接

浏览器原生支持 WebSocket，无需任何第三方库：

javascript 复制代码

// 1. 创建连接（生产环境请使用 wss://）
const socket = new WebSocket('ws://localhost:8080');

// 2. 连接打开时触发
socket.addEventListener('open', (event) => {
  console.log('连接已建立');
  socket.send('Hello Server!');
  // 支持发送 JSON
  socket.send(JSON.stringify({ type: 'message', data: 'hello' }));
});

// 3. 接收服务器消息
socket.addEventListener('message', (event) => {
  console.log('收到消息:', event.data);
});

// 4. 异常处理
socket.addEventListener('error', (event) => {
  console.error('WebSocket 错误:', event);
});

// 5. 关闭连接
socket.addEventListener('close', (event) => {
  console.log('连接已关闭', event.code, event.reason);
});

2. 后端（Node.js）服务端

这里使用轻量级的 ws 库，先执行 npm install ws：

javascript 复制代码

const WebSocket = require('ws');

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

wss.on('connection', (ws, req) => {
  console.log('客户端连接成功', req.socket.remoteAddress);

  ws.on('message', (data) => {
    const message = data.toString();
    console.log('收到:', message);
    ws.send(`服务器回应: ${message}`);
  });

  ws.send('欢迎连接到 WebSocket 服务器');

  // 心跳保活
  const interval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.ping();
    } else {
      clearInterval(interval);
    }
  }, 30000);

  ws.on('close', () => {
    clearInterval(interval);
  });
});

console.log('WebSocket 服务器运行在 ws://localhost:8080');

六、生产环境实践要点

1. 加密连接（wss）

线上环境必须使用 wss:// （类似 HTTPS），需要配置 SSL 证书。在 Nginx 中，可以通过 proxy_pass 转发 WebSocket 流量，同时开启 SSL。

2. 心跳保活机制

很多网络中间件（如 Nginx、云负载均衡）会在 60-120 秒无数据时断开连接。服务端可以通过定期发送 ping 帧保活，浏览器端也可定期发送空消息（如 socket.send('ping')）来维持连接。

3. 断线重连

前端应监听 close 事件，并实现指数退避重连逻辑，避免在网络波动时频繁重试：

javascript 复制代码

function connect() {
  let delay = 1000;
  const socket = new WebSocket(url);
  socket.onclose = () => {
    setTimeout(connect, delay);
    delay = Math.min(delay * 2, 30000);
  };
}

4. 分布式部署与负载均衡

WebSocket 是长连接，当应用部署在多台服务器上时，必须保证同一客户端的请求始终落在同一台服务器上。常用的解决方案包括：

1）Nginx ip_hash：根据客户端 IP 进行哈希，将请求固定到某台后端

2）Sticky session：通过 Cookie 保持会话亲和性

3）Redis 发布/订阅：当需要广播消息时，将消息发到 Redis，再由各服务器推送到自己持有的客户端

5. 鉴权与安全

1）在握手阶段通过 sec-websocket-protocol 或 URL 参数传递 Token

2）验证通过后才允许建立连接

3）限制消息大小、速率，防止 DoS 攻击

七、总结

WebSocket 以其全双工、低延迟、高时效的特点，成为了现代实时通信的首选方案。无论是聊天、游戏还是 IoT 控制，它都能提供流畅的双向交互体验。

当然，在实际落地过程中，还需要考虑心跳保活、断线重连、负载均衡等工程细节。希望这篇文章能帮助你快速上手 WebSocket，并在你的项目中应用这一强大的技术。

如果你对 WebSocket 的具体实现还有疑问，欢迎在评论区留言交流。