【vue3】前端应用中使用WebSocket与服务器进行通信并管理连接状态。

1、写一个hook函数

export const useWebsocketToStore = ({ onMessage }): any => {const url = 'ws:地址' + Math.random()const onConnected = () => {}const onDisconnected = () => {}const onError = () => {}const onMessageDefault = (ws: WebSocket, event: MessageEvent) => {try {const res: ResWSInfoAlarm = JSON.parse(event.data)console.log(res)} catch (e) {console.log(e)}}const { status, data, send, open, close } = useWebSocket(url, {heartbeat: {message: 'ping',interval: 5000,pongTimeout: 1000,},autoReconnect: {retries: 3,delay: 1000,onFailed() {console.log('Failed to connect WebSocket after 3 retries')},},onConnected: onConnected,onDisconnected: onDisconnected,onError: onError,onMessage: onMessage ?? onMessageDefault,})return {status,close,send,open,}
}

1. url是WebSocket的服务器地址，其中Math.random()用于生成一个随机数，以避免缓存问题。
2. onConnected、onDisconnected和onError是连接建立、断开和出错时的回调函数，你可以根据实际需求来定义它们。
3. onMessageDefault是当接收到消息时的默认处理函数，在这里将接收到的消息解析为JSON对象，并打印在控制台上。
4. 使用useWebSocket自定义Hook函数创建WebSocket连接，传入连接的URL和一些配置选项，如心跳设置、自动重连等。
5. 回了一些状态和方法：status表示连接状态，data保存接收到的数据，send用于向服务器发送消息，open用于手动打开连接，close用于关闭连接。

2、vue页面中使用

const webSocketToStore = useWebsocketToStore({onMessage: (ws: WebSocket, event: MessageEvent) => {try {const res: ResWSInfoAlarm = JSON.parse(event.data)if (res.tenantid === tenantId.value) {if (res.type === EnumAlarmDialog.info_alarm) {wsStore.setInfoAlarmCache(res.data)} else if (res.type === EnumAlarmDialog.hazard_alarm) {openDialogHazard(res.data as any)wsStore.initDangerAlarmCache()} else if (res.type === EnumAlarmDialog.video_alarm) {openDialogVideo(res.data as any)wsStore.initVideoAlarmCache()}}} catch (e) {console.log(e)}},
})

 

1. 使用useWebsocketToStore自定义Hook函数创建WebSocket连接，并传入一个配置对象。
2. 在配置对象中，指定了onMessage回调函数。当接收到消息时，会进入该回调函数进行处理。
3. 在onMessage回调函数中，首先尝试将接收到的消息解析为ResWSInfoAlarm类型的JSON对象。
4. 在解析成功后，根据解析出来的对象的属性进行判断和处理，具体逻辑如下：
   • 如果解析出来的tenantid属性等于tenantId.value的值，则进行下一步判断；
   • 根据解析出来的type属性的不同值，执行不同的操作。如果type是EnumAlarmDialog.info_alarm，则调用wsStore.setInfoAlarmCache方法，如果type是EnumAlarmDialog.hazard_alarm，则调用openDialogHazard方法并调用wsStore.initDangerAlarmCache方法，如果type是EnumAlarmDialog.video_alarm，则调用openDialogVideo方法并调用wsStore.initVideoAlarmCache方法。
5. 如果解析失败或发生错误，将错误信息打印在控制台上。