SecurityError主因是HTTPS页面中使用ws://协议或IE下localhost域名不被信任，NetworkError多因后端未启动、端口未监听或代理未透传Upgrade头；须统一用wss://、检查readyState、监听onerror与onclose并加try-catch解析消息。
WebSocket连接建立时常见的SecurityError和NetworkError
浏览器只允许在安全上下文中使用ws://（非加密）协议——但现代浏览器实际已普遍禁用非加密ws://，尤其当页面通过https://加载时。直接写new WebSocket("ws://localhost:8080")会立刻抛出SecurityError。
正确做法是：后端必须提供wss://端点（即WebSocket over TLS），前端统一用wss://初始化。开发阶段若没配证书，可临时用http://页面配ws://（仅限localhost），但上线前必须切换。
- 检查当前页面协议：
window.location.protocol是"https:"？那WebSocket构造函数必须用"wss://" - Chrome 控制台报
net::ERR_CONNECTION_REFUSED？先确认后端服务已启动且监听了对应端口（如0.0.0.0:8080，而非仅127.0.0.1） - Firefox 报
NS_ERROR_UNKNOWN_PROTOCOL？说明 URL 字符串拼错了，比如多写了空格或漏了冒号
onmessage回调里解析JSON数据的必要防护
WebSocket 传来的 event.data 可能是string、Blob 或 ArrayBuffer，取决于服务端发送方式。多数场景下服务端发的是 JSON 字符串，但前端不能假设它一定合法。
常见错误是直接写 JSON.parse(event.data)，一旦后端发来非JSON（如心跳包"ping"、二进制帧、或格式错误字符串），就会触发SyntaxError并中断后续逻辑。
立即学习“前端免费学习笔记（深入）”；
- 始终用
try...catch包裹JSON.parse() - 检查
typeof event.data === "string"再解析，避免对Blob直接解析 - 简单示例：
socket.onmessage = function(event) { if (typeof event.data !== "string") return; try { const data = JSON.parse(event.data); console.log("收到消息:", data); } catch (e) { console.warn("无法解析消息:", event.data); } };
手动重连机制为什么不能只靠onclose触发
onclose 确实会在连接断开时触发，但它**不会在连接失败时调用**——比如首次new WebSocket()就因网络不通而失败，此时触发的是onerror，而不是onclose。
更麻烦的是：onerror 本身不提供错误类型信息，也无法阻止默认行为，所以只监听onclose会导致首次连接失败完全无感知，重连逻辑压根不执行。
- 必须同时监听
onerror和onclose，并在两者中都触发重连逻辑 - 加退避策略：第一次失败后等 1s，第二次等 2s，第三次等 4s……避免密集轮询打爆服务端
- 设置最大重试次数（如 5 次），超限后停止并提示用户“连接异常，请刷新页面”
- 注意：不要在
onerror里直接调用socket.close()，它可能已是关闭状态，会报错
发送消息前必须检查socket.readyState
socket.send() 在连接未建立（CONNECTING）或已关闭（CLOSED、CLOSING）时调用，会直接抛出InvalidStateError。这个错误非常隐蔽——它不会打断 JS 执行，但会出现在控制台，且后续消息全丢。
典型场景：用户快速点击发送按钮，而 WebSocket 还在握手；或网络波动导致连接意外中断，但 UI 仍显示“在线”。
- 每次发送前检查：
if (socket.readyState === WebSocket.OPEN) { socket.send(...); } - 如果状态是
CONNECTING，可缓存消息到队列，等onopen触发后再批量发送 - 别依赖
socket.url或自定义布尔变量判断连接状态——只有readyState是权威来源 -
readyState值含义：0=CONNECTING,1=OPEN,2=CLOSING,3=CLOSED
onerror 的不可靠性、event.data 类型不确定性、以及readyState 的瞬时性。这些地方不补全，WebSocket 看似能通，实则一碰弱网就静默失效。 
