WebSocket连接必须用new WebSocket()创建，协议限于ws/wss，需等待onopen后发送消息，binaryType需设为arraybuffer处理二进制数据，断线重连需指数退避并限制次数。
WebSocket 连接必须用 new WebSocket() 创建，不能用 fetch 或 XMLHttpRequest
WebSocket 是独立于 HTTP 的全双工协议，浏览器不支持用传统请求方式“发起”连接。你看到的 ws:// 或 wss:// 地址，只能传给 WebSocket 构造函数——其他任何 API 都无法建立真正的 WebSocket 连接。
-
fetch('ws://example.com')会直接报错：TypeError: Invalid URL -
new WebSocket('http://...')会失败，协议必须是ws或wss - 连接过程不可取消，没有类似
AbortController的机制 - 首次握手依赖 HTTP Upgrade，所以服务端必须明确支持 WebSocket 协议（如 Node.js 的
ws、socket.io或 Nginx 正确配置Upgrade头）
监听 onmessage 前必须确保 readyState === 1，否则消息会丢失
WebSocket 初始化后处于 CONNECTING（值为 0），此时调用 send() 会抛出异常，而 onmessage 回调即使已注册，也不会触发——因为连接尚未就绪。很多实时功能失效，根源就是没等连接完成就开始发/收数据。
- 正确做法：在
onopen回调里开始发送初始化消息或启用 UI 交互 - 错误写法：
const ws = new WebSocket('wss://api.example.com'); ws.onmessage = e => console.log(e.data); // ✅ 注册了 ws.send('hello'); // ❌ 此时 readyState 很可能还是 0，报错 - 安全判断：
if (ws.readyState === WebSocket.OPEN) { ws.send(data); } else { console.warn('WebSocket not ready, current state:', ws.readyState); }
服务端推送的二进制数据默认转成 Blob，需手动设 binaryType = 'arraybuffer'
WebSocket 收到二进制帧（如图片、音频、Protobuf 序列化数据）时，浏览器默认把 event.data 当作 Blob 处理。如果后端发的是 ArrayBuffer，前端却按 Blob 解析，就会卡在 blob.arrayBuffer() 异步流程里，破坏实时性。
- 立即生效的设置：
const ws = new WebSocket('wss://api.example.com'); ws.binaryType = 'arraybuffer'; // 必须在 onopen 前或连接建立后立刻设 ws.onmessage = e => { if (e.data instanceof ArrayBuffer) { const view = new Uint8Array(e.data); console.log('Received raw bytes:', view); } }; - 不设
binaryType时，e.data是Blob，必须用e.data.arrayBuffer().then(...)，引入 Promise 延迟 - 该设置对文本消息无影响，
string类型仍正常接收
断线重连不能只靠 onclose，要主动轮询 readyState 并限制重试次数
onclose 只在连接已关闭后触发，但它不区分“服务端主动断开”和“网络闪断”。单纯监听它再 new WebSocket() 重建，容易陷入无限重连循环（比如 DNS 故障、防火墙拦截导致反复失败）。
立即学习“Java免费学习笔记（深入）”；
- 推荐模式：用
setTimeout+ 指数退避，在onclose和onerror中统一触发重连逻辑 - 必须加最大重试次数（如 5 次）和总超时（如 2 分钟），避免耗尽客户端资源
- 每次重连前检查
ws.readyState，跳过重复新建：let reconnectCount = 0; const MAX_RECONNECT = 5; <p>function connect() { ws = new WebSocket('wss://api.example.com'); ws.onopen = () => { reconnectCount = 0; }; ws.onclose = () => { if (reconnectCount < MAX_RECONNECT) { reconnectCount++; setTimeout(connect, Math.min(1000 <em> Math.pow(2, reconnectCount), 30000)); } }; ws.onerror = () => { /</em> 同上 */ }; }
WebSocket 的真实复杂度不在连接本身，而在状态同步、消息去重、心跳保活、序列化协议选型这些环节。别让 onmessage 成为唯一关注点。
