WebSocket 是独立于 HTTP 的 TCP 协议，通过 HTTP 握手升级后实现双向实时通信；与 HTTP 的请求-响应模型不同，它支持服务器主动推送，适用于聊天、协作编辑等低延迟场景。
WebSocket 是什么，和 HTTP 有什么根本区别
WebSocket 不是 HTTP 的升级版，而是一个独立的 TCP 协议通道。它在建立连接时用一次 HTTP 握手（Upgrade: websocket），之后就完全脱离 HTTP 栈，不再有请求-响应模型。这意味着服务器能主动推数据给浏览器，不用轮询或 SSE 那种“伪实时”方式。
关键判断：如果你需要低延迟、高频率、双向自由通信（比如聊天、协作编辑、实时仪表盘），WebSocket 是合理选择；如果只是偶尔拉一次状态，用 fetch 更轻量。
如何创建并维持一个可用的 WebSocket 连接
浏览器端用 new WebSocket(url) 即可发起连接，但真正可用要处理好三个环节：连接建立、消息收发、异常恢复。
-
url必须以ws://或wss://开头，不能是http://—— 否则直接抛SecurityError - 连接成功后触发
onopen，此时才能调用send()；在此之前调用会静默失败 - 断线后
onclose触发，但readyState变为CLOSED，不会自动重连 —— 必须手动实现重试逻辑 - 建议加心跳：每 30 秒发一次
ping消息（服务端需响应pong），避免 NAT 超时断连
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('已连接');
ws.send(JSON.stringify({ type: 'auth', token: 'xxx' }));
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('收到:', data);
};
ws.onerror = (err) => {
console.error('WebSocket 错误:', err);
};
ws.onclose = () => {
console.log('连接关闭，5秒后重连');
setTimeout(() => {
// 实际项目中应限制重试次数 + 指数退避
location.reload(); // 简化示例
}, 5000);
};
服务端必须支持 WebSocket 协议，不是所有后端都开箱即用
Node.js 的 http 模块本身不支持 WebSocket，必须用专门库（如 ws、socket.io）；Python 的 Flask 或 Django 默认也不支持，得配 gevent-websocket 或 django-channels。
立即学习“Java免费学习笔记（深入）”；
常见错误现象：WebSocket connection to 'wss://...' failed: Error during WebSocket handshake: Unexpected response code: 404 —— 大概率是服务端没监听该路径，或反向代理（Nginx）没透传 Upgrade 头。
- Nginx 配置必须包含：
proxy_http_version 1.1;、proxy_set_header Upgrade $http_upgrade;、proxy_set_header Connection "upgrade"; - 服务端路由路径（如
/ws）必须和前端WebSocket构造函数里的路径严格一致 - 若用
socket.io，前端必须用socket.io-client，不能直接用原生WebSocket—— 它们协议不兼容
发送与接收二进制数据时容易忽略的细节
WebSocket 原生支持 ArrayBuffer 和 Blob，但默认 event.data 是字符串。想传图片、音频或 protobuf，必须显式设置 binaryType。
- 发送前：用
ws.binaryType = 'arraybuffer'或'blob'，否则send()会尝试把二进制转成字符串，导致乱码 - 接收时：即使设置了
binaryType，event.data类型仍取决于服务端发的是什么 —— 服务端发ArrayBuffer，前端才收到ArrayBuffer - 大文件分片传输需自行设计协议（如加
chunk_id、total_chunks字段），WebSocket 层不保证消息边界
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
console.log('收到二进制数据:', view.slice(0, 10));
}
};
WebSocket 的复杂点不在连接建立，而在连接生命周期管理：重连策略、心跳保活、消息队列缓冲、多 tab 同步、离线缓存。这些几乎每个业务都要重复实现，别指望浏览器 API 自动兜底。 
