WebSocket连接失败主因是服务端未启动、协议不匹配（开发用ws://、生产必须wss://）或file://协议访问被拒；onmessage收不到数据多因未JSON.parse()字符串或未判断event.data类型；自动重连需校验close码、加延迟与次数限制。
原生 HTML 中用 WebSocket 接收实时数据，不需要框架、不依赖打包工具，直接写 JS 就能跑通——但容易卡在连接失败、自动断开、或收到数据却没反应这几个点上。
WebSocket 连接失败的常见原因和检查项
浏览器控制台报 WebSocket connection to 'ws://...' failed，不是代码写错了，而是服务端根本没起来，或者协议/地址不对。
-
ws://仅用于 HTTP 开发环境；生产环境必须用wss://（类似 HTTPS），且需反向代理支持（如 Nginx 配置Upgrade和Connection头） - 本地测试时，不能用
file://协议打开 HTML 文件——必须通过http://localhost:8080这类服务访问，否则浏览器会直接拒绝建立 WebSocket - 后端服务未监听对应端口，或防火墙拦截了该端口（比如 Node.js 的
ws库默认不暴露端口，要显式server.listen(8081)）
onmessage 回调里拿不到数据？注意 event.data 类型
WebSocket 收到的消息默认是字符串，如果后端发的是 JSON，你得手动 JSON.parse()；如果发的是 Blob 或 ArrayBuffer，event.data 就不是字符串，直接 .split() 或 .length 会出错。
- 先检查
event.data instanceof Blob或typeof event.data === 'string' - 常见后端（如 Python
websockets、Nodews）默认发字符串，所以多数情况只需JSON.parse(event.data) - 如果后端明确设置了
binaryType = 'arraybuffer'，那就要用new TextDecoder().decode(event.data)转字符串
页面刷新后连接中断，怎么避免重复 new WebSocket？
每次 F5 刷新，JS 重载，旧连接自然断开。但如果你在 onclose 里自动重连，又没加防抖或开关控制，就可能瞬间发起几十个连接请求，被服务端拒绝。
立即学习“前端免费学习笔记（深入）”；
- 不要在
onclose里无条件new WebSocket(...)，先判断event.code：比如1006是异常断开，1000是正常关闭 - 加个简单重连计数器和延迟：
setTimeout(() => connect(), 2000)，最多重试 3 次 - 把
WebSocket实例存在全局变量或let socket块级作用域里，避免多次点击按钮反复创建
最麻烦的其实不是写几行 new WebSocket()，而是前后端对消息格式、关闭时机、重连策略这些细节没对齐——哪怕只差一个 JSON.stringify()，前端也收不到可读内容。
