JS 中 WebSocket 通信常见报错怎么快速排查解决-js教程-PHP中文网

websocket连接失败需分段排查：先查network中是否返回101响应及upgrade头，再验send前readystate是否为open，接着确认消息类型匹配与url编码，最后通过1006码和心跳机制诊断频繁断连。

js 中 websocket 通信常见报错怎么快速排查解决

WebSocket 报错不能只盯着控制台那句“connection failed”或“InvalidStateError”，真正的问题往往藏在连接生命周期、网络层响应和状态流转里。快速排查的关键是分段验证：先看握手成没成，再看发没发出去，最后看收不收得到。

浏览器控制台报 WebSocket connection failed 或直接显示 failed，90% 是握手卡在 HTTP 升级阶段。打开 Network → Filter 输入 ws，点开连接项：

状态码不是 101 Switching Protocols？说明服务端或代理（如 Nginx）没完成协议升级；
响应头里缺 Upgrade: websocket 或 Connection: Upgrade？Nginx 必须配全这三行：
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
根本没出现在 Network 列表里？检查 URL 协议是否写错（http:// 写成 ws://）、端口是否匹配、域名是否同源（https://a.com 页面不能连 wss://b.com）；
用 curl 验证后端是否可达：
curl -i -N -H "Connection: upgrade" -H "Upgrade: websocket" https://yourdomain.com/ws，看到 101 才算通。

调用 ws.send() 突然抛错，核心原因永远只有一个：此时 ws.readyState !== WebSocket.OPEN（即不是 1）。常见于：

Vue onMounted 或 React useEffect 里立即发消息，但 onopen 还没触发，readyState 仍是 CONNECTING (0)；
重连逻辑中旧连接已关闭，新连接还没 ready，就调了 send；
全局单例 WebSocket 被提前导出，使用者没等 open 就调用。

安全做法是封装发送函数：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

简单版：每次 send 前加判断 if (ws.readyState === WebSocket.OPEN) { ws.send(...) }；
可靠版：用 Promise 等待 open 事件：
function waitForOpen(ws) { return new Promise(r => ws.readyState === 1 ? r() : ws.addEventListener('open', r, { once: true })) }；
别用轮询（比如每 5ms 查一次），既卡主线程又不可靠。

Network 里能看到连接、onopen 触发了、send 也调了，但服务端没日志，或前端 onmessage 死活不进——问题不在连接，而在消息流转环节：

发的是 ArrayBuffer/Blob，但后端 @OnMessage 只写了 String 参数（Java）或没监听 binary（Node.ws），帧类型不匹配就会静默丢弃；
Chrome DevTools 的 WS → Frames 标签页里，确认发送帧的 Type 是 Text（不是 Binary），且内容是合法 JSON 字符串；
URL 里带 token 参数但含特殊字符（如 +、空格、/），没做 encodeURIComponent，后端解析失败直接拒绝；
反向代理（如 Nginx）设置了 proxy_read_timeout 60，空闲 60 秒后主动断连，前端仍以为 OPEN，后续 send 实际失效；需加大并配 proxy_send_timeout。