WebSocket.send报InvalidStateError的根本原因是调用时readyState≠1（即非OPEN状态），常见于CONNECTING（0）或CLOSED（3）；须确保send前状态为OPEN，推荐用状态检查或Promise等待open事件，并配对监听onerror/onclose防止静默失败。
WebSocket.send 报 InvalidStateError 的根本原因
错误直接原因是调用 send() 时 WebSocket 实例的 readyState 不是 1（WebSocket.OPEN），常见于 CONNECTING（0）或 CLOSED（3）状态。浏览器严格校验状态，不满足就抛 InvalidStateError，不是兼容性问题，而是协议强制要求。
在 Vue/React 等框架生命周期里调用 send 的坑
像 beforeMount、useEffect 初始化阶段，WebSocket 往往还没完成握手——onopen 尚未触发，readyState 还是 0。此时发消息必报错。
- 不要依赖组件挂载时机判断连接就绪，要监听
onopen - 避免全局单例 WebSocket 在模块加载时就创建，但没等它 ready 就暴露
send方法 - 如果必须提前导出发送能力，需封装成“带等待逻辑”的函数，而非裸调
websocket.send
安全调用 send 的三种写法（推荐按场景选）
核心原则：所有发送操作必须确保 websocket.readyState === WebSocket.OPEN。
✅ 推荐方式一（简单可靠）：每次 send 前检查状态
立即学习“前端免费学习笔记（深入）”；
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
function safeSend(ws, message) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(message));
} else if (ws.readyState === WebSocket.CONNECTING) {
// 可选择排队或丢弃
console.warn('WebSocket still connecting, message queued or dropped');
}
}
✅ 推荐方式二（自动等待）：用 Promise 包装就绪等待
function waitForOpen(ws) {
return new Promise(resolve => {
if (ws.readyState === WebSocket.OPEN) return resolve();
ws.addEventListener('open', resolve, { once: true });
});
}
// 使用
async function sendMessage(ws, msg) {
await waitForOpen(ws);
ws.send(JSON.stringify(msg));
}
⚠️ 慎用方式三（轮询）：如原始代码中每 5ms 检查一次——容易阻塞主线程、浪费资源，仅限极简场景或调试用。
onerror 和 onclose 必须配对监听，否则异常不可见
只监听 onopen 和 onmessage 是危险的。很多连接失败不会立即报错，而是静默进入 CLOSED 状态，后续 send 才暴露问题。
务必添加：
ws.onerror = (e) => console.error('WebSocket error:', e);
ws.onclose = (e) => {
console.log('WebSocket closed:', e.code, e.reason, e.wasClean);
// 根据 e.code 决定是否重连，比如 1006 就该重试
};
真正容易被忽略的是：错误发生后，readyState 可能已变为 CLOSED，但没人监听 onclose，导致后续所有 send 都继续失败，形成静默雪崩。
