实时在线用户功能

Yi.Vue3.X.RuoYi/src/App.vue

@@ -12,4 +12,6 @@ onMounted(() => {
     handleThemeStyle(useSettingsStore().theme)
   })
 })
+
+//这里还需要监视token的变化，重新进行signalr连接
 </script>

Yi.Vue3.X.RuoYi/src/main.js

@@ -21,6 +21,7 @@ import { download } from '@/utils/ruoyi.js'
 import 'virtual:svg-icons-register'
 import SvgIcon from '@/components/SvgIcon'
 import elementIcons from '@/components/SvgIcon/svgicon'
+import signalR from '@/utils/signalR'
 
 import './permission' // permission control
 
@@ -77,5 +78,8 @@ app.use(ElementPlus, {
   // 支持 large、default、small
   size: Cookies.get('size') || 'default'
 })
-
+// app.prototype.signalr = signalR
+signalR.init("http://localhost:19001/api/hub/main");
+signalR.start();
 app.mount('#app')
+

Yi.Vue3.X.RuoYi/src/permission.js

@@ -15,7 +15,6 @@ const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
-console.log(router.getRoutes()  ,"123")
   if (getToken()) {
     to.meta.title && useSettingsStore().setTitle(to.meta.title)
     /* has token*/

Yi.Vue3.X.RuoYi/src/store/modules/socket.js

@@ -0,0 +1,20 @@
+const socketStore = defineStore(
+  'socket',
+  {
+    state: () => ({
+      onlineNum: 1
+    }),
+    actions: {
+      // 获取在线总数
+      getOnlineNum() {
+          return this.onlineNum;
+      },
+      // 设置在线总数
+      setOnlineNum(value) {
+        this.onlineNum = value;
+      }
+
+    }
+  })
+
+export default socketStore

Yi.Vue3.X.RuoYi/src/utils/signalR.js

@@ -0,0 +1,90 @@
+// 官方文档：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 useSocketStore from '@/store/modules/socket'
+import { getToken } from '@/utils/auth'
+
+
+export default {
+  // signalR对象
+  SR: {},
+  // 失败连接重试次数
+  failNum: 4,
+  baseUrl: '',
+  init(url) {
+    const connection = new signalR.HubConnectionBuilder()
+      .withUrl(url, { accessTokenFactory: () => getToken() })
+      .withAutomaticReconnect()//自动重新连接
+      .configureLogging(signalR.LogLevel.Information)
+      .build();
+    this.SR = connection;
+    // 断线重连
+    connection.onclose(async () => {
+      console.log('断开连接了')
+      console.assert(connection.state === signalR.HubConnectionState.Disconnected);
+      // 建议用户重新刷新浏览器
+      await this.start();
+    })
+
+    connection.onreconnected(() => {
+      console.log('断线重新连接成功')
+    })
+    this.receiveMsg(connection);
+    // 启动
+    // this.start();
+  },
+  /**
+   * 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
+   * @returns 
+   */
+  async start() {
+    var that = this;
+
+    try {
+      //使用async和await 或 promise的then 和catch 处理来自服务端的异常
+      await this.SR.start();
+      //console.assert(this.SR.state === signalR.HubConnectionState.Connected);
+      console.log('signalR 连接成功了', this.SR.state);
+      return true;
+    } catch (error) {
+      that.failNum--;
+      console.log(`失败重试剩余次数${that.failNum}`, error)
+      if (that.failNum > 0) {
+        setTimeout(async () => {
+          await this.SR.start()
+        }, 5000);
+      }
+      return false;
+    }
+  },
+  // 接收消息处理
+  receiveMsg(connection) {
+    connection.on("onlineNum", (data) => {
+      const socketStore = useSocketStore();
+      socketStore.setOnlineNum(data)
+    });
+    // connection.on("onlineNum", (data) => {
+    //   store.dispatch("socket/changeOnlineNum", data);
+    // });
+    // // 接收欢迎语
+    // connection.on("welcome", (data) => {
+    //   console.log('welcome', data)
+    //   Notification.info(data)
+    // });
+    // // 接收后台手动推送消息
+    // connection.on("receiveNotice", (title, data) => {
+    //   Notification({
+    //     type: 'info',
+    //     title: title,
+    //     message: data,
+    //     dangerouslyUseHTMLString: true,
+    //     duration: 0
+    //   })
+    // })
+    // // 接收系统通知/公告
+    // connection.on("moreNotice", (data) => {
+    //   if (data.code == 200) {
+    //     store.dispatch("socket/getNoticeList", data.data);
+    //   }
+    // })
+  }
+}

Yi.Vue3.X.RuoYi/src/views/index.vue

@@ -40,6 +40,7 @@
     <el-row :gutter="20">
       <el-col :sm="24" :lg="12" style="padding-left: 20px">
         <h2>意框架-若依后台管理框架</h2>
+        <h3>当前在线人数：{{onlineNum}}</h3>
         <p>
          Ruoyi:一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
         </p>
@@ -854,8 +855,14 @@
 </template>
 
 <script setup name="Index">
+import useSocketStore from '@/store/modules/socket'
+import { ref } from 'vue-demi';
+import { storeToRefs } from 'pinia';
+const socketStore=useSocketStore();
+const {onlineNum}=storeToRefs(socketStore);
 const version = ref('3.8.3')
 
+
 function goTarget(url) {
   window.open(url, '__blank')
 }