feat: 对接chathub用户列表

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/ChatUserGetListOutputDto.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Yi.Framework.ChatHub.Application.Contracts.Dtos
+{
+    public class ChatUserGetListOutputDto
+    {
+        /// <summary>
+        /// 用户id
+        /// </summary>
+        public Guid UserId { get; set; }
+
+        /// <summary>
+        /// 用户名称
+        /// </summary>
+        public string UserName { get; set; }
+
+        /// <summary>
+        /// 用户头像
+        /// </summary>
+        public string UserIcon { get; set; }
+    }
+}

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Yi.Framework.ChatHub.Application.Contracts.csproj

@@ -9,7 +9,6 @@
 
 
   <ItemGroup>
-    <Folder Include="Dtos\" />
     <Folder Include="IServices\" />
   </ItemGroup>
 

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/ChatUserService.cs

@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using FreeRedis;
+using Mapster;
+using Microsoft.Extensions.Options;
+using Volo.Abp.Application.Services;
+using Volo.Abp.Caching;
+using Volo.Abp.DependencyInjection;
+using Yi.Framework.ChatHub.Application.Contracts.Dtos;
+using Yi.Framework.ChatHub.Domain.Shared.Caches;
+
+namespace Yi.Framework.ChatHub.Application.Services
+{
+    public class ChatUserService : ApplicationService
+    {
+        /// <summary>
+        /// 使用懒加载防止报错
+        /// </summary>
+        private IRedisClient RedisClient => LazyServiceProvider.LazyGetRequiredService<IRedisClient>();
+        private string CacheKeyPrefix => LazyServiceProvider.LazyGetRequiredService<IOptions<AbpDistributedCacheOptions>>().Value.KeyPrefix;
+        public async Task<List<ChatUserGetListOutputDto>> GetListAsync()
+        {
+            var key = new ChatOnlineUserCacheKey(CacheKeyPrefix);
+            var cacheUsers = (await RedisClient.HGetAllAsync(key.GetKey())).Select(x => System.Text.Json.JsonSerializer.Deserialize < ChatOnlineUserCacheItem >( x.Value)).ToList();
+            var output = cacheUsers.Adapt<List<ChatUserGetListOutputDto>>();
+            return output;
+        }
+    }
+}

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/SignalRHubs/ChatHub.cs

@@ -0,0 +1,69 @@
+using FreeRedis;
+using Mapster;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.SignalR;
+using Microsoft.Extensions.Options;
+using Volo.Abp.AspNetCore.SignalR;
+using Volo.Abp.Caching;
+using Volo.Abp.DependencyInjection;
+using Yi.Framework.ChatHub.Application.Contracts.Dtos;
+using Yi.Framework.ChatHub.Domain.Shared.Caches;
+using Yi.Framework.ChatHub.Domain.Shared.Consts;
+
+namespace Yi.Framework.ChatHub.Application.SignalRHubs
+{
+    [HubRoute("/hub/chat")]
+    [Authorize]
+    public class ChatHub : AbpHub
+    {
+        /// <summary>
+        /// 使用懒加载防止报错
+        /// </summary>
+        private IRedisClient RedisClient => LazyServiceProvider.LazyGetRequiredService<IRedisClient>();
+        /// <summary>
+        /// 缓存前缀
+        /// </summary>
+        private string CacheKeyPrefix => LazyServiceProvider.LazyGetRequiredService<IOptions<AbpDistributedCacheOptions>>().Value.KeyPrefix;
+        public ChatHub()
+        {
+        }
+
+        /// <summary>
+        /// 用户进入聊天室
+        /// </summary>
+        /// <returns></returns>
+        public override async Task OnConnectedAsync()
+        {
+            var key = new ChatOnlineUserCacheKey(CacheKeyPrefix);
+            var item = new ChatOnlineUserCacheItem()
+            {
+                UserId = CurrentUser.Id!.Value,
+                ClientId = Context.ConnectionId,
+                UserName = CurrentUser.UserName!
+            };
+
+
+            await RedisClient.HSetAsync(key.GetKey(), key.GetField(CurrentUser.Id!.Value), item);
+
+
+            //连接时，还需要去查询用户包含在的群组，将群主全部加入.Todo
+            await Groups.AddToGroupAsync(Context.ConnectionId, ChatConst.AllGroupName);
+            await Clients.All.SendAsync("liveUser", item.Adapt<ChatUserGetListOutputDto>());
+
+
+        }
+
+        /// <summary>
+        /// 用户退出聊天室
+        /// </summary>
+        /// <param name="exception"></param>
+        /// <returns></returns>
+        public async override Task OnDisconnectedAsync(Exception? exception)
+        {
+            var key = new ChatOnlineUserCacheKey(CacheKeyPrefix);
+            await RedisClient.HDelAsync(key.GetKey(), key.GetField(CurrentUser.Id!.Value));
+            await Groups.RemoveFromGroupAsync(Context.ConnectionId, ChatConst.AllGroupName);
+            await Clients.All.SendAsync("offlineUser", CurrentUser.Id!.Value);
+        }
+    }
+}

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Yi.Framework.ChatHub.Application.csproj

@@ -9,7 +9,6 @@
 
   <ItemGroup>
     <Folder Include="Jobs\" />
-    <Folder Include="Services\" />
   </ItemGroup>
 
 </Project>

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Caches/ChatOnlineUserCacheItem.cs

@@ -0,0 +1,65 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Yi.Framework.ChatHub.Domain.Shared.Caches
+{
+    public class ChatOnlineUserCacheItem
+    {
+        public ChatOnlineUserCacheItem()
+        { 
+        
+        
+        }
+        /// <summary>
+        /// 用户id
+        /// </summary>
+        public Guid UserId { get; set; }
+
+        /// <summary>
+        /// 用户名称
+        /// </summary>
+        public string UserName { get; set; }
+
+        /// <summary>
+        /// 用户头像
+        /// </summary>
+        public string UserIcon { get; set; }
+
+        /// <summary>
+        /// 客户端id
+        /// </summary>
+        public string ClientId { get; set; }
+
+        /// <summary>
+        /// 连接时间
+        /// </summary>
+        public DateTime CreationTime { get; }=DateTime.Now;
+
+        public override string ToString()
+        {
+            return System.Text.Json.JsonSerializer.Serialize(this);
+        }
+    }
+
+    public class ChatOnlineUserCacheKey
+    {
+        public string CacheKeyPrefix;
+        public ChatOnlineUserCacheKey(string cacheKeyPrefix )
+        {
+            CacheKeyPrefix=cacheKeyPrefix;
+        }
+
+        public string GetKey()
+        {
+            return $"{CacheKeyPrefix}ChatOnline";
+        }
+
+        public string GetField(Guid userId)
+        {
+            return $"{userId}";
+        }
+    }
+}

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Consts/ChatConst.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Yi.Framework.ChatHub.Domain.Shared.Consts
+{
+    public class ChatConst
+    {
+        public const string AllGroupName = "all";
+    }
+}

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Yi.Framework.ChatHub.Domain.Shared.csproj

@@ -1,8 +1,6 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 	<Import Project="..\..\..\common.props" />
 	<ItemGroup>
-	  <Folder Include="Caches\" />
-	  <Folder Include="Consts\" />
 	  <Folder Include="Enums\" />
 	  <Folder Include="Etos\" />
 	  <Folder Include="Model\" />
@@ -10,5 +8,6 @@
 
 	<ItemGroup>
 		<PackageReference Include="Volo.Abp.Ddd.Domain.Shared" Version="$(AbpVersion)" />
+
 	</ItemGroup>
 </Project>

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Yi.Framework.ChatHub.Domain.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 	<Import Project="..\..\..\common.props" />
 
   <ItemGroup>
@@ -12,8 +12,8 @@
 
 		<PackageReference Include="Volo.Abp.Ddd.Domain" Version="$(AbpVersion)" />
 		<PackageReference Include="Volo.Abp.Caching" Version="$(AbpVersion)" />
-
+		<ProjectReference Include="..\..\..\framework\Yi.Framework.Caching.FreeRedis\Yi.Framework.Caching.FreeRedis.csproj" />
-
+		<ProjectReference Include="..\..\..\framework\Yi.Framework.Mapster\Yi.Framework.Mapster.csproj" />
 	</ItemGroup>
 
 	<ItemGroup>

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/YiFrameworkChatHubDomainModule.cs

@@ -1,4 +1,5 @@
 using Volo.Abp.Domain;
+using Yi.Framework.Caching.FreeRedis;
 using Yi.Framework.ChatHub.Domain.Shared;
 
 
@@ -6,6 +7,7 @@ namespace Yi.Framework.ChatHub.Domain
 {
     [DependsOn(
         typeof(YiFrameworkChatHubDomainSharedModule),
+        typeof(YiFrameworkCachingFreeRedisModule),
 
         typeof(AbpDddDomainModule)
         )]

Yi.Bbs.Vue3/src/apis/chatUserApi.js

@@ -0,0 +1,8 @@
+import request from "@/config/axios/service";
+
+export function getList() {
+  return request({
+    url: "/chat-user",
+    method: "get"
+  });
+}

Yi.Bbs.Vue3/src/hubs/chatHub.js

@@ -0,0 +1,26 @@
+import signalR from "@/utils/signalR";
+import useChatStore from "@/stores/chat";
+
+const receiveMsg = (connection) => {
+    const chatStore = useChatStore();
+    //上线用户
+    connection.on("liveUser", (user) => {
+        chatStore.addUser(user);
+    });
+    //下线用户
+    connection.on("offlineUser", (userId) => {
+        chatStore.delUser(userId);
+    });
+    //接受其他用户消息
+    connection.on("receiveMsg", (type, content) => {
+
+    });
+    //用户状态-正在输入中，无
+    connection.on("userStatus", (type) => {
+
+    });
+};
+export default () => {
+    signalR.start(`chat`, receiveMsg);
+}
+

Yi.Bbs.Vue3/src/layout/ChatLayout.vue

@@ -4,6 +4,14 @@
 <RouterView />
     </div>
 </template>
+<script setup>
+import {onMounted} from "vue";
+import chatHub from "@/hubs/chatHub.js";
+onMounted(async () => {
+    chatHub();
+});
+
+</script>
 <style scoped>
 .chat-body
 {
@@ -14,4 +22,4 @@
     align-content: center;
     flex-wrap: wrap;
 }
-</style>
+</style>

Yi.Bbs.Vue3/src/main.js

@@ -14,7 +14,7 @@ import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import directive from "./directive"; // directive
 import VueLuckyCanvas from '@lucky-canvas/vue'
 
-// import "./permission";
+import "./permission";
 
 (async () => {
   const app = createApp(App);

Yi.Bbs.Vue3/src/stores/chat.js

@@ -0,0 +1,28 @@
+import { defineStore } from "pinia";
+
+const chatStore = defineStore("chat", {
+  state: () => ({
+    userList: [],
+  }),
+//   getters: {
+//     userListData: (state) => state.userList,
+//   },
+  actions: {
+    // 设置在线总数
+    setUserList(value) {
+      this.userList = value;
+    },
+    addUser(user)
+    {
+
+      this.userList.push(user);
+    },
+    delUser(userId)
+    {
+
+      this.userList = this.userList.filter(obj => obj.userId != userId);
+    }
+  },
+});
+
+export default chatStore;

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

@@ -1,6 +1,19 @@
+<script setup>
+import { onMounted, ref,computed } from 'vue';
+import {storeToRefs} from 'pinia'
+import {getList as getChatUserList} from '@/apis/chatUserApi'
+import useChatStore from "@/stores/chat";
+const chatStore=useChatStore();
+const {userList} =storeToRefs(chatStore);
+
+onMounted(async()=>{
+  chatStore.setUserList((await getChatUserList()).data);
+})
+
+</script>
+
 <template>
   <div class="body">
-
     <div class="left">
       <div class="icon">
         <img src="@/assets/chat_images/icon.jpg">
@@ -38,8 +51,8 @@
           <div class="user-div-left">
             <img src="@/assets/chat_images/friendicon.jpg" />
             <div class="user-name-msg">
-              <p class="font-name">橙子</p>
+              <p class="font-name">官方学习交流群</p>
-              <p class="font-msg">现在感觉怎么样</p>
+              <p class="font-msg">冲冲冲</p>
             </div>
           </div>
           <div class=" user-div-right">
@@ -49,17 +62,16 @@
         </div>
 
 
-        <div v-for="i in 100" :key="i" class="user-div">
+        <div v-for="(item,i) in userList" :key="i" class="user-div">
           <div class="user-div-left">
             <img src="@/assets/chat_images/friendicon.jpg" />
             <div class="user-name-msg">
-              <p class="font-name">橙子</p>
+              <p class="font-name">{{item.userName}}</p>
               <p class="font-msg">现在感觉怎么样</p>
             </div>
           </div>
           <div class=" user-div-right">
             10:28
-
           </div>
         </div>
       </div>