告别轮询！WebSocket 就像“专线电话”，让服务器主动找你聊天-编程阁

摘要：还在用setInterval傻傻地问服务器“有新消息吗”？快醒醒！本文用“打电话”的通俗比喻，带你彻底搞懂 WebSocket 全双工通信原理。从 HTTP 的“短连接”痛点到 WebSocket 的握手流程、心跳机制及实战应用，一文打通实时通信任督二脉！
关键词：WebSocket, HTTP轮询, 全双工通信, 实时推送, 握手协议

大家好，我是飞哥。

在开发即时通讯（IM）、股票行情、即时游戏或协同编辑文档时，我们经常遇到一个需求：服务器有新数据了，如何第一时间推送到客户端？

在 WebSocket 出现之前，我们通常用HTTP 轮询 (Polling)。

1. 痛点：HTTP 的“短连接”与“轮询”

HTTP 协议的设计初衷是“请求-响应”模式，就像发邮件：

客户端发个请求（发信）。
服务端处理完返回响应（回信）。
连接断开。

如果服务器有新数据，它不能主动发给客户端，必须等客户端下次来问。

1.1 轮询 (Polling) —— 烦人的“每秒一问”

为了搞定实时性，最早的办法是让客户端每隔 1 秒问一次：

“有新消息吗？” -> “没有。”
“有新消息吗？” -> “没有。”
“有新消息吗？” -> “有！给你。”

缺点：

浪费带宽：99% 的请求都是无用的。
延迟高：消息可能延迟 1 秒（取决于轮询间隔）。
服务器压力大：海量并发下，服务器光处理这些空请求就累趴了。

2. 救星：WebSocket —— 专线电话

HTML5 引入了WebSocket协议。它就像打电话：

拨号（握手）：客户端发起连接，双方确认建立通话。
通话（全双工）：连接建立后，双方随时都可以说话，不用再重新拨号。
挂机（关闭）：任意一方挂断，通话结束。

特点：

全双工 (Full Duplex)：服务器可以主动发数据给客户端，客户端也可以发给服务器。
长连接：一旦建立，保持连接，直到断开。
轻量级：头部信息很小，不像 HTTP 每次都要带一大堆 Header。

3. 握手流程：如何从 HTTP 升级到 WebSocket？

WebSocket 的建立需要借用 HTTP 来“握手”。

3.1 客户端发起请求

客户端发送一个特殊的 HTTP 请求：

GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13

Upgrade: websocket和Connection: Upgrade：告诉服务器，“我想把协议升级成 WebSocket”。
Sec-WebSocket-Key：一个随机字符串，用于验证服务器是否支持 WebSocket。

3.2 服务器响应

如果服务器同意升级，会返回 101 状态码：

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

101 Switching Protocols：同意切换协议。
Sec-WebSocket-Accept：是根据客户端发来的 Key 计算出来的，证明“我是正版 WebSocket 服务器”。

握手成功后，HTTP 协议退场，接下来全是 WebSocket 协议的二进制帧传输。

4. 核心机制：心跳与重连

保持长连接最怕什么？网络波动和防火墙断连。

4.1 心跳机制 (Heartbeat)

为了防止连接因长时间没有数据传输而被防火墙（NAT）切断，双方需要定时发送“心跳包”。

Ping：服务器发个“Ping”包（或客户端发）。
Pong：对方收到后回个“Pong”包。
作用：确认对方还活着，且连接没断。

4.2 断线重连

如果心跳超时或连接异常断开（onclose事件），客户端需要自动重连：

等待几秒（指数退避算法，避免雪崩）。
重新发起 WebSocket 连接。
恢复之前的订阅状态。

5. 实战代码示例 (Node.js + Vue)

5.1 服务端 (Node.js + ws)

constWebSocket=require('ws');constwss=newWebSocket.Server({port:8080});wss.on('connection',functionconnection(ws){console.log('客户端已连接');ws.on('message',functionincoming(message){console.log('收到消息: %s',message);});// 主动推送消息setInterval(()=>{// readyState 1 代表 OPEN 状态if(ws.readyState===WebSocket.OPEN){ws.send(JSON.stringify({type:'news',content:'现在时间：'+newDate()}));}},3000);});

5.2 客户端 (Vue / 原生 JS)

constws=newWebSocket('ws://localhost:8080');ws.onopen=function(){console.log('连接已建立');ws.send('Hello Server!');};ws.onmessage=function(event){constdata=JSON.parse(event.data);console.log('收到服务器推送:',data);};ws.onclose=function(){console.log('连接已断开，准备重连...');};ws.onerror=function(error){console.error('WebSocket Error:',error);};

6. 总结与面试题

总结

HTTP：短连接，被动响应，适合网页浏览。
WebSocket：长连接，主动推送，适合实时游戏、聊天、大屏数据。

高频面试题

WebSocket 和 HTTP 有什么关系？
- WebSocket 借助 HTTP 完成握手（Upgrade），握手成功后使用独立的 TCP 连接传输数据。
WebSocket 是基于 TCP 还是 UDP？
- TCP。它需要可靠传输。
如何解决 WebSocket 的断线问题？
- 心跳机制 (Ping/Pong) + 断线重连策略。
WebSocket 相比 HTTP 长轮询（Long Polling）有什么优势？
- 更小的开销：不需要每次都带完整的 HTTP 头部。
- 更低的延迟：服务端有数据直接推送，不需要等客户端发起请求。
- 全双工：双方都能主动发消息。
WebSocket 服务端最多能支持多少并发连接？
- 理论无上限：服务端只监听一个端口（如 8080），连接数主要受限于内存和文件描述符 (File Descriptors)。
- 实际瓶颈：
  - 内存：每个连接都需要占用内核内存和应用层内存。Node.js 中一个空连接约占 4KB-10KB，16GB 内存理论可抗百万级连接（C1000K）。
  - 文件描述符：Linux 默认限制 1024，需要修改ulimit -n调大。
  - CPU：高并发下的广播（群发）操作会消耗大量 CPU。