onopen事件在WebSocket完成TCP握手、HTTP升级请求、收到101响应且readyState变为OPEN后触发；必须在new WebSocket()后立即赋值onopen，不可用addEventListener监听，且不保证服务端业务就绪。
WebSocket 的 onopen 事件在连接成功完成握手后立即触发，表示通信通道已就绪，可安全发送数据。
onopen 触发的前提条件
WebSocket 连接需完整经历 TCP 握手 → 发起 HTTP 升级请求 → 服务端返回 101 Switching Protocols 响应 → 客户端解析成功。只有这整套流程无误完成，浏览器才将 WebSocket.readyState 设为 OPEN（值为 1），并同步调用 onopen 回调。
- 若服务端未响应、返回非 101 状态码（如 400、500）、或协议升级头缺失，onopen 不会触发，而是进入 onerror 或直接停留在 CONNECTING 状态
- 网络中断、DNS 失败、跨域被拒等底层问题会导致连接失败，也不会走到 onopen 阶段
正确绑定 onopen 的时机
必须在 new WebSocket(url) 实例创建后、且在 readyState 变为 OPEN 前设置 onopen，否则可能错过事件：
- 推荐写法：先创建实例，再立即赋值 onopen（顺序不能颠倒）
- 不推荐使用 addEventListener('open', ...) —— WebSocket 规范中 open 事件不可通过 addEventListener 监听，仅支持 onopen 属性方式
- 如果连接极快建立（如本地服务），而 onopen 赋值稍有延迟，可能漏掉事件；此时可通过检查 readyState === WebSocket.OPEN 判断是否已就绪
常见误区与验证建议
onopen 不代表服务端业务逻辑已准备就绪，仅表示 WebSocket 协议层连接成功：
- 服务端可能完成握手但尚未加载用户会话、未加入房间、或未初始化消息队列 —— 此类逻辑需额外通过首次消息交互确认
- 调试时可结合浏览器开发者工具的 Network 标签页，筛选 ws 类型连接，查看 Status 是否为 101，以及 Initiator 是否为 WebSocket 构造函数
- 避免在 onopen 中直接发送敏感数据，除非已通过身份认证消息完成双向校验
基础使用示例
简洁可靠的写法如下：
const ws = new WebSocket('wss://example.com/chat');
ws.onopen = function(event) {
console.log('WebSocket 已连接，readyState:', ws.readyState); // 输出 1
ws.send(JSON.stringify({ type: 'auth', token: 'xxx' }));
};
ws.onerror = function(err) {
console.error('连接出错', err);
};
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
