加入websocket

public/config.js

@@ -13,7 +13,8 @@ const APP_CONFIG = {
     APP_LOGO: '',
     //接口地址
     API_URL: 'https://ps.xiaoapi.com/admin',
-
     // 微信扫码登录
-    MY_SHOW_LOGIN_OAUTH:true,
+    MY_SHOW_LOGIN_OAUTH: true,
+    // 
+    WEBSOCKET: 'wss://app.gter.net/socket',
 }

src/main.js

@@ -36,4 +36,4 @@ app.use(ElementPlus);
 app.use(i18n);
 app.use(x);
 //挂载 app
-app.mount('#app');
+app.mount('#app');

src/router/index.js

@@ -89,6 +89,16 @@ router.beforeEach(async (to, from, next) => {
                     router.push(to.fullPath);
                 }
                 isGetRouter = true;
+                // 发送绑定
+                if (store.state.socket && store.state.socket.readyState === WebSocket.OPEN) {
+                    store.state.socket.send(JSON.stringify({
+                        type: 'bind',
+                        data: {
+                            token: token,
+                            uid: response.data.user.uid
+                        }
+                    }))
+                }
             }
         }).catch((error) => {
             console.log(error);
@@ -155,7 +165,8 @@ function loadComponent(component) {
 function flatAsyncRoutes(routes, breadcrumb = []) {
     let res = []
     routes.forEach(route => {
-        const tmp = { ...route }
+        const tmp = { ...route
+        }
         if (tmp.children) {
             let childrenBreadcrumb = [...breadcrumb]
             childrenBreadcrumb.push(route)

src/store/modules/socket.js

@@ -0,0 +1,47 @@
+import config from '@/config';
+import { ref } from 'vue';
+let socket;
+let reconnectAttempts = 1;
+const maxReconnectAttempts = 5;
+export function createWebSocket() {
+    let socketurl = config.WEBSOCKET || null;
+    if (socketurl) {
+        try {
+            socket = new WebSocket(socketurl);
+            socket.onopen = function() {
+                console.log('WebSocket连接成功');
+                reconnectAttempts = 0; // reset reconnect attempts
+            }
+            socket.onerror = function() {
+                console.log('WebSocket连接发生错误');
+                reconnect();
+            }
+            socket.onclose = function() {
+                console.log('WebSocket连接关闭');
+                reconnect();
+            }
+            // 更新 socketState 的值
+            socketState.value = socket;
+        } catch (e) {
+            console.log('WebSocket连接失败', e);
+            reconnect();
+        }
+    }
+}
+
+function reconnect() {
+    if (maxReconnectAttempts > reconnectAttempts) {
+        setTimeout(function() {
+            createWebSocket();
+            console.log('WebSocket进行重连(' + reconnectAttempts);
+            reconnectAttempts++;
+        }, 2000);
+    } else {
+        console.log('WebSocket重连失败');
+    }
+}
+const socketState = ref(socket);
+createWebSocket();
+export default {
+    state: socketState
+}

src/views/home/index.vue

@@ -31,6 +31,8 @@
 		},
 		mounted(){
 
+			console.log(this.$socket)
+
 		},
 		methods: {
 			onMounted(){

src/views/login/index.vue

@@ -115,6 +115,7 @@
 			this.$tool.data.remove("permissions")
 			this.$tool.data.remove("dashboardgrid")
 			this.$tool.data.remove("grid")
+			this.$tool.store.remove("token")
 			this.$store.commit("clearViewTags")
 			this.$store.commit("clearKeepLive")
 			this.$store.commit("clearIframeList")

src/views/system/upgrade/index.vue

@@ -166,18 +166,21 @@ export default {
   },
   methods: {
     loaddata(){
-        this.loading = true;
-        this.$http.get('admin/upgrade/get').then((res) => {
-            this.loading = false;
-            if (res.code == 200) {
-                this.userData = res.data.user;
-                this.cloudregister = res.data.cloudregister;
-                this.name = res.data.name;
-                this.authorizationtime = res.data.authorizationtime;
-                return ;
-            }
-            this.$alert(res.message, "提示", {type: 'error'});
-        });
+
+      console.log(this.$socket.send(1));
+
+      this.loading = true;
+      this.$http.get('admin/upgrade/get').then((res) => {
+          this.loading = false;
+          if (res.code == 200) {
+              this.userData = res.data.user;
+              this.cloudregister = res.data.cloudregister;
+              this.name = res.data.name;
+              this.authorizationtime = res.data.authorizationtime;
+              return ;
+          }
+          this.$alert(res.message, "提示", {type: 'error'});
+      });
     },
     loginHandle(formName) {
       this.$refs[formName].validate((valid) => {

src/x.js

@@ -28,6 +28,7 @@ import xQrCode from './components/xQrCode'
 import xPageHeader from './components/xPageHeader'
 import xSelect from './components/xSelect'
 import xWaterMark from './components/xWaterMark'
+import store from '@/store'
 import {
     Flexbox,
     FlexboxItem
@@ -50,6 +51,7 @@ export default {
         app.config.globalProperties.$api = api;
         app.config.globalProperties.$auth = permission;
         app.config.globalProperties.$role = rolePermission;
+        app.config.globalProperties.$socket = store.state.socket;
         //注册全局组件
         app.component('flexbox', Flexbox)
         app.component('flexbox-item', FlexboxItem)