From 6584cbef8a5829950c20b507e17445b97650e73f Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期三, 27 十一月 2024 12:15:04 +0800
Subject: [PATCH] 1. 新增消息管理类 2. socket消息类型js改为枚举类 3. 重连函数在使用时以参数传递进来
---
src/socket/FYWebSocket.js | 48 +++++++--------
src/socket/index.js | 27 ++------
src/components/bg-task/FYBgTaskCard.vue | 5 +
src/socket/MessageManager.js | 27 +++++++++
src/enum/socketMessage.js | 32 +++++++---
src/socket/socketMessage.js | 3
6 files changed, 84 insertions(+), 58 deletions(-)
diff --git a/src/components/bg-task/FYBgTaskCard.vue b/src/components/bg-task/FYBgTaskCard.vue
index baad435..91c449f 100644
--- a/src/components/bg-task/FYBgTaskCard.vue
+++ b/src/components/bg-task/FYBgTaskCard.vue
@@ -46,7 +46,8 @@
import { useFetchData } from '@/composables/fetchData';
import bgtaskApi from '@/api/fysp/bgtaskApi';
import { enumBgTask, BG_TASK_TYPE, BG_TASK_STATUS } from '@/enum/bgTask';
-import eventBus from '@/socket/eventBus.js';
+import { SOCKET_MESSAGE_TYPE } from '@/enum/socketMessage';
+import MessageManager from '@/socket/MessageManager.js';
export default {
setup() {
@@ -79,7 +80,7 @@
},
methods: {
registerBgTaskMessage() {
- eventBus.register('background_task', (data) => {
+ MessageManager.register(SOCKET_MESSAGE_TYPE.BACKGROUND_TASK.name, (data) => {
this.refreshTaskById(data)
})
},
diff --git a/src/enum/socketMessage.js b/src/enum/socketMessage.js
index 9a7783b..14ea741 100644
--- a/src/enum/socketMessage.js
+++ b/src/enum/socketMessage.js
@@ -1,17 +1,29 @@
-const messageTypes = [
- { id: 0, value: '0', label: '蹇冭烦鏈哄埗', name: 'heartbeat' },
- { id: 1, value: '1', label: '鍚庡彴浠诲姟', name: 'background_task' },
- { id: 2, value: '2', label: '涓氬姟鏃ュ織', name: 'business_log' }
-];
+import { Enum } from './enum';
+const SOCKET_MESSAGE_TYPE = Enum({
+ BACKGROUND_TASK: {
+ id: 1,
+ value: '1',
+ label: '鍚庡彴浠诲姟',
+ name: 'background_task'
+ },
+ BUSINESS_LOG: { id: 2, value: '2', label: '涓氬姟鏃ュ織', name: 'business_log' }
+});
/**
* 鏍规嵁socket娑堟伅绫诲瀷瀛楁寰楀埌杩欎釜绫诲瀷瀵硅薄
* @param {*} value socket娑堟伅绫诲瀷
* @returns 瀵瑰簲鐨勬秷鎭被鍨嬪璞�
*/
+/**
+ * 閫氳繃鍚嶇О鏌ユ壘鏋氫妇绫�
+ * @param {String} value
+ * @returns
+ */
function getByValue(value) {
- return messageTypes.find((v) => v.value == value);
+ for (const type in SOCKET_MESSAGE_TYPE) {
+ const typeObj = SOCKET_MESSAGE_TYPE[type]
+ if (typeObj.value == value) {
+ return typeObj
+ }
+ }
}
-function isHeartbeatMessageByType(type) {
- return type == '0';
-}
-export { messageTypes, getByValue, isHeartbeatMessageByType };
+export { SOCKET_MESSAGE_TYPE, getByValue };
diff --git a/src/socket/FYWebSocket.js b/src/socket/FYWebSocket.js
index 80f00c3..0243462 100644
--- a/src/socket/FYWebSocket.js
+++ b/src/socket/FYWebSocket.js
@@ -1,9 +1,4 @@
-import eventBus from './eventBus.js';
-import {
- messageTypes,
- getByValue,
- isHeartbeatMessageByType
-} from '@/enum/socketMessage.js';
+import { SOCKET_MESSAGE_TYPE, getByValue } from '@/enum/socketMessage.js';
import { encodeMessage, decodeMessage } from './socketMessage.js';
import { $socket_base_url } from '@/api/index.js';
class FYWebSocket extends WebSocket {
@@ -16,15 +11,22 @@
* time: 蹇冭烦鏃堕棿闂撮殧
* timeout: 蹇冭烦瓒呮椂闂撮殧
* reconnect: 鏂嚎閲嶈繛鏃堕棿闂撮殧
- * isReconnect 鏄惁鏂嚎閲嶈繛
+ * reconnectFunc 鏂嚎閲嶈繛鍑芥暟
+ * messageManager 娑堟伅绠＄悊鍣�
*/
- init(heartBeatConfig, isReconnect) {
+ init(reconnectFunc, messageManager) {
this.onopen = this.openHandler; // 杩炴帴鎴愬姛鍚庣殑鍥炶皟鍑芥暟
this.onclose = this.closeHandler; // 杩炴帴鍏抽棴鍚庣殑鍥炶皟 鍑芥暟
this.onmessage = this.messageHandler; // 鏀跺埌鏈嶅姟鍣ㄦ暟鎹悗鐨勫洖璋冨嚱鏁�
this.onerror = this.errorHandler; // 杩炴帴鍙戠敓閿欒鐨勫洖璋冩柟娉�
- this.heartBeatConfig = heartBeatConfig; // 蹇冭烦杩炴帴閰嶇疆鍙傛暟
- this.isReconnect = isReconnect; // 璁板綍鏄惁鏂嚎閲嶈繛
+ this.heartBeatConfig = {
+ time: 30 * 1000,
+ timeout: 2 * 1000,
+ reconnect: 30 * 1000
+ }; // 蹇冭烦杩炴帴閰嶇疆鍙傛暟
+ this.isReconnect = typeof reconnectFunc === 'function'; // 璁板綍鏄惁鏂嚎閲嶈繛
+ this.reconnectFunc = reconnectFunc; // 鏂嚎閲嶈繛鍑芥暟
+ this.messageManager = messageManager; // 娑堟伅澶勭悊绠＄悊鍣�
this.reconnectTimer = null; // 璁板綍鏂嚎閲嶈繛鐨勬椂闂村櫒
this.startHeartBeatTimer = null; // 璁板綍蹇冭烦鏃堕棿鍣�
this.webSocketState = false; // 璁板綍socket杩炴帴鐘舵�� true涓哄凡杩炴帴
@@ -39,7 +41,7 @@
}
// 杩炴帴鎴愬姛鍚庣殑鍥炶皟鍑芥暟
openHandler() {
- console.log('====onopen 杩炴帴鎴愬姛====');
+ console.log('====onopen websocket杩炴帴鎴愬姛====');
// socket鐘舵�佽缃负杩炴帴锛屽仛涓哄悗闈㈢殑鏂嚎閲嶈繛鐨勬嫤鎴櫒
this.webSocketState = true;
// 鍒ゆ柇鏄惁鍚姩蹇冭烦鏈哄埗
@@ -53,22 +55,17 @@
if (!(webSocketMsg && webSocketMsg != null && webSocketMsg != {})) {
return;
}
- console.log("webSocketMsg", webSocketMsg);
-
const type = webSocketMsg.type;
const data = webSocketMsg.data;
let typeObj = getByValue(type);
- console.log("typeObj", typeObj);
-
- if (isHeartbeatMessageByType(type)) {
+ if (type == 0) {
// 灏嗚繛鎺ョ姸鎬佹洿鏂颁负鍦ㄧ嚎
this.webSocketState = true;
- eventBus.emit(typeObj.name, data);
- console.log('====onmessage 蹇冭烦妫�娴�====', data);
+ console.log('====onmessage websocket蹇冭烦妫�娴�====', data);
} else {
// 鍙戦�佷簨浠�
- eventBus.emit(typeObj.name, data);
- console.log(`====onmessage ${typeObj.label}====`, data);
+ this.messageManager.emit(typeObj.name, data);
+ console.log(`====onmessage websocket${typeObj.label}====`, data);
}
}
// 杩炴帴鍏抽棴鍚庣殑鍥炶皟 鍑芥暟
@@ -93,7 +90,7 @@
startHeartBeat(time) {
this.startHeartBeatTimer = setTimeout(() => {
// 瀹㈡埛绔瘡闅斾竴娈垫椂闂村悜鏈嶅姟绔彂閫佷竴涓績璺虫秷鎭�
- this.sendMessage(messageTypes[0].value, Date.now());
+ this.sendMessage('0', Date.now());
this.waitingServer();
}, time);
}
@@ -106,12 +103,12 @@
this.startHeartBeat(this.heartBeatConfig.time);
return;
}
- console.log('蹇冭烦鏃犲搷搴�, 宸茬粡鍜屾湇鍔＄鏂嚎');
+ console.log('websocket 蹇冭烦鏃犲搷搴�, 宸茬粡鍜屾湇鍔＄鏂嚎');
// 閲嶆柊杩炴帴鏃讹紝璁板緱瑕佸厛鍏抽棴褰撳墠杩炴帴
try {
this.close();
} catch (error) {
- console.log('褰撳墠杩炴帴宸茬粡鍏抽棴');
+ console.log('websocket 褰撳墠杩炴帴宸茬粡鍏抽棴');
}
// // 閲嶆柊杩炴帴
// this.reconnectWebSocket()
@@ -126,8 +123,9 @@
}
// 鏍规嵁浼犲叆鐨勬柇绾块噸杩炴椂闂撮棿闅� 寤舵椂杩炴帴
this.reconnectTimer = setTimeout(() => {
- // 瑙﹀彂閲嶆柊杩炴帴浜嬩欢
- eventBus.emit('reconnect');
+ // 瑙﹀彂閲嶆柊杩炴帴鍑芥暟
+ console.log('====onerror websocket灏濊瘯閲嶈繛====');
+ this.reconnectFunc();
}, this.heartBeatConfig.reconnect);
}
}
diff --git a/src/socket/MessageManager.js b/src/socket/MessageManager.js
new file mode 100644
index 0000000..7ae5bff
--- /dev/null
+++ b/src/socket/MessageManager.js
@@ -0,0 +1,27 @@
+import eventBus from './eventBus.js';
+
+class MessageManager {
+ constructor() {
+ this.messageHandler = eventBus;
+ }
+ /**
+ * 娉ㄥ唽浜嬩欢
+ * @param {*} eventType 浜嬩欢绫诲瀷
+ * @param {*} handler 浜嬩欢澶勭悊鍑芥暟
+ */
+ register(eventType, handler) {
+ this.messageHandler.register(eventType, handler);
+ }
+
+ /**
+ * 鍙戦�佷簨浠�
+ * @param {*} eventType 浜嬩欢绫诲瀷
+ * @param {...any} ars 浜嬩欢鍐呭
+ */
+ emit(eventType, ...ars) {
+ this.messageHandler.emit(eventType, ...ars);
+ }
+}
+const instance = new MessageManager();
+Object.freeze(instance); // 闃叉淇敼瀹炰緥
+export default instance;
diff --git a/src/socket/index.js b/src/socket/index.js
index cf2583f..ce75986 100644
--- a/src/socket/index.js
+++ b/src/socket/index.js
@@ -1,31 +1,20 @@
-
-import { FYWebSocket } from '@/socket/FYWebSocket.js'
-import eventBus from '@/socket/eventBus.js';
+import { FYWebSocket } from '@/socket/FYWebSocket.js';
+import MessageManager from '@/socket/MessageManager.js';
let socket = null;
+
// 杩炴帴websocket
function connectWebSocket() {
- if (socket == null) {
- socket = new FYWebSocket()
- }
- socket.init({
- time: 4 * 1000,
- timeout: 2 * 1000,
- reconnect: 3 * 1000
- }, true)
+ socket = new FYWebSocket();
+ socket.init(() => {
+ connectWebSocket();
+ }, MessageManager);
return socket;
-}
-// 鏂嚎閲嶈繛websocket
-function startReconnectWebSocket() {
- eventBus.register('reconnect', () => {
- connectWebSocket()
- })
}
/**
* 鍒濆鍖杝ocket瀹㈡埛绔�
*/
function initSocketClient() {
connectWebSocket();
- startReconnectWebSocket();
}
-export { initSocketClient }
\ No newline at end of file
+export { initSocketClient };
diff --git a/src/socket/socketMessage.js b/src/socket/socketMessage.js
index d6651c0..e3fe02c 100644
--- a/src/socket/socketMessage.js
+++ b/src/socket/socketMessage.js
@@ -1,4 +1,3 @@
-import { messageTypes } from '@/enum/socketMessage.js'
// 寮�濮嬬鍙峰拰缁撴潫绗﹀彿鍒嗗埆涓� '##' 鍜� '%%', 鍒嗛殧绗︿负 &&
// 寮�濮嬬鍙�
const startStr = '##';
@@ -35,7 +34,7 @@
const type = parts[0];
let data = JSON.parse(parts[1]);
return {
- type: messageTypes.find((item) => item.value == type).value,
+ type: type,
data: data
};
}
--
Gitblit v1.9.3