websocket 连接失败主因是 file:// 协议下浏览器禁止非 http(s) 上下文发起连接，须通过 http:// 服务访问；onmessage 不触发常因未校验 readystate 或未解析 json；send 报 invalidstateerror 是因在 connecting 状态发送，须在 onopen 中执行；页面刷新后连接必断，需前端重连+后端会话恢复。
WebSocket 连接失败：new WebSocket() 报错 InvalidAccessError 或直接不触发 onopen
常见于把 ws:// 地址写在本地双击打开的 file:// HTML 文件里——浏览器直接拒绝连接，连请求都不发。现代浏览器不允许非 HTTP(S) 上下文发起 WebSocket 连接。
- 必须通过 HTTP 服务访问页面，比如用
python3 -m http.server 8000启一个本地服务，然后打开http://localhost:8000/index.html - 开发时别双击 HTML 文件，也别用 VS Code 的 Live Server 插件「自动开启 HTTPS」选项（它默认启的是
https://，而多数后端 WebSocket 服务只监听ws://） - 如果后端是
wss://，前端必须走https://页面，否则会被浏览器拦截
HTML 中建立连接后收不到消息：onmessage 不执行
不是代码没写，而是消息格式或连接状态出了问题。WebSocket 只传原始字节流，后端发过来的如果是 JSON 字符串但前端没解析，或者连接还没 ready 就发消息，都会“静默失败”。
- 务必检查
ws.readyState === WebSocket.OPEN再发送，否则发出去就丢 -
onmessage收到的event.data是string或Blob，JSON 数据得手动JSON.parse(event.data) - 后端如果发的是二进制（如
ArrayBuffer），前端要设ws.binaryType = 'arraybuffer'，否则event.data会是空字符串
为什么 ws.send() 突然报错 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state
这是最常被忽略的时序陷阱：连接是异步建立的，new WebSocket(url) 立刻返回，但底层 TCP 握手、HTTP 升级还没完成。此时调用 send() 就会炸。
- 不要在
new WebSocket()后立刻send()，哪怕只隔一行代码也不行 - 所有发送逻辑必须包裹在
ws.onopen = () => { ws.send(...) }里，或监听readyState变化 - 如果需要“连接后自动发登录包”，就在
onopen里做，别依赖定时器或延时
HTML 页面刷新后 WebSocket 自动断开，怎么维持状态
WebSocket 是纯客户端连接，页面一刷新，JS 实例销毁，socket 对象就被 GC 掉，不可能“自动重连”。所谓“维持状态”，实际是前端自己实现重连逻辑 + 后端配合会话恢复。
- 不要指望浏览器帮你续上旧连接；每次刷新都是全新连接
- 前端可封装
reconnect()函数，在onclose里延迟重试（注意加退避，比如 1s→2s→4s） - 后端需支持连接 ID 或 token 绑定用户，让新连接能接续旧会话（例如把未读消息推给新 socket）
- 别在
beforeunload里强行ws.close()——用户可能只是切个标签页，关太早反而影响体验
new WebSocket() 很快，但让它在真实网络环境里稳住，得盯住每一个 readyState 变化。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
