WebSocket需用new WebSocket("wss://...")显式指定协议，连接后须监听open事件再send；收消息用onmessage，二进制需设binaryType；断线重连需清旧实例、指数退避并区分关闭码。
码。WebSocket 构造函数怎么用
直接用 new WebSocket() 就能发起连接，但必须传入有效的 wss:// 或 ws:// URL。浏览器不支持协议自动降级，ws:// 在 HTTPS 页面会被拒绝，必须用 wss://。
常见错误：传入相对路径（如 "/ws"）或漏写协议，会报 SecurityError 或 SyntaxError: Invalid URL。
- 正确写法：
const ws = new WebSocket("wss://api.example.com/ws") - 不能省略协议，
new WebSocket("localhost:8080")会失败 - 如果后端只跑 HTTP 开发服务，临时可用
ws://localhost:8080，但上线必须切wss
连接建立后怎么收发消息
WebSocket 是事件驱动的，靠监听 open、message、error、close 四个核心事件工作。别在 new WebSocket() 后立刻调用 send() —— 连接还没就绪。
典型误操作：没等 open 就发数据，导致 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state。
- 发消息前务必等
ws.readyState === WebSocket.OPEN，推荐用ws.onopen回调保证时机 - 接收消息统一走
ws.onmessage = (event) => { console.log(event.data) }，event.data默认是字符串，二进制需设ws.binaryType = "arraybuffer" -
send()支持字符串、Blob、ArrayBuffer、TypedArray，但不能直接传对象，得先JSON.stringify()
如何处理断线与重连
WebSocket 没内置重连机制，网络抖动、服务重启、NAT 超时都会触发 close 事件，此时 readyState 变为 CLOSED，且不可复用该实例。
手动重连的关键点：避免无限重试、控制间隔、区分主动关闭和异常断开。
- 记录
ws.onclose = (e) => { if (e.code !== 1000) triggerReconnect() }，1000表示正常关闭 - 重连前清掉旧实例，再
new WebSocket()，别试图复用已关闭的ws - 用指数退避（如 1s → 2s → 4s）限制重连频率，加个最大重试次数防雪崩
let reconnectTimeout = null;
function connect() {
const ws = new WebSocket("wss://api.example.com/ws");
ws.onopen = () => { clearTimeout(reconnectTimeout); };
ws.onclose = (e) => {
if (e.code !== 1000) {
reconnectTimeout = setTimeout(connect, Math.min(30000, 1000 * Math.pow(2, retryCount)));
}
};
}为什么 onmessage 收不到数据或解析失败
最常见原因是后端发的数据不是 UTF-8 字符串，或者前端没处理好二进制类型。WebSocket 协议本身不规定 payload 格式，收发双方必须约定好编码和结构。
例如后端用 Uint8Array 发原始字节，但前端 ws.binaryType 还是默认的 "blob"，就会导致 event.data 是无法直接读取的 Blob 对象。
- 确认后端发送的是文本帧（
TEXT）还是二进制帧（BINARY） - 若收二进制，提前设
ws.binaryType = "arraybuffer"，然后用new Uint8Array(event.data)解析 - 若收 JSON，务必用
try/catch包裹JSON.parse(event.data)，后端可能发空串或格式错乱数据 - 检查浏览器开发者工具 Network 面板里的 WebSocket 帧（Frames tab），看实际收了什么内容
WebSocket 的坑不在连接本身，而在状态管理与协议对齐。readyState 切换异步、事件触发时机、二进制类型切换、重连时序控制——这些地方一松懈，实时性就变成“偶尔通一下”。
