【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,}
}
url是WebSocket的服务器地址，其中Math.random()用于生成一个随机数，以避免缓存问题。onConnected、onDisconnected和onError是连接建立、断开和出错时的回调函数，你可以根据实际需求来定义它们。onMessageDefault是当接收到消息时的默认处理函数，在这里将接收到的消息解析为JSON对象，并打印在控制台上。- 使用
useWebSocket自定义Hook函数创建WebSocket连接，传入连接的URL和一些配置选项，如心跳设置、自动重连等。- 回了一些状态和方法：
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)}},
})
- 使用
useWebsocketToStore自定义Hook函数创建WebSocket连接，并传入一个配置对象。- 在配置对象中，指定了
onMessage回调函数。当接收到消息时，会进入该回调函数进行处理。- 在
onMessage回调函数中，首先尝试将接收到的消息解析为ResWSInfoAlarm类型的JSON对象。- 在解析成功后，根据解析出来的对象的属性进行判断和处理，具体逻辑如下：
- 如果解析出来的
tenantid属性等于tenantId.value的值，则进行下一步判断；- 根据解析出来的
type属性的不同值，执行不同的操作。如果type是EnumAlarmDialog.info_alarm，则调用wsStore.setInfoAlarmCache方法，如果type是EnumAlarmDialog.hazard_alarm，则调用openDialogHazard方法并调用wsStore.initDangerAlarmCache方法，如果type是EnumAlarmDialog.video_alarm，则调用openDialogVideo方法并调用wsStore.initVideoAlarmCache方法。- 如果解析失败或发生错误，将错误信息打印在控制台上。