From c750242da594737b1090bda332028b97bf1550c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E9=99=8C?= Date: Tue, 19 Sep 2023 15:25:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5websocket?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/config.js | 5 ++-- src/main.js | 2 +- src/router/index.js | 13 ++++++++- src/store/modules/socket.js | 47 ++++++++++++++++++++++++++++++ src/views/home/index.vue | 2 ++ src/views/login/index.vue | 1 + src/views/system/upgrade/index.vue | 27 +++++++++-------- src/x.js | 2 ++ 8 files changed, 83 insertions(+), 16 deletions(-) create mode 100644 src/store/modules/socket.js diff --git a/public/config.js b/public/config.js index f0ef3da..ca8a06c 100644 --- a/public/config.js +++ b/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', } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 6c0b446..1e0a345 100644 --- a/src/main.js +++ b/src/main.js @@ -36,4 +36,4 @@ app.use(ElementPlus); app.use(i18n); app.use(x); //挂载 app -app.mount('#app'); +app.mount('#app'); \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 59ad10d..f7c5a2e 100644 --- a/src/router/index.js +++ b/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) diff --git a/src/store/modules/socket.js b/src/store/modules/socket.js new file mode 100644 index 0000000..de56cf8 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/src/views/home/index.vue b/src/views/home/index.vue index e18f2e5..cffc327 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -31,6 +31,8 @@ }, mounted(){ + console.log(this.$socket) + }, methods: { onMounted(){ diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 05ff057..6ca59bc 100644 --- a/src/views/login/index.vue +++ b/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") diff --git a/src/views/system/upgrade/index.vue b/src/views/system/upgrade/index.vue index f98fad5..5d44a80 100644 --- a/src/views/system/upgrade/index.vue +++ b/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) => { diff --git a/src/x.js b/src/x.js index 9957317..744600d 100644 --- a/src/x.js +++ b/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)