useWebSocketWorker

这是基于 Web Worker API 封装的 WebSocket Hooks。 主要目的是通过让 WebSocket 运行在 Web Worker 中，从而避免标签页休眠导致断连的问题。

基础用法

创建一个响应式变量 webSocketUrl，用于保存 WebSocket 的地址，并将其作为参数传递给 useWebSocketWorker 函数。 当 webSocketUrl 发生变化时，会自动重新连接 WebSocket。

const webSocketUrl = ref();

// 创建 Websocket 连接
useWebSocketWorker(webSocketUrl, {
  onMessage: (dataStr: string) => {
    // 处理收到的消息
  },
});

心跳消息

在 WebSocket 连接中，可以发送心跳消息，以保持连接的活跃性。可选配置项为 interval（心跳间隔时间，毫秒）、pingMessage（发送的 ping 消息）、pongMessage（接收的 pong 消息）。

如果全都一致那么可以忽略这个参数，程序会自动按照 5000 毫秒发送 ping 消息，并接收 pong 消息。服务端返回的 pong 消息不会触发 onMessage 回调函数。

重要

当 pongMessage 使用函数时， onMessage 中会包含心跳消息，请自己处理。

useWebSocketWorker(webSocketUrl, {
  heartbeat: {
    interval: 5000,
    pingMessage: 'ping',
    pongMessage: 'pong',
  },
});

重新连接

方法内没有内置重连机制，但是由于 webSocketUrl 是响应式数据，所以当其发生变化时，会自动重新连接 WebSocket。可以使用以下方式实现重连机制：

const webSocketUrl = ref();
// WebSocket 重连推迟时间，默认 5 秒后重连，以后每次连接失败都会增加 2 秒再重连
const reconnectDelay = ref(5000);

// 创建 Websocket 连接
useWebSocketWorker(webSocketUrl, {
  onMessage: (dataStr: string) => {
    // 处理收到的消息
  },
  onConnected: () => {
    // 连接成功后重置重连时间
    reconnectDelay.value = 5000;
  },
  onError: () => {
    // 出现异常可能要重连 Websocket 故先更新地址，地址更新后会执行重连
    setTimeout(() => getWebSocketUrl(webSocketUrl), reconnectDelay.value);
    // 重连失败后下次重连推迟 2 秒
    reconnectDelay.value += 2000;
  },
});

API

参数	类型	默认值	说明
webSocketUrl	Ref<string>	-	WebSocket 连接地址
options	UseWebSocketWorkerOptions	-	WebSocket 配置项

UseWebSocketWorkerOptions

参数	类型	默认值	说明
onMessage	(data: any) => void	-	接收到消息时的回调函数
onConnected	() => void	-	连接成功后的回调
onError	() => void	-	抛出异常回调
onDisconnected	() => void	-	断开连接后的回调
heartbeat	boolean | WebSocketHeartbeat	true	心跳消息配置项

WebSocketHeartbeat

参数	类型	默认值	说明
pingMessage	Type	'ping'	发送的心跳消息，支持使用函数。
pongMessage	Type	'pong'	服务端回复的心跳消息，用于检测心跳是否超时，支持使用函数。
interval	number	5000	发送心跳间隔, 单位：毫秒
pongTimeout	number	5000	收到心跳消息的超时时间，如果超过这个时间那么就会主动断开连接并触发 onError 回调函数。单位：毫秒

UseWebSocketWorkerReturn

参数	类型	说明
close	() => void	关闭 WebSocket 连接
open	() => void	打开 WebSocket 连接，如果连接已存在，那么会关闭之前的连接，重新打开一个新的
send	Function	发送消息，参数类型 WebSocketMassage

WebSocketMassage

type WebSocketMassage = string | ArrayBufferLike | Blob | ArrayBufferView;

WebSocketHeartbeatMessage

type WebSocketHeartbeatMessage = string | ArrayBuffer | Blob;