优化signalR

src/utils/signalR.js

@@ -1,7 +1,7 @@
 // 官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio
 import * as signalR from '@microsoft/signalr'
 import { getToken } from '@/utils/auth'
-import { ElNotification } from 'element-plus'
+import { ElNotification, ElMessageBox } from 'element-plus'
 import useSocketStore from '@/store/modules/socket'
 import { webNotify } from './index'
 export default {
@@ -16,12 +16,12 @@ export default {
       .withUrl(socketUrl, { accessTokenFactory: () => getToken() })
       .withAutomaticReconnect() //自动重新连接
       .configureLogging(signalR.LogLevel.Warning)
-      .build();
+      .build()
     this.SR = connection
     // 断线重连
     connection.onclose(async () => {
       console.log('断开连接了')
-      console.assert(connection.state === signalR.HubConnectionState.Disconnected);
+      console.assert(connection.state === signalR.HubConnectionState.Disconnected)
       // 建议用户重新刷新浏览器
       await this.start()
     })
@@ -29,29 +29,40 @@ export default {
     connection.onreconnected(() => {
       console.log('断线重新连接成功')
     })
+
+    connection.onreconnecting(async () => {
+      console.log('断线重新连接中...')
+      ElMessageBox.alert('与服务器通讯断开连接了，请稍后刷新浏览器尝试', '', {
+        confirmButtonText: 'OK'
+      })
+      await this.start()
+    })
+
     this.receiveMsg(connection)
     // 启动
     // this.start();
   },
   /**
    * 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
-   * @returns 
+   * @returns
    */
   async start() {
-    var that = this
-
     try {
+      console.log('signalR-1', this.SR.state)
       //使用async和await 或 promise的then 和catch 处理来自服务端的异常
-      await this.SR.start()
+      if (this.SR.state === signalR.HubConnectionState.Disconnected) {
-      //console.assert(this.SR.state === signalR.HubConnectionState.Connected);
+        await this.SR.start()
-      console.log('signalR', this.SR.state);
+      }
+
+      console.log('signalR-2', this.SR.state)
       return true
     } catch (error) {
-      that.failNum--;
+      console.error(error)
+      this.failNum--
       // console.log(`失败重试剩余次数${that.failNum}`, error)
-      if (that.failNum > 0 && this.SR.state.Disconnected) {
+      if (this.failNum > 0 && this.SR.state.Disconnected) {
         setTimeout(async () => {
-          await this.SR.start()
+          await this.start()
         }, 5000)
       }
       return false
@@ -59,15 +70,15 @@ export default {
   },
   // 接收消息处理
   receiveMsg(connection) {
-    connection.on("onlineNum", (data) => {
+    connection.on('onlineNum', (data) => {
       useSocketStore().setOnlineUserNum(data)
-    });
+    })
     // 接收欢迎语
-    connection.on("welcome", (data) => {
+    connection.on('welcome', (data) => {
       ElNotification.info(data)
-    });
+    })
     // 接收后台手动推送消息
-    connection.on("receiveNotice", (title, data) => {
+    connection.on('receiveNotice', (title, data) => {
       ElNotification({
         type: 'info',
         title: title,
@@ -78,14 +89,14 @@ export default {
       webNotify({ title: title, body: data })
     })
     // 接收系统通知/公告
-    connection.on("moreNotice", (data) => {
+    connection.on('moreNotice', (data) => {
       if (data.code == 200) {
         useSocketStore().setNoticeList(data.data)
       }
     })
 
     // 接收在线用户
-    connection.on("onlineUser", (data) => {
+    connection.on('onlineUser', (data) => {
       useSocketStore().setOnlineUsers(data)
     })
 
@@ -102,4 +113,4 @@ export default {
       webNotify({ title: title, body: data.message })
     })
   }
-}
+}