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

最新推荐文章于 2024-07-01 11:42:04 发布

^草莓牛乳茶^

最新推荐文章于 2024-07-01 11:42:04 发布

阅读量1.2k

点赞数

分类专栏： WebSocket 文章标签：前端 websocket vue.js

本文链接：https://blog.csdn.net/2301_76882889/article/details/132140095

版权

WebSocket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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方法。
如果解析失败或发生错误，将错误信息打印在控制台上。