优化

1 year ago · d5c9cd72b9
4 changed files with 96 additions and 41 deletions
--- 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连接已关闭');
  }
 }

--- 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;
--- 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;
-}</style>
+}
+</style>
--- a/src/views/monitoring/screen/index.vue
+++ b/src/views/monitoring/screen/index.vue
@ -1,7 +1,8 @@
 <template>
  <div ref="screenRef" class="screen">
    <section ref="titleRef" class="header">
-      <Header :titleData="titleData" :settingShow="true" :warningShow="true" @showModalClick="showModalClick" @returnClick="returnClick" />
+      <Header :titleData="titleData" :settingShow="true" :warningShow="true" @showModalClick="showModalClick"
+        @returnClick="returnClick" />
      <!-- <div class="title">
        <h3>{{ titleData }}</h3>
      </div>
@ -78,7 +79,7 @@
  </div>
 </template>
 <script lang="ts" setup>
-import router from '@/router';
+import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
 // import { useDateFormat, useNow } from '@vueuse/core';
 // import { Filter, Maximize, Settings, Power } from '@vicons/tabler';
 import Header from '../components/header.vue';
@ -87,7 +88,11 @@ import Main from './components/main.vue';
 import InfoPanel from './components/infoPanel.vue';
 import ShowTree from './components/showTree.vue';
 import useStorage from '@/utils/useStorage'
+import socket from '@/utils/socket';
 const sessionStorageIns = useStorage('sessionStorage');
+
+const route = useRoute()
+const router = useRouter()
 // import calendar from '@/utils/lunar';
 // const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
 // const lunarDay: any = calendar.solarToLunar(
@ -111,11 +116,10 @@ const panelHeight = ref(0)

 onMounted(() => {
  // titleRef.value?.clientHeight; //获取头部标题高度
-  console.log(sidebar.value)
  const offsetHeight = sidebar.value?.offsetHeight; //获取侧边栏菜单高度
  sidebarHeight.value = offsetHeight === undefined ? 0 : offsetHeight - panelHeight.value
  // menuShow.value=localStorage.getItem('menuShow')===undefined?true:JSON.parse(localStorage.getItem('menuShow'));
-  console.log("sidebar:", sidebar.value?.offsetHeight)
+  // console.log("sidebar:", sidebar.value?.offsetHeight)
 });

 window.addEventListener('resize', () => {
@ -125,6 +129,15 @@ window.addEventListener('resize', () => {
  console.log("监听sidebar:", sidebar.value?.offsetHeight)
 });

+onBeforeRouteLeave((to, from) => {
+  //监听离开页面
+  console.log("onBeforeRouteLeave--", to.path, from.path)
+  if (to.path != from.path) {
+    console.log('离开页面');
+    socket.close(false)
+  }
+})
+
 function tableMenuData(data: any) {
  //获取菜单数据
  titleData.value = data[0].deptName