1、写一个hook函数
javascript
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页面中使用
javascript
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
方法。- 如果解析失败或发生错误,将错误信息打印在控制台上。