From 129cdcfd0c2f7fda36a3e8c2d7df175df61bc2c0 Mon Sep 17 00:00:00 2001
From: zjl <xx@qq.com>
Date: Wed, 18 Dec 2024 15:35:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96WebSocket=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Websocket/index.vue | 299 ++++++++++++++++-------------
 1 file changed, 162 insertions(+), 137 deletions(-)

diff --git a/src/components/Websocket/index.vue b/src/components/Websocket/index.vue
index 00be705..566c0b8 100644
--- a/src/components/Websocket/index.vue
+++ b/src/components/Websocket/index.vue
@@ -1,155 +1,180 @@
 <template>
-	<div></div>
+  <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({
-	uri: {
-		type: String,
-	},
-});
+  /**
+   * 定义接收的参数
+   */
+  const props = defineProps({
+    uri: {
+      type: String,
+    },
+  });
 
-const state = reactive({
-	webSocket: ref(), // webSocket实例
-	lockReconnect: false, // 重连锁，避免多次重连
-	maxReconnect: 6, // 最大重连次数， -1 标识无限重连
-	reconnectTime: 0, // 重连尝试次数
-	heartbeat: {
-		interval: 30 * 1000, // 心跳间隔时间
-		timeout: 10 * 1000, // 响应超时时间
-		pingTimeoutObj: ref(), // 延时发送心跳的定时器
-		pongTimeoutObj: ref(), // 接收心跳响应的定时器
-		pingMessage: JSON.stringify({ type: 'ping' }), // 心跳请求信息
-	},
-});
+  /**
+   * 定义Socket状态
+   */
+  const state = reactive({
+    webSocket: ref(), // webSocket实例
+    lockReconnect: false, // 重连锁，避免多次重连
+    maxReconnect: 6, // 最大重连次数， -1 标识无限重连
+    reconnectTime: 0, // 重连尝试次数
+    heartbeat: {
+      interval: 30 * 1000, // 心跳间隔时间
+      timeout: 10 * 1000, // 响应超时时间
+      pingTimeoutObj: ref(), // 延时发送心跳的定时器
+      pongTimeoutObj: ref(), // 接收心跳响应的定时器
+      pingMessage: JSON.stringify({ type: 'ping' }), // 心跳请求信息
+    },
+  });
 
-const token = computed(() => {
-	return useUserStore().getToken;
-});
+  /**
+   * 获取Token令牌
+   */
+  const token = computed(() => {
+    return useUserStore().getToken;
+  });
 
-const tenant = computed(() => {
-	return Session.getTenant();
-});
+  const tenant = computed(() => {
+    return Session.getTenant();
+  });
 
-onMounted(() => {
-	initWebSocket();
-});
+  /**
+   * 钩子函数
+   */
+  onMounted(() => {
+    initWebSocket();
+  });
 
-onUnmounted(() => {
-	state.webSocket.close();
-	clearTimeoutObj(state.heartbeat);
-});
+  onUnmounted(() => {
+    state.webSocket.close();
+    clearTimeoutObj(state.heartbeat);
+  });
 
-const initWebSocket = () => {
-	// ws地址
-	let host = window.location.host;
-  let wsUri =`${location.protocol === 'https:' ? 'wss' : 'ws'}://${host}${props.uri}`;
+  /**
+   * 初始化WebSocket对象
+   */
+  const initWebSocket = () => {
+    // ws地址
+    let host = window.location.host;
+    let wsUri = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${host}${props.uri}`;
 
-	// 建立连接
-	state.webSocket = new WebSocket(wsUri);
-	// 连接成功
-	state.webSocket.onopen = onOpen;
-	// 连接错误
-	state.webSocket.onerror = onError;
-	// 接收信息
-	state.webSocket.onmessage = onMessage;
-	// 连接关闭
-	state.webSocket.onclose = onClose;
-};
+    // 建立连接
+    state.webSocket = new WebSocket(wsUri);
+    // 连接成功
+    state.webSocket.onopen = onOpen;
+    // 连接错误
+    state.webSocket.onerror = onError;
+    // 接收信息
+    state.webSocket.onmessage = onMessage;
+    // 连接关闭
+    state.webSocket.onclose = onClose;
+  };
 
-const reconnect = () => {
-	if (!token) {
-		return;
-	}
-	if (state.lockReconnect || (state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)) {
-		return;
-	}
-	state.lockReconnect = true;
-	setTimeout(() => {
-		state.reconnectTime++;
-		// 建立新连接
-		initWebSocket();
-		state.lockReconnect = false;
-	}, 5000);
-};
-/**
- * 清空定时器
- */
-const clearTimeoutObj = (heartbeat: any) => {
-	heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj);
-	heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj);
-};
-/**
- * 开启心跳
- */
-const startHeartbeat = () => {
-	const webSocket = state.webSocket;
-	const heartbeat = state.heartbeat;
-	// 清空定时器
-	clearTimeoutObj(heartbeat);
-	// 延时发送下一次心跳
-	heartbeat.pingTimeoutObj = setTimeout(() => {
-		// 如果连接正常
-		if (webSocket.readyState === 1) {
-			//这里发送一个心跳，后端收到后，返回一个心跳消息，
-			webSocket.send(heartbeat.pingMessage);
-			// 心跳发送后，如果服务器超时未响应则断开，如果响应了会被重置心跳定时器
-			heartbeat.pongTimeoutObj = setTimeout(() => {
-				webSocket.close();
-			}, heartbeat.timeout);
-		} else {
-			// 否则重连
-			reconnect();
-		}
-	}, heartbeat.interval);
-};
+  /**
+   * 重连机制
+   */
+  const reconnect = () => {
+    if (!token.value) {
+      return;
+    }
+    if (
+      state.lockReconnect ||
+      (state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)
+    ) {
+      return;
+    }
+    state.lockReconnect = true;
+    setTimeout(() => {
+      state.reconnectTime++;
+      // 建立新连接
+      initWebSocket();
+      state.lockReconnect = false;
+    }, 5000);
+  };
 
-/**
- * 连接成功事件
- */
-const onOpen = () => {
-	//开启心跳
-	startHeartbeat();
-	state.reconnectTime = 0;
-};
-/**
- * 连接失败事件
- * @param e
- */
-const onError = () => {
-	//重连
-	reconnect();
-};
+  /**
+   * 清空定时器
+   */
+  const clearTimeoutObj = (heartbeat: any) => {
+    heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj);
+    heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj);
+  };
 
-/**
- * 连接关闭事件
- * @param e
- */
-const onClose = () => {
-	//重连
-	reconnect();
-};
-/**
- * 接收服务器推送的信息
- * @param msgEvent
- */
-const onMessage = (msgEvent: any) => {
-	//收到服务器信息，心跳重置并发送
-	startHeartbeat();
-	// if (msgEvent.data.indexOf('pong') > 0) {
-	// 	return;
-	// }
-	// let text =''
-	// try{
-	// 	text = JSON.parse(msgEvent.data);
-	// }catch(e){
-	// 	return
-	// }
+  /**
+   * 开启心跳
+   */
+  const startHeartbeat = () => {
+    const webSocket = state.webSocket;
+    const heartbeat = state.heartbeat;
+    // 清空定时器
+    clearTimeoutObj(heartbeat);
+    // 延时发送下一次心跳
+    heartbeat.pingTimeoutObj = setTimeout(() => {
+      // 如果连接正常
+      if (webSocket.readyState === 1) {
+        //这里发送一个心跳，后端收到后，返回一个心跳消息，
+        webSocket.send(heartbeat.pingMessage);
+        // 心跳发送后，如果服务器超时未响应则断开，如果响应了会被重置心跳定时器
+        heartbeat.pongTimeoutObj = setTimeout(() => {
+          webSocket.close();
+        }, heartbeat.timeout);
+      } else {
+        // 否则重连
+        reconnect();
+      }
+    }, heartbeat.interval);
+  };
 
-	emit('rollback', msgEvent.data);
-};
+  /**
+   * 连接成功事件
+   */
+  const onOpen = () => {
+    //开启心跳
+    startHeartbeat();
+    state.reconnectTime = 0;
+  };
+
+  /**
+   * 连接失败事件
+   * @param e
+   */
+  const onError = () => {
+    //重连
+    reconnect();
+  };
+
+  /**
+   * 连接关闭事件
+   * @param e
+   */
+  const onClose = () => {
+    //重连
+    reconnect();
+  };
+
+  /**
+   * 接收服务器推送的信息
+   * @param msgEvent 消息事件
+   */
+  const onMessage = (msgEvent: any) => {
+    //收到服务器信息，心跳重置并发送
+    startHeartbeat();
+    // if (msgEvent.data.indexOf('pong') > 0) {
+    // 	return;
+    // }
+    // let text =''
+    // try{
+    // 	text = JSON.parse(msgEvent.data);
+    // }catch(e){
+    // 	return
+    // }
+
+    emit('rollback', msgEvent.data);
+  };
 </script>