dbsd_kczx/src/hooks/web/useWebSocket.ts

107 lines
2.5 KiB
TypeScript
Raw Normal View History

2022-03-10 09:47:29 +08:00
// noinspection JSUnusedGlobalSymbols
import { computed, reactive, ref, unref } from 'vue'
import { useWebSocket as $useWebSocket, WebSocketResult } from '@vueuse/core'
import { getToken } from '/@/utils/auth';
2022-03-10 09:47:29 +08:00
const state = reactive({
server: '',
sendValue: '',
recordList: [] as { id: number; time: number; res: string }[],
})
const result = ref<WebSocketResult<any>>()
const listeners = new Map()
/**
* WebSocket
* @param url
*/
export function connectWebSocket(url: string) {
if (!unref(getIsOpen)) {
state.server = url
//update-begin-author:taoyan date:2022-4-24 for: v2.4.6 的 websocket 服务端,存在性能和安全问题。 #3278
let token = (getToken() || '') as string
2022-03-10 09:47:29 +08:00
result.value = $useWebSocket(state.server, {
// 自动重连
autoReconnect: true,
// 心跳检测
heartbeat: false,
//protocols: [token],
2022-03-10 09:47:29 +08:00
})
//update-end-author:taoyan date:2022-4-24 for: v2.4.6 的 websocket 服务端,存在性能和安全问题。 #3278
2022-03-10 09:47:29 +08:00
result.value.open()
const ws = unref(result.value.ws)
if (ws) {
ws.onopen = onOpen
ws.onclose = onClose
ws.onerror = onError
ws.onmessage = onMessage
}
}
}
function onOpen() {
console.log('[WebSocket] 连接成功')
}
function onClose(e) {
console.log('[WebSocket] 连接断开:', e)
}
function onError(e) {
console.log('[WebSocket] 连接发生错误: ', e)
}
function onMessage(e) {
if (e.data === 'ping') {
return
}
console.debug('[WebSocket] -----接收消息-------', e.data)
try {
const data = JSON.parse(e.data)
for (const callback of listeners.keys()) {
try {
callback(data)
} catch (err) {
console.error(err)
}
}
} catch (err) {
console.error('[WebSocket] data解析失败', err)
}
}
/**
* WebSocket
*/
export const getIsOpen = computed(() => result.value?.status.value === 'OPEN')
/**
* WebSocket
* @param callback
*/
export function onWebSocket(callback: (data: object) => any) {
if (!listeners.has(callback)) {
if (typeof callback === 'function') {
listeners.set(callback, null)
} else {
console.debug('[WebSocket] 添加 WebSocket 消息监听失败:传入的参数不是一个方法')
}
}
}
/**
* WebSocket
*
* @param callback
*/
export function offWebSocket(callback: (data: object) => any) {
listeners.delete(callback)
}
export function useWebSocket() {
return unref(result)
}