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

这篇具有很好参考价值的文章主要介绍了【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)
        }
    },
})

文章来源地址https://www.toymoban.com/news/detail-698363.html

使用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方法。

如果解析失败或发生错误，将错误信息打印在控制台上。