WebSocket 的 readyState 是 WebSocket API 提供的只读整数状态标识，取值为 0（CONNECTING）、1（OPEN）、2（CLOSING）、3（CLOSED），用于精准反映连接生命周期阶段，应通过事件驱动（onopen/onclose等）监听状态变化，并在 send()/close() 前校验状态以确保通信健壮性。
WebSocket 的 readyState 属性不是 HTML5 标准定义的，而是 WebSocket API 本身提供的状态标识，用于反映连接当前所处的生命周期阶段。 它是一个只读整数，对应四个明确状态，开发者可通过轮询或事件监听（配合 onopen/onclose 等）实时感知连接变化。下面说明如何正确使用它监控连接状态。
理解 readyState 的四个取值及含义
WebSocket 实例的 readyState 有且仅有以下四种合法值，定义在 WebSocket 接口规范中：
- 0 — CONNECTING：连接正在建立中，尚未完成握手（例如 DNS 查询、TCP 握手、发送/等待 HTTP Upgrade 响应）
-
1 — OPEN：握手成功，连接已就绪，可随时调用
send()收发消息 -
2 — CLOSING：关闭流程已启动（本地或远端发起
close()），但尚未完全断开；此时仍可能收到剩余数据 - 3 — CLOSED：连接已彻底关闭（无论正常还是异常），不可再通信；若需重连，必须新建 WebSocket 实例
通过事件驱动方式响应状态变化（推荐）
不建议频繁轮询 readyState，而应依赖原生事件。每个关键状态切换都有对应事件，语义清晰且性能高效：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
onopen：当readyState变为 1 时触发，表示连接就绪 - 监听
onmessage：仅在 OPEN 状态下有效接收数据 - 监听
onclose：当readyState变为 3 时触发，含code和reason字段说明关闭原因 - 监听
onerror：非阻塞错误（如网络中断、协议错误）发生时触发，此时readyState通常已变为 0 或 3
必要时检查 readyState 防止误操作
在调用 send() 或 close() 前，主动判断 readyState 是健壮实践：
立即学习“前端免费学习笔记（深入）”；
-
if (ws.readyState === WebSocket.OPEN) ws.send('data');—— 避免向未就绪或已关闭连接发消息 -
if ([WebSocket.OPEN, WebSocket.CLOSING].includes(ws.readyState)) ws.close();—— 允许对 OPEN/CLOSING 状态安全调用 close（重复调用无副作用） - 不要在
CONNECTING（0）或CLOSED（3）状态下尝试send()，会直接抛出异常
调试与状态跟踪的小技巧
开发阶段可快速映射数字到可读状态，便于日志输出和排查：
- 定义常量映射：
const READY_STATE = { CONNECTING: 0, OPEN: 1, CLOSING: 2, CLOSED: 3 }; - 打印状态变化：
console.log('WS state:', ['CONNECTING','OPEN','CLOSING','CLOSED'][ws.readyState]); - 结合
onopen/onclose记录时间戳，辅助分析连接延迟或异常中断周期
