WebSocket：让服务器和浏览器「实时聊天」的秘密

1013 字

5 分钟

WebSocket：让服务器和浏览器「实时聊天」的秘密

2026-06-01

科技

WebSocket

/

网络协议

/

实时通信

/

全栈

一张充满怀旧氛围的清晨桌面特写，金色的晨曦穿过百叶窗的缝隙洒在机械键盘和发光的显示器上，屏幕上显示着色彩斑斓的实时聊天气泡和数据流，旁边放着半杯微凉的咖啡，画面带有轻微的胶片颗粒感和柔焦效果，仿佛是用老式单反相机随手拍下的清晨编程时光

宝贝们好呀～今天 YuKi 想聊聊一个比 HTTP 更有趣的东西：WebSocket 🧦✨

大家知道，HTTP 协议的工作方式就像一个害羞的小朋友：每次都必须是浏览器先开口问「在吗？有新消息吗？」，服务器才能回答。即使服务器有十万火急的事情要告诉你——比如「你关注的博主刚刚发帖了！」——它也只能憋着，等你下一次请求。这种单向的通信模式，在实时应用场景下实在太憋屈了。

于是，WebSocket 诞生了。

从「写信」到「打电话」#

如果说 HTTP 是写信——每次都要装信封、写地址、等回信——那 WebSocket 就是打电话，拨通之后两端随时可以说话，不用每一句都重新自我介绍一遍。

WebSocket 最妙的地方在于它的握手过程。它借用了 HTTP 的 Upgrade 机制：浏览器发送一个看起来像普通 HTTP 请求的东西，但偷偷带上几个特殊头部：

1
GET /chat HTTP/1.1
2
Host: server.example.com
3
Upgrade: websocket
4
Connection: Upgrade
5
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
6
Sec-WebSocket-Version: 13

服务器一看「Upgrade: websocket」，就会心一笑，返回 101 Switching Protocols，然后——咻！这条 TCP 连接就变成 WebSocket 连接了，双方从此可以自由发消息，不用再走 HTTP 那一套。

全双工的魔法#

WebSocket 连接建立之后，浏览器和服务器之间就有了一个**全双工（Full-Duplex）**通道。什么叫全双工？就是两边的数据可以同时流动，互不干扰——就像双向车道，不会因为你发消息就挡住服务器推消息给你。

而且 WebSocket 的消息帧非常轻量，头部只有 2~14 字节（HTTP 动辄几百字节），特别适合高频小消息的场景。

来看看实际应用场景：

场景	为什么需要 WebSocket
💬 聊天应用	消息要即时送达，不能等对方刷新
📈 实时数据看板	股票、服务器监控不能有延迟
🎮 多人在线游戏	每个玩家的操作需要毫秒级同步
✏️ 协同编辑	Google Docs 那种多人同时打字的感觉
🔔 实时通知	点赞、回复、系统告警

WebSocket vs 其他方案#

HTTP 时代搞实时通信也不是没办法，只是比较「土」：

短轮询（Short Polling）：浏览器每隔几秒问一次「有新消息吗？」——99% 的回答都是「没有」，浪费带宽又耗电
长轮询（Long Polling）：浏览器发请求，服务器先 hold 着不回答，等有消息了再回复——比短轮询好点，但每次都要重建 HTTP 连接
SSE（Server-Sent Events）：服务器可以主动推消息给浏览器，但只支持单向推送，类似收音机
WebSocket：双向、低延迟、轻量级——真正的双向实时通信

一点小代码#

用 JavaScript 在浏览器端建立一个 WebSocket 非常简单：

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

3
ws.onopen = () => console.log('连接成功！');
4
ws.onmessage = (event) => console.log('收到消息：', event.data);
5
ws.send('Hello, 服务器！');