From d667fce729c223e885930bb8edb528ab501b8d6a Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期二, 26 十一月 2024 16:57:53 +0800
Subject: [PATCH] 1. 移动socket客户端类、新增socket/index.js文件（初始化） 2. socketMessage枚举类的完善（增加对每个类型的英文描述字段以及对类型筛选和判断是否为心跳消息的工具方法） 3. 在FYBgTaskCard.vue监听并处理如何刷后台任务状态逻辑
---
src/socket/FYWebSocket.js | 134 +++++++++++++++++++
src/socket/index.js | 157 +++------------------
src/components/bg-task/FYBgTaskCard.vue | 31 ++++
src/enum/socketMessage.js | 19 ++
src/main.js | 4
src/socket/socketMessage.js | 6
src/App.vue | 21 ---
7 files changed, 214 insertions(+), 158 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index e992d9f..3f44321 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,8 +40,6 @@
<script>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
-import { FYWebSocket } from '@/socket/index.js'
-import eventBus from '@/socket/eventBus.js';
export default {
data() {
return {
@@ -58,25 +56,6 @@
navPage(titles) {
this.navTitles = titles;
},
- // 杩炴帴websocket
- connectWebSocket() {
- this.socket = new FYWebSocket()
- this.socket.init({
- time: 4 * 1000,
- timeout: 2 * 1000,
- reconnect: 3 * 1000
- }, true)
- },
- // 鏂嚎閲嶈繛websocket
- startReconnectWebSocket() {
- eventBus.register('reconnect', () => {
- this.connectWebSocket()
- })
- }
- },
- created() {
- this.connectWebSocket()
- this.startReconnectWebSocket()
}
};
</script>
diff --git a/src/components/bg-task/FYBgTaskCard.vue b/src/components/bg-task/FYBgTaskCard.vue
index 5853db3..ae58f2b 100644
--- a/src/components/bg-task/FYBgTaskCard.vue
+++ b/src/components/bg-task/FYBgTaskCard.vue
@@ -46,6 +46,7 @@
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';
export default {
setup() {
@@ -77,6 +78,32 @@
}
},
methods: {
+ registerBgTaskMessage() {
+ eventBus.register('background_task', (data) => {
+ this.refreshTaskById(data)
+ })
+ },
+ /**
+ * 鍒锋柊涓�涓换鍔￠�氳繃id锛屽鏋滄槸鏂扮殑浠诲姟鍒欐坊鍔犲埌浠诲姟鍒楄〃taskList涓�
+ * @param data
+ */
+ refreshTaskById(data) {
+ if (!data || data == {}) {
+ return;
+ }
+ let isNewTask = true
+ for (let index = 0; index < this.taskList.length; index++) {
+ const task = this.taskList[index];
+ if (task.id == data.id) {
+ this.taskList[index] = data
+ isNewTask = false
+ break
+ }
+ }
+ if (isNewTask) {
+ this.taskList.push(data)
+ }
+ },
addTask() {},
newTestTask() {
this.fetchData((page, pageSize) => {
@@ -151,7 +178,11 @@
},
gotoResult(index) {}
},
+ created() {
+ this.registerBgTaskMessage()
+ },
mounted() {
+ bgtaskApi.newTestTask(1)
this.fetchTask();
// setInterval(() => {
// this.fetchTask();
diff --git a/src/enum/socketMessage.js b/src/enum/socketMessage.js
index 9c3579e..9a7783b 100644
--- a/src/enum/socketMessage.js
+++ b/src/enum/socketMessage.js
@@ -1,6 +1,17 @@
const messageTypes = [
- { id: 0, label: '蹇冭烦妫�娴�', value: '0' },
- { id: 1, label: '鍚庡彴浠诲姟', value: '1' },
- { id: 2, label: '涓氬姟鏃ュ織', value: '2' }
+ { id: 0, value: '0', label: '蹇冭烦鏈哄埗', name: 'heartbeat' },
+ { id: 1, value: '1', label: '鍚庡彴浠诲姟', name: 'background_task' },
+ { id: 2, value: '2', label: '涓氬姟鏃ュ織', name: 'business_log' }
];
-export { messageTypes };
+/**
+ * 鏍规嵁socket娑堟伅绫诲瀷瀛楁寰楀埌杩欎釜绫诲瀷瀵硅薄
+ * @param {*} value socket娑堟伅绫诲瀷
+ * @returns 瀵瑰簲鐨勬秷鎭被鍨嬪璞�
+ */
+function getByValue(value) {
+ return messageTypes.find((v) => v.value == value);
+}
+function isHeartbeatMessageByType(type) {
+ return type == '0';
+}
+export { messageTypes, getByValue, isHeartbeatMessageByType };
diff --git a/src/main.js b/src/main.js
index 511d8bd..65bb245 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@
import { router } from './router';
import App from './App.vue';
import timeUtil from './utils/time-util';
+import { initSocketClient } from '@/socket/index.js'
// import 'element-plus/dist/index.css';
import './assets/main.css';
@@ -19,6 +20,9 @@
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+// socket瀹㈡埛绔�
+initSocketClient()
+
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
diff --git a/src/socket/FYWebSocket.js b/src/socket/FYWebSocket.js
new file mode 100644
index 0000000..80f00c3
--- /dev/null
+++ b/src/socket/FYWebSocket.js
@@ -0,0 +1,134 @@
+import eventBus from './eventBus.js';
+import {
+ messageTypes,
+ getByValue,
+ isHeartbeatMessageByType
+} from '@/enum/socketMessage.js';
+import { encodeMessage, decodeMessage } from './socketMessage.js';
+import { $socket_base_url } from '@/api/index.js';
+class FYWebSocket extends WebSocket {
+ constructor() {
+ super($socket_base_url);
+ return this;
+ }
+ /**
+ * heartBeatConfig 蹇冭烦杩炴帴鍙傛暟
+ * time: 蹇冭烦鏃堕棿闂撮殧
+ * timeout: 蹇冭烦瓒呮椂闂撮殧
+ * reconnect: 鏂嚎閲嶈繛鏃堕棿闂撮殧
+ * isReconnect 鏄惁鏂嚎閲嶈繛
+ */
+ init(heartBeatConfig, isReconnect) {
+ this.onopen = this.openHandler; // 杩炴帴鎴愬姛鍚庣殑鍥炶皟鍑芥暟
+ this.onclose = this.closeHandler; // 杩炴帴鍏抽棴鍚庣殑鍥炶皟 鍑芥暟
+ this.onmessage = this.messageHandler; // 鏀跺埌鏈嶅姟鍣ㄦ暟鎹悗鐨勫洖璋冨嚱鏁�
+ this.onerror = this.errorHandler; // 杩炴帴鍙戠敓閿欒鐨勫洖璋冩柟娉�
+ this.heartBeatConfig = heartBeatConfig; // 蹇冭烦杩炴帴閰嶇疆鍙傛暟
+ this.isReconnect = isReconnect; // 璁板綍鏄惁鏂嚎閲嶈繛
+ this.reconnectTimer = null; // 璁板綍鏂嚎閲嶈繛鐨勬椂闂村櫒
+ this.startHeartBeatTimer = null; // 璁板綍蹇冭烦鏃堕棿鍣�
+ this.webSocketState = false; // 璁板綍socket杩炴帴鐘舵�� true涓哄凡杩炴帴
+ }
+ // 鑾峰彇娑堟伅
+ getMessage({ data }) {
+ return decodeMessage(data);
+ }
+ // 鍙戦�佹秷鎭�
+ sendMessage(type, data) {
+ return this.send(encodeMessage(type, data));
+ }
+ // 杩炴帴鎴愬姛鍚庣殑鍥炶皟鍑芥暟
+ openHandler() {
+ console.log('====onopen 杩炴帴鎴愬姛====');
+ // socket鐘舵�佽缃负杩炴帴锛屽仛涓哄悗闈㈢殑鏂嚎閲嶈繛鐨勬嫤鎴櫒
+ this.webSocketState = true;
+ // 鍒ゆ柇鏄惁鍚姩蹇冭烦鏈哄埗
+ if (this.heartBeatConfig && this.heartBeatConfig.time) {
+ this.startHeartBeat(this.heartBeatConfig.time);
+ }
+ }
+ // 鏀跺埌鏈嶅姟鍣ㄦ暟鎹悗鐨勫洖璋冨嚱鏁�
+ messageHandler(res) {
+ const webSocketMsg = this.getMessage(res);
+ 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)) {
+ // 灏嗚繛鎺ョ姸鎬佹洿鏂颁负鍦ㄧ嚎
+ this.webSocketState = true;
+ eventBus.emit(typeObj.name, data);
+ console.log('====onmessage 蹇冭烦妫�娴�====', data);
+ } else {
+ // 鍙戦�佷簨浠�
+ eventBus.emit(typeObj.name, data);
+ console.log(`====onmessage ${typeObj.label}====`, data);
+ }
+ }
+ // 杩炴帴鍏抽棴鍚庣殑鍥炶皟 鍑芥暟
+ closeHandler() {
+ console.log('====onclose websocket鍏抽棴杩炴帴====');
+ // 璁剧疆socket鐘舵�佷负鏂嚎
+ this.webSocketState = false;
+ // 鍦ㄦ柇寮�杩炴帴鏃� 娓呴櫎蹇冭烦鏃堕棿鍣ㄥ拰 鏂紑閲嶈繛鏃堕棿鍣�
+ this.startHeartBeatTimer && clearTimeout(this.startHeartBeatTimer);
+ this.reconnectTimer && clearTimeout(this.reconnectTimer);
+ this.reconnectWebSocket();
+ }
+ errorHandler() {
+ console.log('====onerror websocket杩炴帴鍑洪敊====');
+ // 璁剧疆socket鐘舵�佷负鏂嚎
+ this.webSocketState = false;
+ // 閲嶆柊杩炴帴
+ this.reconnectWebSocket();
+ }
+
+ // 蹇冭烦鍒濆鍖栨柟娉� time锛氬績璺抽棿闅�
+ startHeartBeat(time) {
+ this.startHeartBeatTimer = setTimeout(() => {
+ // 瀹㈡埛绔瘡闅斾竴娈垫椂闂村悜鏈嶅姟绔彂閫佷竴涓績璺虫秷鎭�
+ this.sendMessage(messageTypes[0].value, Date.now());
+ this.waitingServer();
+ }, time);
+ }
+ //鍦ㄥ鎴风鍙戦�佹秷鎭箣鍚庯紝寤舵椂绛夊緟鏈嶅姟鍣ㄥ搷搴�,閫氳繃webSocketState鍒ゆ柇鏄惁杩炵嚎鎴愬姛
+ waitingServer() {
+ this.webSocketState = false;
+ setTimeout(() => {
+ // 杩炵嚎鎴愬姛鐘舵�佷笅 缁х画蹇冭烦妫�娴�
+ if (this.webSocketState) {
+ this.startHeartBeat(this.heartBeatConfig.time);
+ return;
+ }
+ console.log('蹇冭烦鏃犲搷搴�, 宸茬粡鍜屾湇鍔＄鏂嚎');
+ // 閲嶆柊杩炴帴鏃讹紝璁板緱瑕佸厛鍏抽棴褰撳墠杩炴帴
+ try {
+ this.close();
+ } catch (error) {
+ console.log('褰撳墠杩炴帴宸茬粡鍏抽棴');
+ }
+ // // 閲嶆柊杩炴帴
+ // this.reconnectWebSocket()
+ }, this.heartBeatConfig.timeout);
+ }
+
+ // 閲嶆柊杩炴帴
+ reconnectWebSocket() {
+ // 鍒ゆ柇鏄惁鏄噸鏂拌繛鎺ョ姸鎬�(鍗宠鍔ㄧ姸鎬佹柇绾�)锛屽鏋滄槸涓诲姩鏂嚎鐨勪笉闇�瑕侀噸鏂拌繛鎺�
+ if (!this.isReconnect) {
+ return;
+ }
+ // 鏍规嵁浼犲叆鐨勬柇绾块噸杩炴椂闂撮棿闅� 寤舵椂杩炴帴
+ this.reconnectTimer = setTimeout(() => {
+ // 瑙﹀彂閲嶆柊杩炴帴浜嬩欢
+ eventBus.emit('reconnect');
+ }, this.heartBeatConfig.reconnect);
+ }
+}
+export { FYWebSocket };
diff --git a/src/socket/index.js b/src/socket/index.js
index 35d8feb..cf2583f 100644
--- a/src/socket/index.js
+++ b/src/socket/index.js
@@ -1,134 +1,31 @@
-import eventBus from './eventBus.js';
-import { messageTypes } from '@/enum/socketMessage.js';
-import { encodeMessage, decodeMessage } from './socketMessage.js';
-import { $socket_base_url } from '@/api/index.js';
-class FYWebSocket extends WebSocket {
- constructor() {
- super($socket_base_url);
- return this;
- }
- /**
- * heartBeatConfig 蹇冭烦杩炴帴鍙傛暟
- * time: 蹇冭烦鏃堕棿闂撮殧
- * timeout: 蹇冭烦瓒呮椂闂撮殧
- * reconnect: 鏂嚎閲嶈繛鏃堕棿闂撮殧
- * isReconnect 鏄惁鏂嚎閲嶈繛
- */
- init(heartBeatConfig, isReconnect) {
- this.onopen = this.openHandler; // 杩炴帴鎴愬姛鍚庣殑鍥炶皟鍑芥暟
- this.onclose = this.closeHandler; // 杩炴帴鍏抽棴鍚庣殑鍥炶皟 鍑芥暟
- this.onmessage = this.messageHandler; // 鏀跺埌鏈嶅姟鍣ㄦ暟鎹悗鐨勫洖璋冨嚱鏁�
- this.onerror = this.errorHandler; // 杩炴帴鍙戠敓閿欒鐨勫洖璋冩柟娉�
- this.heartBeatConfig = heartBeatConfig; // 蹇冭烦杩炴帴閰嶇疆鍙傛暟
- this.isReconnect = isReconnect; // 璁板綍鏄惁鏂嚎閲嶈繛
- this.reconnectTimer = null; // 璁板綍鏂嚎閲嶈繛鐨勬椂闂村櫒
- this.startHeartBeatTimer = null; // 璁板綍蹇冭烦鏃堕棿鍣�
- this.webSocketState = false; // 璁板綍socket杩炴帴鐘舵�� true涓哄凡杩炴帴
- }
- // 鑾峰彇娑堟伅
- getMessage({ data }) {
- return decodeMessage(data);
- }
- // 鍙戦�佹秷鎭�
- sendMessage(type, data) {
- return this.send(encodeMessage(type, data));
- }
- // 杩炴帴鎴愬姛鍚庣殑鍥炶皟鍑芥暟
- openHandler() {
- console.log('====onopen 杩炴帴鎴愬姛====');
- // socket鐘舵�佽缃负杩炴帴锛屽仛涓哄悗闈㈢殑鏂嚎閲嶈繛鐨勬嫤鎴櫒
- this.webSocketState = true;
- // 鍒ゆ柇鏄惁鍚姩蹇冭烦鏈哄埗
- if (this.heartBeatConfig && this.heartBeatConfig.time) {
- this.startHeartBeat(this.heartBeatConfig.time);
- }
- }
- // 鏀跺埌鏈嶅姟鍣ㄦ暟鎹悗鐨勫洖璋冨嚱鏁�
- messageHandler(res) {
- const webSocketMsg = this.getMessage(res);
- if (!(webSocketMsg && webSocketMsg != null && webSocketMsg != {})) {
- return;
- }
- const type = webSocketMsg.type;
- const data = webSocketMsg.data
-
- switch (type) {
- case '1': // 鍚庡彴浠诲姟
- // 鍙戦�佷簨浠�
- eventBus.emit('1', data);
- console.log('====onmessage 鍚庡彴浠诲姟====', data);
- break;
- case '2': // 涓氬姟鏃ュ織
- // 鍙戦�佷簨浠�
- eventBus.emit('2', data);
- console.log('====onmessage 涓氬姟鏃ュ織====', data);
- break;
- case '0': // 蹇冭烦妫�娴�
- // 灏嗚繛鎺ョ姸鎬佹洿鏂颁负鍦ㄧ嚎
- this.webSocketState = true;
- eventBus.emit('0', data);
- console.log('====onmessage 蹇冭烦妫�娴�====', data);
- break;
- }
- }
- // 杩炴帴鍏抽棴鍚庣殑鍥炶皟 鍑芥暟
- closeHandler() {
- console.log('====onclose websocket鍏抽棴杩炴帴====');
- // 璁剧疆socket鐘舵�佷负鏂嚎
- this.webSocketState = false;
- // 鍦ㄦ柇寮�杩炴帴鏃� 娓呴櫎蹇冭烦鏃堕棿鍣ㄥ拰 鏂紑閲嶈繛鏃堕棿鍣�
- this.startHeartBeatTimer && clearTimeout(this.startHeartBeatTimer);
- this.reconnectTimer && clearTimeout(this.reconnectTimer);
- this.reconnectWebSocket();
- }
- errorHandler() {
- console.log('====onerror websocket杩炴帴鍑洪敊====');
- // 璁剧疆socket鐘舵�佷负鏂嚎
- this.webSocketState = false;
- // 閲嶆柊杩炴帴
- this.reconnectWebSocket();
- }
- // 蹇冭烦鍒濆鍖栨柟娉� time锛氬績璺抽棿闅�
- startHeartBeat(time) {
- this.startHeartBeatTimer = setTimeout(() => {
- // 瀹㈡埛绔瘡闅斾竴娈垫椂闂村悜鏈嶅姟绔彂閫佷竴涓績璺虫秷鎭�
- this.sendMessage(messageTypes[0].value, Date.now());
- this.waitingServer();
- }, time);
- }
- //鍦ㄥ鎴风鍙戦�佹秷鎭箣鍚庯紝寤舵椂绛夊緟鏈嶅姟鍣ㄥ搷搴�,閫氳繃webSocketState鍒ゆ柇鏄惁杩炵嚎鎴愬姛
- waitingServer() {
- this.webSocketState = false;
- setTimeout(() => {
- // 杩炵嚎鎴愬姛鐘舵�佷笅 缁х画蹇冭烦妫�娴�
- if (this.webSocketState) {
- this.startHeartBeat(this.heartBeatConfig.time);
- return;
- }
- console.log('蹇冭烦鏃犲搷搴�, 宸茬粡鍜屾湇鍔＄鏂嚎');
- // 閲嶆柊杩炴帴鏃讹紝璁板緱瑕佸厛鍏抽棴褰撳墠杩炴帴
- try {
- this.close();
- } catch (error) {
- console.log('褰撳墠杩炴帴宸茬粡鍏抽棴');
- }
- // // 閲嶆柊杩炴帴
- // this.reconnectWebSocket()
- }, this.heartBeatConfig.timeout);
- }
+import { FYWebSocket } from '@/socket/FYWebSocket.js'
+import eventBus from '@/socket/eventBus.js';
- // 閲嶆柊杩炴帴
- reconnectWebSocket() {
- // 鍒ゆ柇鏄惁鏄噸鏂拌繛鎺ョ姸鎬�(鍗宠鍔ㄧ姸鎬佹柇绾�)锛屽鏋滄槸涓诲姩鏂嚎鐨勪笉闇�瑕侀噸鏂拌繛鎺�
- if (!this.isReconnect) {
- return;
- }
- // 鏍规嵁浼犲叆鐨勬柇绾块噸杩炴椂闂撮棿闅� 寤舵椂杩炴帴
- this.reconnectTimer = setTimeout(() => {
- // 瑙﹀彂閲嶆柊杩炴帴浜嬩欢
- eventBus.emit('reconnect');
- }, this.heartBeatConfig.reconnect);
+let socket = null;
+// 杩炴帴websocket
+function connectWebSocket() {
+ if (socket == null) {
+ socket = new FYWebSocket()
}
+ socket.init({
+ time: 4 * 1000,
+ timeout: 2 * 1000,
+ reconnect: 3 * 1000
+ }, true)
+ return socket;
}
-export { FYWebSocket };
+// 鏂嚎閲嶈繛websocket
+function startReconnectWebSocket() {
+ eventBus.register('reconnect', () => {
+ connectWebSocket()
+ })
+}
+/**
+ * 鍒濆鍖杝ocket瀹㈡埛绔�
+ */
+function initSocketClient() {
+ connectWebSocket();
+ startReconnectWebSocket();
+}
+export { initSocketClient }
\ No newline at end of file
diff --git a/src/socket/socketMessage.js b/src/socket/socketMessage.js
index c891065..d6651c0 100644
--- a/src/socket/socketMessage.js
+++ b/src/socket/socketMessage.js
@@ -7,7 +7,7 @@
// 缁撴潫绗﹀彿
const endStr = '%%';
// 鏍￠獙鏍煎紡
-function verificationMessahe(message) {
+function verificationMessage(message) {
if (!message || message == '') {
return false;
}
@@ -28,7 +28,7 @@
* @returns
*/
function decodeMessage(message) {
- if (!verificationMessahe(message)) {
+ if (!verificationMessage(message)) {
return;
}
const parts = message.slice(startStr.length, -endStr.length).split(splitStr);
@@ -49,4 +49,4 @@
return `${startStr}${type}${splitStr}${JSON.stringify(data)}${endStr}`;
}
-export { verificationMessahe, decodeMessage, encodeMessage, messageTypes };
+export { verificationMessage, decodeMessage, encodeMessage };
--
Gitblit v1.9.3