优化WebSocket组件

src/components/Websocket/index.vue

@@ -2,18 +2,24 @@
   <div></div>
 </template>
 <script setup lang="ts" name="global-websocket">
-  import { reactive, ref, computed,onMounted,onUnmounted   } from 'vue';
+  import { reactive, ref, computed, onMounted, onUnmounted } from 'vue';
   import { useUserStore } from '@/store/modules/user';
 
-const emit = defineEmits(['rollback']);
+  const emit = defineEmits(['rollback']);
 
-const props = defineProps({
+  /**
+   * 定义接收的参数
+   */
+  const props = defineProps({
     uri: {
       type: String,
     },
-});
+  });
 
-const state = reactive({
+  /**
+   * 定义Socket状态
+   */
+  const state = reactive({
     webSocket: ref(), // webSocket实例
     lockReconnect: false, // 重连锁，避免多次重连
     maxReconnect: 6, // 最大重连次数， -1 标识无限重连
@@ -25,29 +31,38 @@ const state = reactive({
       pongTimeoutObj: ref(), // 接收心跳响应的定时器
       pingMessage: JSON.stringify({ type: 'ping' }), // 心跳请求信息
     },
-});
+  });
 
-const token = computed(() => {
+  /**
+   * 获取Token令牌
+   */
+  const token = computed(() => {
     return useUserStore().getToken;
-});
+  });
 
-const tenant = computed(() => {
+  const tenant = computed(() => {
     return Session.getTenant();
-});
+  });
 
-onMounted(() => {
+  /**
+   * 钩子函数
+   */
+  onMounted(() => {
     initWebSocket();
-});
+  });
 
-onUnmounted(() => {
+  onUnmounted(() => {
     state.webSocket.close();
     clearTimeoutObj(state.heartbeat);
-});
+  });
 
-const initWebSocket = () => {
+  /**
+   * 初始化WebSocket对象
+   */
+  const initWebSocket = () => {
     // ws地址
     let host = window.location.host;
-  let wsUri =`${location.protocol === 'https:' ? 'wss' : 'ws'}://${host}${props.uri}`;
+    let wsUri = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${host}${props.uri}`;
 
     // 建立连接
     state.webSocket = new WebSocket(wsUri);
@@ -59,13 +74,19 @@ const initWebSocket = () => {
     state.webSocket.onmessage = onMessage;
     // 连接关闭
     state.webSocket.onclose = onClose;
-};
+  };
 
-const reconnect = () => {
+  /**
-	if (!token) {
+   * 重连机制
+   */
+  const reconnect = () => {
+    if (!token.value) {
       return;
     }
-	if (state.lockReconnect || (state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)) {
+    if (
+      state.lockReconnect ||
+      (state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)
+    ) {
       return;
     }
     state.lockReconnect = true;
@@ -75,18 +96,20 @@ const reconnect = () => {
       initWebSocket();
       state.lockReconnect = false;
     }, 5000);
-};
+  };
-/**
+
+  /**
    * 清空定时器
    */
-const clearTimeoutObj = (heartbeat: any) => {
+  const clearTimeoutObj = (heartbeat: any) => {
     heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj);
     heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj);
-};
+  };
-/**
+
+  /**
    * 开启心跳
    */
-const startHeartbeat = () => {
+  const startHeartbeat = () => {
     const webSocket = state.webSocket;
     const heartbeat = state.heartbeat;
     // 清空定时器
@@ -106,38 +129,40 @@ const startHeartbeat = () => {
         reconnect();
       }
     }, heartbeat.interval);
-};
+  };
 
-/**
+  /**
    * 连接成功事件
    */
-const onOpen = () => {
+  const onOpen = () => {
     //开启心跳
     startHeartbeat();
     state.reconnectTime = 0;
-};
+  };
-/**
+
+  /**
    * 连接失败事件
    * @param e
    */
-const onError = () => {
+  const onError = () => {
     //重连
     reconnect();
-};
+  };
 
-/**
+  /**
    * 连接关闭事件
    * @param e
    */
-const onClose = () => {
+  const onClose = () => {
     //重连
     reconnect();
-};
+  };
-/**
+
+  /**
    * 接收服务器推送的信息
- * @param msgEvent
+   * @param msgEvent 消息事件
    */
-const onMessage = (msgEvent: any) => {
+  const onMessage = (msgEvent: any) => {
     //收到服务器信息，心跳重置并发送
     startHeartbeat();
     // if (msgEvent.data.indexOf('pong') > 0) {
@@ -151,5 +176,5 @@ const onMessage = (msgEvent: any) => {
     // }
 
     emit('rollback', msgEvent.data);
-};
+  };
 </script>