WebSocket连接失败主因是服务端未运行、URL协议错误（须用ws://或wss://）或网络拦截；onmessage收不到数据多因服务端未send()或前端未JSON.parse()；发送前须确保readyState为1；二进制数据需设置binaryType并注意Chrome DevTools不显示Binary帧。
WebSocket 连接失败，大概率不是代码写错了，而是服务端没跑、URL 协议写错，或者浏览器被代理/防火墙拦截了。先确认 ws:// 或 wss:// 地址能被访问，再谈双向通信。
WebSocket 构造函数必须用 ws:// 或 wss:// 协议
浏览器不允许用 http:// 或 localhost（无协议）直接构造 WebSocket。常见错误：
-
new WebSocket('localhost:8080')→ 缺少协议，会报Failed to construct 'WebSocket': The URL 'localhost:8080' is invalid -
new WebSocket('http://127.0.0.1:8080')→ 协议不匹配，必须是ws://（开发）或wss://（生产） - 后端用 Express 启的 HTTP 服务，没配 WebSocket 服务（比如没用
ws库或socket.io），客户端连上去立刻断开，onerror触发但没日志
正确写法：new WebSocket('ws://127.0.0.1:8080') 或 new WebSocket('wss://api.example.com/ws')。注意：域名需与当前页面同源或服务端已配置 CORS + WebSocket 允许跨域（靠 Origin 头判断，不是 HTTP CORS 那套）。
onmessage 收不到数据？检查服务端是否真的 send() 了
前端 onmessage 不触发，90% 是服务端根本没调用 send()，或发的是字符串但前端 expect JSON 对象却没 JSON.parse()。
立即学习“Java免费学习笔记（深入）”；
- 服务端发字符串：
client.send('hello')→ 前端event.data就是字符串'hello' - 服务端发 JSON：
client.send(JSON.stringify({type: 'msg', text: 'hi'}))→ 前端必须JSON.parse(event.data)才能当对象用 - 服务端用
socket.io时，不能直接用原生WebSocket客户端连——协议不兼容，会握手失败（HTTP 400 或连接立即关闭）
调试建议：在服务端 send() 前加 console.log()，用 curl -i http://127.0.0.1:8080 看服务是否存活；用浏览器 DevTools 的 Network → WS → Messages 标签，确认帧是否真实发出和到达。
发送消息前必须等 readyState === 1
WebSocket.readyState 有四个值：0（CONNECTING）、1（OPEN）、2（CLOSING）、3（CLOSED）。直接在 new WebSocket() 后立刻 send()，大概率报错 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state。
- 安全做法：只在
onopen回调里发首次消息，或每次发前判断if (ws.readyState === WebSocket.OPEN) { ws.send(...) } - 不要依赖
setTimeout等固定毫秒数——网络延迟、服务端负载都可能导致连接慢于预期 - 如果需要“连接即发”，把消息暂存队列，
onopen触发后再批量send()
另外，onclose 里别自动重连太多次，容易触发浏览器限流或服务端拒绝连接。带退避策略的重连（如指数增长延迟）更稳妥。
二进制数据传图/文件？注意 ArrayBuffer 和 Blob 的处理路径
WebSocket 原生支持 ArrayBuffer 和 Blob，但默认 binaryType 是 'blob'，收到二进制时 event.data 是 Blob 对象，不是 Uint8Array。
- 想直接操作字节：设
ws.binaryType = 'arraybuffer'，然后new Uint8Array(event.data) - 想读取图片：
const url = URL.createObjectURL(event.data)（event.data是Blob）→ 再赋给 - 服务端发二进制时，Node.js 的
ws库需用Buffer；若发字符串但内容是 base64，前端仍要atob()+Uint8Array转换，效率远低于原生二进制
真正容易被忽略的是：Chrome 的 DevTools Network → WS → Frames 只显示文本帧（Text），二进制帧（Binary）默认折叠且不解析内容。你看到“no data”不等于没发成功，得靠服务端日志或抓包确认。
