diff --git a/Yi.Bbs.Vue3/src/views/home/Index.vue b/Yi.Bbs.Vue3/src/views/home/Index.vue index b237c1ad..40dac825 100644 --- a/Yi.Bbs.Vue3/src/views/home/Index.vue +++ b/Yi.Bbs.Vue3/src/views/home/Index.vue @@ -62,7 +62,7 @@
-
{{ userAnalyseInfo.onlineNumber }}
+
{{ onlineNumber }}
@@ -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; + } +);