使用 WebSocket 构造函数传入 ws:// 或 wss:// URL 建立连接,必须监听 open、message、error、close 四事件;send() 需在 open 后调用,binaryType 可设为 'arraybuffer' 统一处理二进制;关闭用 close(code, reason),重连需延时、限次、指数退避并检查 readyState。

用 WebSocket 构造函数建立双向通信连接,核心是传入一个有效的 WebSocket 服务端 URL(以 ws:// 或 wss:// 开头),然后监听关键事件来管理连接状态和收发数据。
创建 WebSocket 实例并监听连接状态
调用 new WebSocket(url) 即可发起连接。必须监听 open、message、error 和 close 四个事件,否则无法感知连接是否成功或数据是否到达。
-
open:连接成功建立后触发,此时可以安全调用send() -
message:收到服务端消息时触发,事件对象的data属性包含原始数据(可能是字符串或ArrayBuffer) -
error:连接失败或发生异常时触发(注意:它不表示连接断开,仅表错误) -
close:连接被关闭(主动或被动)后触发,可从事件对象获取code和reason
发送消息前确保连接已就绪
不能在实例创建后立刻调用 send(),因为连接是异步建立的。必须等 open 事件之后再发数据,否则会报错 InvalidStateError。
常见写法:
const ws = new WebSocket('wss://echo.websocket.org');
ws.addEventListener('open', () => {
ws.send('Hello Server');
});
ws.addEventListener('message', (event) => {
console.log('Received:', event.data);
});
处理不同格式的数据收发
WebSocket 原生支持字符串和二进制(Blob、ArrayBuffer)。默认发送字符串;如需发二进制,直接传 Uint8Array 或 ArrayBuffer 即可。
- 服务端返回二进制时,可通过设置
ws.binaryType = 'arraybuffer'统一让event.data是ArrayBuffer - 若要发送 JSON,需手动
JSON.stringify()后作为字符串发送;接收后用JSON.parse()解析(前提是确定是合法 JSON 字符串)
主动关闭连接与重连逻辑建议
调用 ws.close(code, reason) 可主动断开,code 为状态码(如 1000 表正常关闭),reason 是可选说明字符串。
实际项目中常需自动重连,但不要在 close 或 error 中立即重试,应加延时并限制次数,例如:
- 记录重连次数,超过阈值后暂停或提示用户
- 使用指数退避(如第一次等 1s,第二次 2s,第三次 4s…)
- 检查
ws.readyState:0(CONNECTING)、1(OPEN)、2(CLOSING)、3(CLOSED)











