2022-03-10 09:47:29 +08:00
|
|
|
|
// noinspection JSUnusedGlobalSymbols
|
|
|
|
|
|
2022-06-10 10:44:44 +08:00
|
|
|
|
import { computed, reactive, ref, unref } from 'vue';
|
|
|
|
|
import { useWebSocket as $useWebSocket, WebSocketResult } from '@vueuse/core';
|
2022-04-27 19:19:39 +08:00
|
|
|
|
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 }[],
|
2022-06-10 10:44:44 +08:00
|
|
|
|
});
|
2022-03-10 09:47:29 +08:00
|
|
|
|
|
2022-06-10 10:44:44 +08:00
|
|
|
|
const result = ref<WebSocketResult<any>>();
|
2022-03-10 09:47:29 +08:00
|
|
|
|
|
2022-06-10 10:44:44 +08:00
|
|
|
|
const listeners = new Map();
|
2022-03-10 09:47:29 +08:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 开启 WebSocket 链接,全局只需执行一次
|
|
|
|
|
* @param url
|
|
|
|
|
*/
|
|
|
|
|
export function connectWebSocket(url: string) {
|
|
|
|
|
if (!unref(getIsOpen)) {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
state.server = url;
|
2022-04-27 19:19:39 +08:00
|
|
|
|
//update-begin-author:taoyan date:2022-4-24 for: v2.4.6 的 websocket 服务端,存在性能和安全问题。 #3278
|
2022-06-10 10:44:44 +08:00
|
|
|
|
let token = (getToken() || '') as string;
|
2022-03-10 09:47:29 +08:00
|
|
|
|
result.value = $useWebSocket(state.server, {
|
|
|
|
|
// 自动重连
|
|
|
|
|
autoReconnect: true,
|
|
|
|
|
// 心跳检测
|
|
|
|
|
heartbeat: false,
|
2022-07-20 18:01:08 +08:00
|
|
|
|
protocols: [token],
|
2022-06-10 10:44:44 +08:00
|
|
|
|
});
|
2022-04-27 19:19:39 +08:00
|
|
|
|
//update-end-author:taoyan date:2022-4-24 for: v2.4.6 的 websocket 服务端,存在性能和安全问题。 #3278
|
2022-08-18 18:51:44 +08:00
|
|
|
|
|
|
|
|
|
//【jeecgboot-vue3/issues/I5KULW】Websocket 连接后自动给关闭
|
|
|
|
|
//result.value.open();
|
2022-06-10 10:44:44 +08:00
|
|
|
|
const ws = unref(result.value.ws);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
if (ws) {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
ws.onopen = onOpen;
|
|
|
|
|
ws.onclose = onClose;
|
|
|
|
|
ws.onerror = onError;
|
|
|
|
|
ws.onmessage = onMessage;
|
2022-03-10 09:47:29 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onOpen() {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
console.log('[WebSocket] 连接成功');
|
2022-03-10 09:47:29 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onClose(e) {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
console.log('[WebSocket] 连接断开:', e);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onError(e) {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
console.log('[WebSocket] 连接发生错误: ', e);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onMessage(e) {
|
|
|
|
|
if (e.data === 'ping') {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
return;
|
2022-03-10 09:47:29 +08:00
|
|
|
|
}
|
2022-06-10 10:44:44 +08:00
|
|
|
|
console.debug('[WebSocket] -----接收消息-------', e.data);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
try {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
const data = JSON.parse(e.data);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
for (const callback of listeners.keys()) {
|
|
|
|
|
try {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
callback(data);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
} catch (err) {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
console.error(err);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
console.error('[WebSocket] data解析失败:', err);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 判断 WebSocket 是否是开启状态
|
|
|
|
|
*/
|
2022-06-10 10:44:44 +08:00
|
|
|
|
export const getIsOpen = computed(() => result.value?.status.value === 'OPEN');
|
2022-03-10 09:47:29 +08:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 添加 WebSocket 消息监听
|
|
|
|
|
* @param callback
|
|
|
|
|
*/
|
|
|
|
|
export function onWebSocket(callback: (data: object) => any) {
|
|
|
|
|
if (!listeners.has(callback)) {
|
|
|
|
|
if (typeof callback === 'function') {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
listeners.set(callback, null);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
} else {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
console.debug('[WebSocket] 添加 WebSocket 消息监听失败:传入的参数不是一个方法');
|
2022-03-10 09:47:29 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 解除 WebSocket 消息监听
|
|
|
|
|
*
|
|
|
|
|
* @param callback
|
|
|
|
|
*/
|
|
|
|
|
export function offWebSocket(callback: (data: object) => any) {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
listeners.delete(callback);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function useWebSocket() {
|
2022-06-10 10:44:44 +08:00
|
|
|
|
return unref(result);
|
2022-03-10 09:47:29 +08:00
|
|
|
|
}
|