接入websocket

.env.development

@@ -23,3 +23,6 @@ VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbf
 
 # 客户端id
 VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
+
+#websocket地址
+VITE_APP_WEBSOCKET_URL = 'ws://127.0.0.1:8098/resource/websocket'

.env.production

@@ -26,3 +26,6 @@ VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbf
 
 # 客户端id
 VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
+
+#websocket地址
+VITE_APP_WEBSOCKET_URL = 'ws://127.0.0.1:8098/resource/websocket'

src/utils/websocket.ts

@@ -0,0 +1,134 @@
+/**
+ * @module initWebSocket 初始化
+ * @module websocketonopen 连接成功
+ * @module websocketonerror 连接失败
+ * @module websocketclose 断开连接
+ * @module resetHeart 重置心跳
+ * @module sendSocketHeart 心跳发送
+ * @module reconnect 重连
+ * @module sendMsg 发送数据
+ * @module websocketonmessage 接收数据
+ * @module test 测试收到消息传递
+ * @description socket 通信
+ * @param {any} url socket地址
+ * @param {any} websocket websocket 实例
+ * @param {any} heartTime 心跳定时器实例
+ * @param {number} socketHeart 心跳次数
+ * @param {number} HeartTimeOut 心跳超时时间
+ * @param {number} socketError 错误次数
+ */
+
+import { getToken } from '@/utils/auth';
+
+let socketUrl: any = ''; // socket地址
+let websocket: any = null; // websocket 实例
+let heartTime: any = null; // 心跳定时器实例
+let socketHeart = 0 as number; // 心跳次数
+const HeartTimeOut = 10000; // 心跳超时时间 10000 = 10s
+let socketError = 0 as number; // 错误次数
+
+// 初始化socket
+export const initWebSocket = (url: any) => {
+  socketUrl = url;
+  // 初始化 websocket
+  websocket = new WebSocket(url + '?Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID);
+  websocketonopen();
+  websocketonmessage();
+  websocketonerror();
+  websocketclose();
+  sendSocketHeart();
+};
+
+onMounted(() => {
+  // 初始化websocket
+  initWebSocket(socketUrl);
+});
+
+// socket 连接成功
+export const websocketonopen = () => {
+  websocket.onopen = function (e: any) {
+    console.log('连接 websocket 成功', e);
+    resetHeart();
+  };
+};
+
+// socket 连接失败
+export const websocketonerror = () => {
+  websocket.onerror = function (e: any) {
+    console.log('连接 websocket 失败', e);
+  };
+};
+
+// socket 断开链接
+export const websocketclose = () => {
+  websocket.onclose = function (e: any) {
+    console.log('断开连接', e);
+  };
+};
+
+// socket 重置心跳
+export const resetHeart = () => {
+  socketHeart = 0;
+  socketError = 0;
+  clearInterval(heartTime);
+  sendSocketHeart();
+};
+
+// socket心跳发送
+export const sendSocketHeart = () => {
+  console.log(websocket);
+  heartTime = setInterval(() => {
+    // 如果连接正常则发送心跳
+    if (websocket.readyState == 1) {
+      // if (socketHeart <= 30) {
+      websocket.send(
+        JSON.stringify({
+          type: 'ping'
+        })
+      );
+      socketHeart = socketHeart + 1;
+    } else {
+      // 重连
+      reconnect();
+    }
+  }, HeartTimeOut);
+};
+
+// socket重连
+export const reconnect = () => {
+  if (socketError <= 2) {
+    clearInterval(heartTime);
+    initWebSocket(socketUrl);
+    socketError = socketError + 1;
+    // eslint-disable-next-line prettier/prettier
+    console.log('socket重连', socketError);
+  } else {
+    // eslint-disable-next-line prettier/prettier
+    console.log('重试次数已用完');
+    clearInterval(heartTime);
+  }
+};
+
+// socket 发送数据
+export const sendMsg = (data: any) => {
+  websocket.send(data);
+};
+
+// socket 接收数据
+export const websocketonmessage = () => {
+  websocket.onmessage = function (e: any) {
+    const msg = JSON.parse(e.data) as any;
+    if (msg.type === 'heartbeat') {
+      resetHeart();
+      console.log('心跳');
+    }
+    if (msg.type === 'ping') {
+      console.log('收到心跳', socketHeart);
+      return;
+    }
+    ElNotification({
+      title: '收到一条消息',
+      message: msg
+    });
+  };
+};

src/views/index.vue

@@ -96,6 +96,11 @@
 </template>
 
 <script setup name="Index" lang="ts">
+import { initWebSocket } from '@/utils/websocket';
+
+onMounted(() => {
+initWebSocket(import.meta.env.VITE_APP_WEBSOCKET_URL);
+});
 
 const goTarget = (url:string) => {
   window.open(url, '__blank')