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

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

关键词：WebSocket, HTTP轮询, 全双工通信, 实时推送, 握手协议

大家好，我是飞哥。

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

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

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

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

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

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

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

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

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

缺点：

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

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

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

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

特点：

• 全双工 (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事件），客户端需要自动重连：

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

---

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：长连接，主动推送，适合实时游戏、聊天、大屏数据。

高频面试题

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

---

互动话题：
你在项目中用过 WebSocket 吗？遇到过最坑的问题是什么（比如粘包、断连）？欢迎在评论区分享！

📌关注【爱码说】，回复【面试】获取 2026 前端高频面试题库 (PDF版)。