diff --git a/src/utils/socket.ts b/src/utils/socket.ts index 89a095d..dfce1bc 100644 --- a/src/utils/socket.ts +++ b/src/utils/socket.ts @@ -2,10 +2,11 @@ * Author: Fu Guobin * Date: 2022/08/02 * Last Modified by: Fu Guobin - * Last Modified time: 2023/09/15 + * Last Modified time: 2023/09/21 * Copyright:Daniel(Fu Guobin) * Description:websocket方法封装 */ +import type { Action } from 'element-plus'; import mitt from '@/plugins/bus'; class WebSocketService { @@ -13,6 +14,7 @@ class WebSocketService { websocket: WebSocket | null; isInitialized: boolean; isConnected: boolean; + heartTimer: number | null; heartbeatInterval: number; reconnectInterval: number; maxReconnectAttempts: number; @@ -23,18 +25,25 @@ class WebSocketService { this.url = ''; this.websocket = null; this.isInitialized = false; - this.isConnected = false; //握手 + this.isConnected = false; //连接状态 + this.heartTimer = null; //心跳计时 this.heartbeatInterval = 30000; // 默认心跳30秒 - this.reconnectInterval = 5000; // 默认重连5秒 + this.reconnectInterval = 10000; // 默认重连10秒 this.maxReconnectAttempts = 5; // 默认尝试重连5次 - this.reconnectAttempts = 0; + this.reconnectAttempts = 0; //重连次数 this.data = null; } initialize(url: string): void { //初始化 + console.log('websocket初始化'); this.url = url; this.websocket = new WebSocket(url); + console.log('readyState1--', this.websocket?.readyState); + this.websocket.onopen = e => { + console.log('readyState--', this.websocket?.readyState); + console.log('websocket onopen--', e); + }; this.websocket.onopen = this.onOpen.bind(this); this.websocket.onclose = this.onClose.bind(this); this.websocket.onerror = this.onError.bind(this); @@ -43,7 +52,9 @@ class WebSocketService { } onOpen(): void { - this.isConnected = true; // 进行握手操作，如果需要的话 + console.log('readyState2--', this.websocket?.readyState); + console.log('websocket onOpen'); + this.isConnected = true; // 连接状态 this.reconnectAttempts = 0; // 重置重连次数 this.startHeartbeat(); } @@ -70,6 +81,18 @@ class WebSocketService { console.log('waring'); mitt.emit('waringMessage', response); } else if (response.code === 'respMsg') { + if (response.data[0].code === -1 || response.data[0].code === 1) { + this.close(false); + ElMessageBox.alert(response.msg, '提示', { + // if you want to disable its autofocus + // autofocus: false, + confirmButtonText: 'OK', + callback: (action: Action) => { + localStorage.clear(); + window.location.href = '/'; + } + }); + } console.log(response.msg); } } @@ -77,38 +100,49 @@ class WebSocketService { onClose(): void { // 关闭WebSocket连接的处理逻辑 - this.isConnected = false; - this.stopHeartbeat(); + console.log('websocket关闭'); + // this.isInitialized = status === false ? false : true; + this.isConnected = false; //关闭连接 + this.stopHeartbeat(); //关闭心跳 + if (this.isInitialized) { + console.log('WebSocke尝试重连1'); + this.tryReconnect(); + } + } + + onError(error: Event): void { + // 错误处理的逻辑 + console.error('WebSocket连接错误:', error); + ElNotification({ + message: 'webSocket连接发生错误,正在尝试重连…', + type: 'error' + }); + this.isConnected = false; //关闭连接 + this.stopHeartbeat(); //关闭心跳 + if (this.isInitialized) { + console.log('WebSocke尝试重连2'); + this.tryReconnect(); + } + } + + tryReconnect() { + //尝试重连 + console.log('WebSocket尝试重连:', this.reconnectAttempts); if (this.reconnectAttempts < this.maxReconnectAttempts) { setTimeout(() => { this.reconnectAttempts++; this.initialize(this.url); }, this.reconnectInterval); + } else { + this.close(false); } } - onError(error: Event): void { - console.error('WebSocket error:', error); - ElMessageBox.confirm('WebSocket连接错误，是否重连？', '提示', { - confirmButtonText: '确认', - cancelButtonText: '取消', - type: 'warning' - }) - .then(() => { - this.initialize(this.url); - }) - .catch(() => { - ElMessage({ - type: 'info', - message: '您已取消！' - }); - }); - // 错误处理的逻辑 - } - startHeartbeat() { // 发送心跳 - this.heartbeatInterval = setInterval(() => { + console.log('websocket发送心跳'); + this.heartTimer = setInterval(() => { + console.log('websocket心跳计时--', this.heartTimer); if (this.websocket?.readyState === WebSocket.OPEN) { const userStorageInfo = sessionStorage.getItem('userInfo'); const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo); @@ -118,7 +152,7 @@ class WebSocketService { username: userInfo.userName } }; - console.log(hearData) + console.log(hearData); this.websocket.send(JSON.stringify(hearData)); //心跳消息 } }, this.heartbeatInterval); @@ -126,14 +160,19 @@ class WebSocketService { stopHeartbeat() { // 停止心跳 - if (this.heartbeatInterval) { - clearInterval(this.heartbeatInterval); - this.heartbeatInterval = 0; + console.log('websocket停止心跳'); + if (this.heartTimer != null) { + clearInterval(this.heartTimer); + this.heartTimer = null; } + console.log('websocket停止心跳--', this.heartTimer); } - close(): void { + close(status: any): void { + console.log('close--', status); + this.isInitialized = status; this.websocket?.close(); + console.log('websocket连接已关闭'); } } diff --git a/src/views/monitoring/components/header.vue b/src/views/monitoring/components/header.vue index c640890..0f1f15b 100644 --- a/src/views/monitoring/components/header.vue +++ b/src/views/monitoring/components/header.vue @@ -281,7 +281,8 @@ function warClose() { margin: 0 auto; h3 { - font-size: 38px; + height: 57px; + font-size: 3.8rem; font-family: 'YouSheBiaoTiHei'; font-weight: 400; letter-spacing: 4px; diff --git a/src/views/monitoring/components/menu.vue b/src/views/monitoring/components/menu.vue index 0151b7e..f5788ec 100644 --- a/src/views/monitoring/components/menu.vue +++ b/src/views/monitoring/components/menu.vue @@ -88,10 +88,11 @@ function removeChildren(menu: any) { } }); } - -function renderMenuLabel(option: MenuOption) { +// function renderMenuLabel(option: MenuOption) { +const renderMenuLabel = (option: MenuOption) => { //菜单标题增加提示 - return h(NEllipsis, null, option.deptName as string); + // return h(NEllipsis, null, option.deptName as string); + return h(NEllipsis, null, { default: () => option.deptName }); } function menuUpdateValue(key: string, item: MenuOption) { @@ -258,4 +259,5 @@ function menuUpdateValue(key: string, item: MenuOption) { .menuCantent::-webkit-scrollbar-corner, .tableGrid ::-webkit-scrollbar-corner { background-color: transparent; -} +} + diff --git a/src/views/monitoring/screen/index.vue b/src/views/monitoring/screen/index.vue index a3a80bf..979c1c3 100644 --- a/src/views/monitoring/screen/index.vue +++ b/src/views/monitoring/screen/index.vue @@ -1,7 +1,8 @@