WebSocket连接必须用new WebSocket()创建,协议限于ws/wss,需等待onopen后发送消息,binaryType需设为arraybuffer处理二进制数据,断线重连需指数退避并限制次数。

WebSocket 连接必须用 new WebSocket() 创建,不能用 fetch 或 XMLHttpRequest
WebSocket 是独立于 HTTP 的全双工协议,浏览器不支持用传统请求方式“发起”连接。你看到的 ws:// 或 wss:// 地址,只能传给 WebSocket 构造函数——其他任何 API 都无法建立真正的 WebSocket 连接。
-
fetch('ws://example.com')会直接报错:TypeError: Invalid URL -
new WebSocket('http://...')会失败,协议必须是ws或wss - 连接过程不可取消,没有类似
AbortController的机制 - 首次握手依赖 HTTP Upgrade,所以服务端必须明确支持 WebSocket 协议(如 Node.js 的
ws、socket.io或 Nginx 正确配置Upgrade头)
监听 onmessage 前必须确保 readyState === 1,否则消息会丢失
WebSocket 初始化后处于 CONNECTING(值为 0),此时调用 send() 会抛出异常,而 onmessage 回调即使已注册,也不会触发——因为连接尚未就绪。很多实时功能失效,根源就是没等连接完成就开始发/收数据。
- 正确做法:在
onopen回调里开始发送初始化消息或启用 UI 交互 - 错误写法:
const ws = new WebSocket('wss://api.example.com'); ws.onmessage = e => console.log(e.data); // ✅ 注册了 ws.send('hello'); // ❌ 此时 readyState 很可能还是 0,报错 - 安全判断:
if (ws.readyState === WebSocket.OPEN) { ws.send(data); } else { console.warn('WebSocket not ready, current state:', ws.readyState); }
服务端推送的二进制数据默认转成 Blob,需手动设 binaryType = 'arraybuffer'
WebSocket 收到二进制帧(如图片、音频、Protobuf 序列化数据)时,浏览器默认把 event.data 当作 Blob 处理。如果后端发的是 ArrayBuffer,前端却按 Blob 解析,就会卡在 blob.arrayBuffer() 异步流程里,破坏实时性。
- 立即生效的设置:
const ws = new WebSocket('wss://api.example.com'); ws.binaryType = 'arraybuffer'; // 必须在 onopen 前或连接建立后立刻设 ws.onmessage = e => { if (e.data instanceof ArrayBuffer) { const view = new Uint8Array(e.data); console.log('Received raw bytes:', view); } }; - 不设
binaryType时,e.data是Blob,必须用e.data.arrayBuffer().then(...),引入 Promise 延迟 - 该设置对文本消息无影响,
string类型仍正常接收
断线重连不能只靠 onclose,要主动轮询 readyState 并限制重试次数
onclose 只在连接已关闭后触发,但它不区分“服务端主动断开”和“网络闪断”。单纯监听它再 new WebSocket() 重建,容易陷入无限重连循环(比如 DNS 故障、防火墙拦截导致反复失败)。
一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!
立即学习“Java免费学习笔记(深入)”;
- 推荐模式:用
setTimeout+ 指数退避,在onclose和onerror中统一触发重连逻辑 - 必须加最大重试次数(如 5 次)和总超时(如 2 分钟),避免耗尽客户端资源
- 每次重连前检查
ws.readyState,跳过重复新建:let reconnectCount = 0; const MAX_RECONNECT = 5;
function connect() { ws = new WebSocket('wss://api.example.com'); ws.onopen = () => { reconnectCount = 0; }; ws.onclose = () => { if (reconnectCount < MAX_RECONNECT) { reconnectCount++; setTimeout(connect, Math.min(1000 Math.pow(2, reconnectCount), 30000)); } }; ws.onerror = () => { / 同上 */ }; }
WebSocket 的真实复杂度不在连接本身,而在状态同步、消息去重、心跳保活、序列化协议选型这些环节。别让 onmessage 成为唯一关注点。










