增加ws的重发机制（待验证）

src/api/user.js

@@ -21,7 +21,7 @@ export const userLoginService = ({ username, password }) => {
   )
 }
 
-export const userLogoutnService = ({ username }) => {
+export const userLogoutService = ({ username }) => {
   return request.post('/user/logout', getReqBody({ account: username }))
 }
 

src/api/wsConnect.js

@@ -18,6 +18,9 @@ class WsConnect {
     return WsConnect.instance
   }
 
+  /**
+   * 用户数据
+   */
   userData
 
   /**
@@ -35,6 +38,9 @@ class WsConnect {
    */
   buffer
 
+  /**
+   * ws地址
+   */
   url
 
   /**
@@ -61,6 +67,15 @@ class WsConnect {
     stop: null
   }
 
+  /**
+   * 重发设置
+   */
+  reSend = {
+    interval: 1000, // 间隔时间
+    timeoutTimes: 5, // 超时次数，超过该次数不再重发
+    curReSendTimes: 0 // 当前重发的次数
+  }
+
   /**
    * 构造函数
    */
@@ -102,7 +117,7 @@ class WsConnect {
     console.log('client close the websocket connect')
     this.heartBeat.stop()
     this.reconnect.stop()
-    this.connect && this.connect.close(1000)
+    this.connect && this.connect.close(1000) //1000表示正常退出
     this.connect = null
     this.isConnect = false
   }
@@ -149,7 +164,7 @@ class WsConnect {
     this.connect = null
     this.isConnect = false
     if (evt.code != 1000) {
-      this.reconnect.start() // 正常关闭要重连
+      this.reconnect.start() // 非正常关闭要重连
     }
   }
 
@@ -243,6 +258,28 @@ class WsConnect {
     return newBuffer
   }
 
+  /**
+   * 发送msg，封装了重发机制
+   * @param {*} msg
+   * @param {*} callback 失败回调
+   */
+  sendMsg(msg, callback) {
+    if (this.isConnect) {
+      this.connect.send(msg)
+    } else {
+      if (this.reSend.curReSendTimes >= this.reSend.timeoutTimes) {
+        console.log('resend to0 many times')
+        this.reSend.curReSendTimes = 0
+        callback()
+      } else {
+        setTimeout(() => {
+          this.sendMsg(msg, callback)
+        }, this.reSend.interval)
+        this.reSend.curReSendTimes++
+      }
+    }
+  }
+
   sendHeartBeat() {
     if (this.heartBeat.healthPoint >= this.heartBeat.timeoutTimes) {
       console.log('heart beat timeout')

src/router/index.js

@@ -53,28 +53,23 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
   const userData = userStore()
-  console.log(111)
 
   // 如果没有access token，且访问的是非登录页，拦截到登录
   if (!userData.at.token && to.path !== '/login') {
-    console.log(222)
     next('/login')
     return
   }
 
   // 如果有access token，且访问的是登录页，拦截到首页
   if (userData.at.token && to.path === '/login') {
-    console.log(333)
     next('/')
     return
   }
 
   // 检查是否是其他请求（除了已定义的路由之外的请求）
   if (!router.getRoutes().some((route) => route.path === to.path)) {
-    console.log(444)
     next('/')
   } else {
-    console.log(555)
     next()
   }
 })

src/views/layout/LayoutContainer.vue

@@ -12,7 +12,7 @@ import { userStore } from '@/stores'
 import router from '@/router'
 import MyCard from '@/components/navigate/MyCard.vue'
 import NaviMenu from '@/components/navigate/NaviMenu.vue'
-import { userLogoutnService } from '@/api/user'
+import { userLogoutService } from '@/api/user'
 import wsConnect from '@/api/wsConnect'
 
 const myCardDialog = ref()
@@ -20,13 +20,11 @@ const myAvatar = ref()
 const userData = userStore()
 
 onMounted(() => {
-  console.log('LayoutContainer onMounted')
   wsConnect.createWs()
   document.addEventListener('click', clickListener)
 })
 
 onUnmounted(() => {
-  console.log('LayoutContainer onUnmounted')
   document.removeEventListener('click', clickListener)
 })
 
@@ -43,17 +41,22 @@ const openMyCardDialog = () => {
 }
 
 const onExit = async () => {
-  await ElMessageBox.confirm('你确认要退出吗？', '温馨提示', {
+  ElMessageBox.confirm('你确认要退出吗？', '温馨提示', {
     type: 'warning',
     confirmButtonText: '确认',
     cancelButtonText: '取消'
   })
-  userLogoutnService(userData.user.account).finally(() => {
-    userData.clearAt()
-    userData.clearRt()
-    wsConnect.closeWs()
-    router.push('/login')
-  })
+    .then(() => {
+      userLogoutService(userData.user.account).finally(() => {
+        userData.clearAt()
+        userData.clearRt()
+        wsConnect.closeWs()
+        router.push('/login')
+      })
+    })
+    .catch(() => {
+      // do nothing
+    })
 }
 </script>