From ef65bb830ec19cb9c22abdb65d14deeea4267228 Mon Sep 17 00:00:00 2001 From: zhangdaiscott Date: Thu, 22 Sep 2022 14:05:16 +0800 Subject: [PATCH] =?UTF-8?q?websocket=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/web/useWebSocket.ts | 65 +++++++++++++++-------------------- 1 file changed, 27 insertions(+), 38 deletions(-) diff --git a/src/hooks/web/useWebSocket.ts b/src/hooks/web/useWebSocket.ts index c3ef8e2..57ead54 100644 --- a/src/hooks/web/useWebSocket.ts +++ b/src/hooks/web/useWebSocket.ts @@ -1,17 +1,10 @@ // noinspection JSUnusedGlobalSymbols -import { computed, reactive, ref, unref } from 'vue'; -import { useWebSocket as $useWebSocket, WebSocketResult } from '@vueuse/core'; +import { unref } from 'vue'; +import { useWebSocket, WebSocketResult } from '@vueuse/core'; import { getToken } from '/@/utils/auth'; -const state = reactive({ - server: '', - sendValue: '', - recordList: [] as { id: number; time: number; res: string }[], -}); - -const result = ref>(); - +let result: WebSocketResult; const listeners = new Map(); /** @@ -19,25 +12,28 @@ const listeners = new Map(); * @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; - result.value = $useWebSocket(state.server, { - // 自动重连 - autoReconnect: true, - // 心跳检测 - heartbeat: false, - protocols: [token], - }); - //update-end-author:taoyan date:2022-4-24 for: v2.4.6 的 websocket 服务端,存在性能和安全问题。 #3278 - - //【jeecgboot-vue3/issues/I5KULW】Websocket 连接后自动给关闭 - //result.value.open(); - const ws = unref(result.value.ws); - if (ws) { - ws.onopen = onOpen; - ws.onclose = onClose; + //update-begin-author:taoyan date:2022-4-24 for: v2.4.6 的 websocket 服务端,存在性能和安全问题。 #3278 + let token = (getToken() || '') as string; + result = useWebSocket(url, { + // 自动重连 (遇到错误最多重复连接10次) + autoReconnect: { + retries : 10, + delay : 5000 + }, + // 心跳检测 + heartbeat: { + message: "ping", + interval: 55000 + }, + protocols: [token], + }); + //update-end-author:taoyan date:2022-4-24 for: v2.4.6 的 websocket 服务端,存在性能和安全问题。 #3278 + if (result) { + result.open = onOpen; + result.close = onClose; + + const ws = unref(result.ws); + if(ws!=null){ ws.onerror = onError; ws.onmessage = onMessage; } @@ -57,9 +53,6 @@ function onError(e) { } function onMessage(e) { - if (e.data === 'ping') { - return; - } console.debug('[WebSocket] -----接收消息-------', e.data); try { const data = JSON.parse(e.data); @@ -75,10 +68,6 @@ function onMessage(e) { } } -/** - * 判断 WebSocket 是否是开启状态 - */ -export const getIsOpen = computed(() => result.value?.status.value === 'OPEN'); /** * 添加 WebSocket 消息监听 @@ -103,6 +92,6 @@ export function offWebSocket(callback: (data: object) => any) { listeners.delete(callback); } -export function useWebSocket() { - return unref(result); +export function useMyWebSocket() { + return result; }