通知公告样式优化，业务单号规则页面

src/signalr/analysis.js

@@ -0,0 +1,61 @@
+import { ElNotification, ElMessageBox } from 'element-plus'
+import useSocketStore from '@/store/modules/socket'
+import useUserStore from '@/store/modules/user'
+import { webNotify } from '@/utils/index'
+
+export default {
+  onMessage(connection) {
+    connection.on(MsgType.M001, (data) => {
+      useSocketStore().setOnlineUserNum(data)
+    })
+
+    connection.on(MsgType.M002, (data) => {})
+    // 接受后台手动推送消息
+    connection.on(MsgType.M003, (title, data) => {
+      ElNotification({
+        type: 'info',
+        title: title,
+        message: data,
+        dangerouslyUseHTMLString: true,
+        duration: 0
+      })
+      webNotify({ title: title, body: data })
+    })
+    // 接受系统通知/公告
+    connection.on(MsgType.M004, (data1, data2) => {
+      // if (data.code == 200) {
+      useSocketStore().setUnreadNoticeList(data1)
+      useSocketStore().setReadNoticeList(data2)
+      // }
+    })
+    // 接受聊天数据
+    connection.on(MsgType.M005, (data) => {
+      const { fromUser, message } = data
+
+      useSocketStore().setChat(data)
+
+      if (data.userid != useUserStore().userId) {
+        ElNotification({
+          title: fromUser.nickName,
+          message: message,
+          type: 'success',
+          duration: 3000
+        })
+      }
+      webNotify({ title: fromUser.nickName, body: message })
+    })
+  },
+  AllReadNotice(connection) {
+    connection.invoke('AllReadNotice')
+  },
+  ReadNotice(connection, noticeId) {
+    connection.invoke('ReadNotice', noticeId)
+  }
+}
+const MsgType = {
+  M001: 'onlineNum',
+  M002: 'connId',
+  M003: 'receiveNotice',
+  M004: 'moreNotice',
+  M005: 'receiveChat'
+}

src/signalr/index.js

@@ -0,0 +1,87 @@
+// 官方文档：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 { ElMessage } from 'element-plus'
+import cache from '@/plugins/cache'
+import analysis from '@/signalr/analysis'
+
+export default {
+  // signalR对象
+  SR: {},
+  // 失败连接重试次数
+  failNum: 4,
+  init(url) {
+    var socketUrl = window.location.origin + url + '?clientId=' + cache.local.get('clientId')
+    const connection = new signalR.HubConnectionBuilder()
+      .withUrl(socketUrl, { accessTokenFactory: () => getToken() })
+      .withAutomaticReconnect() //自动重新连接
+      .configureLogging(signalR.LogLevel.Warning)
+      .build()
+    this.SR = connection
+    // 断线重连
+    connection.onclose(async (error) => {
+      console.error('断开连接了' + error)
+      console.assert(connection.state === signalR.HubConnectionState.Disconnected)
+      // 建议用户重新刷新浏览器
+      await this.start()
+    })
+
+    connection.onreconnected((connectionId) => {
+      ElMessage({
+        message: '与服务器通讯已连接成功',
+        type: 'success',
+        duration: 2000
+      })
+      console.log('断线重新连接成功' + connectionId)
+    })
+
+    connection.onreconnecting(async () => {
+      console.log('断线重新连接中... ')
+
+      await this.start()
+    })
+    analysis.onMessage(connection)
+    // 启动
+    // this.start();
+  },
+  /**
+   * 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
+   * @returns
+   */
+  async start() {
+    try {
+      console.debug('signalR-1', this.SR.state)
+      //使用async和await 或 promise的then 和catch 处理来自服务端的异常
+      if (this.SR.state === signalR.HubConnectionState.Disconnected) {
+        await this.SR.start()
+      }
+
+      console.debug('signalR-2', this.SR.state)
+      return true
+    } catch (error) {
+      console.error(error)
+      this.failNum--
+      // console.log(`失败重试剩余次数${that.failNum}`, error)
+      if (this.failNum > 0 && this.SR.state.Disconnected) {
+        setTimeout(async () => {
+          await this.start()
+        }, 5000)
+      }
+      return false
+    }
+  },
+  AllReadNotice() {
+    analysis.AllReadNotice(this.SR)
+  },
+  ReadNotice(noticeId) {
+    analysis.ReadNotice(this.SR, noticeId)
+  }
+  // AllReadAimMsg() {
+  //   const connection = this.SR
+  //   connection.invoke('AllReadAimMsg')
+  // },
+  // ReadAimMsg(msgId) {
+  //   const connection = this.SR
+  //   connection.invoke('ReadAimMsg', msgId)
+  // }
+}