WebSocket 由 JavaScript 的 WebSocket 构造函数发起，HTML 仅承载脚本；常见错误包括 URL 协议错误（须用 ws:// 或 wss://）、混合内容限制、JSON 解析未校验类型与异常、onclose 未合理重连及 readyState 判断缺失。
WebSocket 不是 HTML 的功能，HTML 本身不提供 WebSocket API；真正发起连接的是 JavaScript 的 WebSocket 构造函数，HTML 只负责承载运行它的脚本。
为什么 new WebSocket() 会报错“Invalid URL”或直接失败
常见原因是 URL 协议写错或服务端未启动。WebSocket 必须用 ws://（开发）或 wss://（生产），不能用 http:// 或省略协议。
-
new WebSocket("localhost:8080")❌ 缺少协议和路径，浏览器会当作相对 URL 处理 -
new WebSocket("http://localhost:8080")❌ 协议不匹配，直接抛SecurityError -
new WebSocket("ws://localhost:8080/chat")✅ 正确格式，前提是后端已监听该地址并支持 WebSocket 升级
另外，若页面是 https:// 开头，浏览器禁止建立 ws:// 连接（混合内容限制），必须用 wss://，否则控制台显示 Blocked loading mixed active content。
如何安全地监听 onmessage 并处理 JSON 数据
服务端发来的消息默认是 string 或 Blob，不是自动解析的 JSON 对象。直接 data.xxx 会报 Cannot read property 'xxx' of undefined。
- 始终用
event.data获取原始数据，不要假设类型 - 先判断
typeof event.data === 'string'，再JSON.parse()；否则可能因 Blob 导致语法错误 - 加
try/catch：网络传输中 JSON 可能被截断或损坏，JSON.parse()抛异常会中断后续逻辑
ws.onmessage = function(event) {
let data;
try {
if (typeof event.data === 'string') {
data = JSON.parse(event.data);
} else {
return; // 忽略 Blob 类型，或用 FileReader 转换
}
} catch (e) {
console.warn('Invalid JSON received:', event.data);
return;
}
console.log('Parsed:', data);
};
连接关闭时为什么 onclose 没触发，或反复重连失败
WebSocket 关闭分主动（ws.close()）和被动（网络断开、服务重启）。被动断开时，浏览器可能延迟数秒才触发 onclose，且不会自动重连。
-
onclose回调里拿不到event.reason（多数浏览器为空字符串），真正有用的只有event.code：1000 是正常关闭，1006 是异常断连（如网络闪断） - 别在
onclose里立刻new WebSocket()，容易触发浏览器连接频率限制，应加退避策略（如 1s → 2s → 4s 指数增长） - 检查
ws.readyState：只有WebSocket.OPEN（即 1）才能发消息；CONNECTING（0）或CLOSING（2）时调用send()会静默失败
WebSocket 的核心不在 HTML 标签或属性，而在于 JS 实例的生命周期管理——连接状态判断、错误降级（比如 fallback 到轮询）、消息序列化边界处理，这些才是线上项目最容易出问题的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
