WebSocket是浏览器与服务器间持久化全双工通信通道，通过一次Upgrade握手复用TCP连接，以帧轻量传输数据，解决轮询延迟高、开销大等问题，适用于聊天、实时通知等场景。
WebSocket 是浏览器与服务器之间建立的持久化、全双工通信通道，能真正实现客户端和服务器实时双向收发数据。它不像 HTTP 那样每次请求都要重新握手、带大量头部，而是通过一次升级（Upgrade）握手后，复用同一个 TCP 连接长期保持连接，后续数据以帧（frame）形式轻量传输。
为什么需要 WebSocket？
传统轮询（Polling）或长轮询（Long Polling）有明显缺陷：频繁建连开销大、延迟高、服务器压力大、无法真正“即时”响应。而 WebSocket 解决了这些——连接建立后，双方随时可主动发消息，适合聊天、协作编辑、实时通知、行情推送等场景。
如何创建并使用 WebSocket？
前端只需一行代码即可发起连接（注意协议是 ws:// 或安全的 wss://）：
const ws = new WebSocket('wss://example.com/chat');
之后监听关键事件：
立即学习“Java免费学习笔记（深入）”；
- 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 本身协议不复杂，难的是围绕它构建健壮、可维护的实时逻辑。
