浏览器中 WebSocket 怎么用？API 详解与封装实践

创建WebSocket实例即可建立长连接，通过四个事件回调处理通信生命周期：onopen连接就绪后用send()发消息，onmessage接收服务端数据，onclose和onerror处理断开与异常。协议用ws://或加密的wss://，消息支持文本、JSON、Blob和ArrayBuffer四种格式。连接状态通过readyState判断——0正在连接、1已连接、2正在关闭、3已关闭。收二进制数据前需设置binaryType为"arraybuffer"或"blob"。主动关闭调用close()并传入状态码（如1000正常关闭、1001离开页面）。生产环境建议封装客户端类，加入自动重连、心跳检测和消息队列，避免连接中断丢消息。

追问

readyState各状态值在什么场景下出现？

0（CONNECTING）在new WebSocket()后瞬间出现，握手完成前；1（OPEN）是握手成功的正常工作态；2（CLOSING）是调用close()后服务端还未返回关闭帧的过渡态；3（CLOSED）是关闭帧确认或连接异常断开后的终态。注意：网络断开不会立刻变3，需心跳超时才能检测到。

心跳检测怎么实现？

连接建立后启动定时器，每隔N秒（通常30s）发送ping帧或自定义心跳消息，服务端回pong或应答。若超时未收到回复则判定断开，主动close()并触发重连。收到任何消息都重置超时计时器。关键点：心跳间隔要小于Nginx等中间代理的空闲超时（默认60s），否则代理会静默断开连接。

断线重连策略如何设计？

采用指数退避：首次1s后重连，失败则2s、4s、8s，上限30s左右。每次onclose触发时启动重连定时器，onopen时重置退避计数。注意区分正常关闭（状态码1000）和异常断开——前者不重连。重连前要清理旧实例的事件监听，避免内存泄漏。

消息队列有什么用？

连接未就绪时send()会报错，所以发消息前必须检查readyState。非OPEN状态下将消息推入队列，等onopen后再批量发出。队列需设上限（如100条），防止离线过久内存暴涨。对于实时性要求高的场景（如聊天），旧消息可丢弃只保留最新状态。