feat:对接推送在线人数

Yi.Bbs.Vue3/src/views/home/Index.vue

@@ -62,7 +62,7 @@
               <div class="content">
                 <div class="name"></div>
                 <div class="content-box top">
-                  <div class="count">{{ userAnalyseInfo.onlineNumber }}</div>
+                  <div class="count">{{ onlineNumber }}</div>
                 </div>
               </div>
             </div>
@@ -199,6 +199,7 @@ import RecommendFriend from "./components/RecommendFriend/index.vue";
 import ThemeData from "./components/RecommendTheme/index.vue";
 import Skeleton from "@/components/Skeleton/index.vue";
 import useUserStore from "@/stores/user";
+import useSocketStore from "@/stores/socket";
 import { storeToRefs } from "pinia";
 import signalR from "@/utils/signalR";
 
@@ -218,6 +219,7 @@ const isThemeFinished = ref([]);
 const allDiscussList = ref([]);
 const isAllDiscussFinished = ref(false);
 const userAnalyseInfo = ref({});
+const onlineNumber = ref(0);
 
 const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 //主题查询参数
@@ -258,21 +260,19 @@ onMounted(async () => {
   isAllDiscussFinished.value = allDiscussConfig.isFinish;
   allDiscussList.value = allDiscussData.items;
   const { data: userAnalyseInfoData } = await getUserAnalyse();
+  onlineNumber.value = userAnalyseInfoData.onlineNumber;
   userAnalyseInfo.value = userAnalyseInfoData;
   // 实时人数
-  // await signalR.init(`main`);
-  // nextTick(() => {
-  //   // 初始化主题样式
-  //   handleThemeStyle(useSettingsStore().theme);
-  // });
+  await signalR.init(`main`);
 });
 
 //这里还需要监视token的变化，重新进行signalr连接
-watch();
-// () => token.value,
-// async (newValue, oldValue) => {
-//   await signalR.init(`main`);
-// }
+watch(
+  () => token.value,
+  async (newValue, oldValue) => {
+    await signalR.init(`main`);
+  }
+);
 
 const weekXAxis = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
 // 访问统计
@@ -290,6 +290,15 @@ const statisOptions = computed(() => {
     },
   };
 });
+
+// 推送的实时人数获取
+const currentOnlineNum = computed(() => useSocketStore().getOnlineNum());
+watch(
+  () => currentOnlineNum.value,
+  (val) => {
+    onlineNumber.value = val;
+  }
+);
 </script>
 <style scoped lang="scss">
 .home-box {

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

@@ -1,9 +1,9 @@
 // 官方文档：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'
-import useUserStore from '@/store/modules/user'
-import { ElMessage } from 'element-plus'
+import * as signalR from "@microsoft/signalr";
+import useSocketStore from "@/store/modules/socket";
+import { getToken } from "@/utils/auth";
+import useUserStore from "@/store/modules/user";
+import { ElMessage } from "element-plus";
 
 export default {
   // signalR对象
@@ -12,57 +12,51 @@ export default {
   failNum: 4,
   async init(url) {
     const connection = new signalR.HubConnectionBuilder()
-      .withUrl(`${import.meta.env.VITE_APP_BASE_WS}/` + url,
-        {
-          headers: {
-            'Authorization': `Bearer ${getToken()}`
-          },
-          accessTokenFactory: () => {
-            // 返回授权 token
-            return `${getToken()}`;
-        }
-        }
-      )
+      .withUrl(`${import.meta.env.VITE_APP_BASE_WS}/` + url, {
+        headers: {
+          Authorization: `Bearer ${getToken()}`,
+        },
+        accessTokenFactory: () => {
+          // 返回授权 token
+          return `${getToken()}`;
+        },
+      })
 
-      .withAutomaticReconnect()//自动重新连接
+      .withAutomaticReconnect() //自动重新连接
       .configureLogging(signalR.LogLevel.Information)
       .build();
- 
-    console.log(connection, "connection")
 
+    console.log(connection, "connection");
 
     this.SR = connection;
     // 断线重连
     connection.onclose(async () => {
-      console.log('断开连接了')
-      console.assert(connection.state === signalR.HubConnectionState.Disconnected);
+      console.log("断开连接了");
+      console.assert(
+        connection.state === signalR.HubConnectionState.Disconnected
+      );
       // 建议用户重新刷新浏览器
       await this.start();
-    })
+    });
 
     connection.onreconnected(() => {
-      console.log('断线重新连接成功')
-    })
+      console.log("断线重新连接成功");
+    });
     this.receiveMsg(connection);
     // 启动
     await this.start();
   },
   /**
    * 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
-   * @returns 
+   * @returns
    */
   async close() {
     try {
       var that = this;
       await this.SR.stop();
-    }
-    catch
-    {
-
-    }
+    } catch {}
   },
 
-
   async start() {
     var that = this;
 
@@ -78,7 +72,7 @@ export default {
       //console.log(`失败重试剩余次数${that.failNum}`, error)
       if (that.failNum > 0) {
         setTimeout(async () => {
-          await this.SR.start()
+          await this.SR.start();
         }, 5000);
       }
       return false;
@@ -88,13 +82,15 @@ export default {
   receiveMsg(connection) {
     connection.on("onlineNum", (data) => {
       const socketStore = useSocketStore();
-      socketStore.setOnlineNum(data)
+      socketStore.setOnlineNum(data);
     });
     connection.on("forceOut", (msg) => {
-      useUserStore().logOut().then(() => {
-        alert(msg);
-        location.href = '/index';
-      })
+      useUserStore()
+        .logOut()
+        .then(() => {
+          alert(msg);
+          location.href = "/index";
+        });
     });
     // connection.on("onlineNum", (data) => {
     //   store.dispatch("socket/changeOnlineNum", data);
@@ -120,5 +116,5 @@ export default {
     //     store.dispatch("socket/getNoticeList", data.data);
     //   }
     // })
-  }
-}
+  },
+};