From 6aedff75f15e52954e25d5669c6b015d3ee23adb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <454313500@qq.com>
Date: Sat, 6 Apr 2024 18:28:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dtos/GroupMessageInputDto.cs              |  16 +
 .../Dtos/PersonalMessageInputDto.cs           |  21 ++
 ...ework.ChatHub.Application.Contracts.csproj |   2 +-
 .../Services/ChatMessageService.cs            |  43 +++
 .../Services/ChatUserService.cs               |  30 +-
 .../Consts/ChatConst.cs                       |   3 +
 .../Model/ChatUserModel.cs}                   |   5 +-
 .../Model/MessageContext.cs                   |  51 +++
 .../Yi.Framework.ChatHub.Domain.Shared.csproj |   1 -
 .../Managers/UserMessageManager.cs            |  66 ++++
 .../SignalRHubs/ChatCenterHub.cs}             |  11 +-
 .../Yi.Framework.ChatHub.Domain.csproj        |   2 -
 Yi.Bbs.Vue3/src/apis/chatMessageApi.js        |  18 +
 Yi.Bbs.Vue3/src/assets/chat_images/yilogo.png | Bin 0 -> 10097 bytes
 Yi.Bbs.Vue3/src/hubs/chatHub.js               |   2 +-
 Yi.Bbs.Vue3/src/stores/chat.js                |  27 +-
 Yi.Bbs.Vue3/src/views/chathub/Index.vue       | 319 ++++++++++++++----
 17 files changed, 507 insertions(+), 110 deletions(-)
 create mode 100644 Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/GroupMessageInputDto.cs
 create mode 100644 Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/PersonalMessageInputDto.cs
 create mode 100644 Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/ChatMessageService.cs
 rename Yi.Abp.Net8/module/chat-hub/{Yi.Framework.ChatHub.Application.Contracts/Dtos/ChatUserGetListOutputDto.cs => Yi.Framework.ChatHub.Domain.Shared/Model/ChatUserModel.cs} (82%)
 create mode 100644 Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Model/MessageContext.cs
 create mode 100644 Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Managers/UserMessageManager.cs
 rename Yi.Abp.Net8/module/chat-hub/{Yi.Framework.ChatHub.Application/SignalRHubs/ChatHub.cs => Yi.Framework.ChatHub.Domain/SignalRHubs/ChatCenterHub.cs} (90%)
 create mode 100644 Yi.Bbs.Vue3/src/apis/chatMessageApi.js
 create mode 100644 Yi.Bbs.Vue3/src/assets/chat_images/yilogo.png

diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/GroupMessageInputDto.cs b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/GroupMessageInputDto.cs
new file mode 100644
index 00000000..3231d7bb
--- /dev/null
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/GroupMessageInputDto.cs
@@ -0,0 +1,16 @@
+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 GroupMessageInputDto
+    {
+        /// <summary>
+        /// 消息内容
+        /// </summary>
+        public string Content { get; set; }
+    }
+}
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/PersonalMessageInputDto.cs b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/PersonalMessageInputDto.cs
new file mode 100644
index 00000000..860faccc
--- /dev/null
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/PersonalMessageInputDto.cs
@@ -0,0 +1,21 @@
+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 PersonalMessageInputDto
+    {
+        /// <summary>
+        /// 用户id
+        /// </summary>
+        public Guid UserId { get; set; }
+
+        /// <summary>
+        /// 消息内容
+        /// </summary>
+        public string Content { get; set; }
+    }
+}
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Yi.Framework.ChatHub.Application.Contracts.csproj b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Yi.Framework.ChatHub.Application.Contracts.csproj
index 8df46007..0e4dce4a 100644
--- a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Yi.Framework.ChatHub.Application.Contracts.csproj
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Yi.Framework.ChatHub.Application.Contracts.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 	<Import Project="..\..\..\common.props" />
 
 
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/ChatMessageService.cs b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/ChatMessageService.cs
new file mode 100644
index 00000000..0bcddfe1
--- /dev/null
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/ChatMessageService.cs
@@ -0,0 +1,43 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.Application.Services;
+using Yi.Framework.ChatHub.Application.Contracts.Dtos;
+using Yi.Framework.ChatHub.Domain.Managers;
+using Yi.Framework.ChatHub.Domain.Shared.Model;
+
+namespace Yi.Framework.ChatHub.Application.Services
+{
+    public class ChatMessageService : ApplicationService
+    {
+        private UserMessageManager _userMessageManager;
+        public ChatMessageService(UserMessageManager userMessageManager) { _userMessageManager = userMessageManager; }
+        /// <summary>
+        /// 发送个人消息
+        /// </summary>
+        /// <returns></returns>
+        [HttpPost("chat-message/personal")]
+        [Authorize]
+        public async Task SendPersonalMessageAsync(PersonalMessageInputDto input)
+        {
+            await _userMessageManager.SendMessageAsync(MessageContext.CreatePersonal(input.Content, input.UserId,CurrentUser.Id!.Value)); ;
+        }
+
+
+        /// <summary>
+        /// 发送群组消息
+        /// </summary>
+        /// <returns></returns>
+        [HttpPost("chat-message/group")]
+        [Authorize]
+        public async Task SendGroupMessageAsync(GroupMessageInputDto input)
+        {
+            await _userMessageManager.SendMessageAsync(MessageContext.CreateAll(input.Content, CurrentUser.Id!.Value)); ;
+
+        }
+    }
+}
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/ChatUserService.cs b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/ChatUserService.cs
index 92da73da..7aea415b 100644
--- a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/ChatUserService.cs
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/ChatUserService.cs
@@ -1,31 +1,19 @@
-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 Mapster;
 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;
+using Yi.Framework.ChatHub.Domain.Managers;
+using Yi.Framework.ChatHub.Domain.Shared.Model;
 
 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()
+        private UserMessageManager _messageManager;
+        public ChatUserService(UserMessageManager messageManager) { _messageManager = messageManager; }
+
+        public async Task<List<ChatUserModel>> 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>>();
+            var userList = await _messageManager.GetAllUserAsync();
+            var output = userList.Adapt<List<ChatUserModel>>();
             return output;
         }
     }
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Consts/ChatConst.cs b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Consts/ChatConst.cs
index f059a53a..9fbcc413 100644
--- a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Consts/ChatConst.cs
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Consts/ChatConst.cs
@@ -9,5 +9,8 @@ namespace Yi.Framework.ChatHub.Domain.Shared.Consts
     public class ChatConst
     {
         public const string AllGroupName = "all";
+
+        public const string ClientActionReceiveMsg = "receiveMsg";
+        public const string ClientActionUserStatus = "userStatus";
     }
 }
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/ChatUserGetListOutputDto.cs b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Model/ChatUserModel.cs
similarity index 82%
rename from Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/ChatUserGetListOutputDto.cs
rename to Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Model/ChatUserModel.cs
index 3980460f..698e2d44 100644
--- a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application.Contracts/Dtos/ChatUserGetListOutputDto.cs
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Model/ChatUserModel.cs
@@ -4,9 +4,9 @@ using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 
-namespace Yi.Framework.ChatHub.Application.Contracts.Dtos
+namespace Yi.Framework.ChatHub.Domain.Shared.Model
 {
-    public class ChatUserGetListOutputDto
+    public class ChatUserModel
     {
         /// <summary>
         /// 用户id
@@ -22,5 +22,6 @@ namespace Yi.Framework.ChatHub.Application.Contracts.Dtos
         /// 用户头像
         /// </summary>
         public string UserIcon { get; set; }
+
     }
 }
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Model/MessageContext.cs b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Model/MessageContext.cs
new file mode 100644
index 00000000..6cc75c70
--- /dev/null
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Model/MessageContext.cs
@@ -0,0 +1,51 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace Yi.Framework.ChatHub.Domain.Shared.Model
+{
+    public class MessageContext
+    {
+        public static MessageContext CreatePersonal(string content, Guid userId,Guid sendUserId)
+        {
+            return new MessageContext() { MessageType = MessageType.Personal, Content = content, ReceiveId = userId ,SendUserId= sendUserId };
+        }
+
+        public static MessageContext CreateAll(string content, Guid sendUserId)
+        {
+            return new MessageContext() { MessageType = MessageType.All, Content = content, SendUserId = sendUserId };
+        }
+
+
+        /// <summary>
+        /// 消息类型
+        /// </summary>
+        [JsonConverter(typeof(JsonStringEnumConverter))]
+        public MessageType MessageType { get; set; }
+        /// <summary>
+        /// 接收者(用户id、群组id)
+        /// </summary>
+        public Guid? ReceiveId { get; set; }
+
+        /// <summary>
+        /// 发送者的用户id
+        /// </summary>
+        public Guid SendUserId { get; set; }
+        /// <summary>
+        /// 消息内容
+        /// </summary>
+        public string Content { get; set; }
+
+    }
+
+    public enum MessageType
+    {
+
+        Personal,
+        Group,
+        All
+    }
+}
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Yi.Framework.ChatHub.Domain.Shared.csproj b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Yi.Framework.ChatHub.Domain.Shared.csproj
index 95fbf7f0..f5a0fbe6 100644
--- a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Yi.Framework.ChatHub.Domain.Shared.csproj
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain.Shared/Yi.Framework.ChatHub.Domain.Shared.csproj
@@ -3,7 +3,6 @@
 	<ItemGroup>
 	  <Folder Include="Enums\" />
 	  <Folder Include="Etos\" />
-	  <Folder Include="Model\" />
 	</ItemGroup>
 
 	<ItemGroup>
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Managers/UserMessageManager.cs b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Managers/UserMessageManager.cs
new file mode 100644
index 00000000..eba80b5e
--- /dev/null
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Managers/UserMessageManager.cs
@@ -0,0 +1,66 @@
+using FreeRedis;
+using Mapster;
+using Microsoft.AspNetCore.SignalR;
+using Microsoft.Extensions.Options;
+using Volo.Abp.Caching;
+using Volo.Abp.Domain.Services;
+using Yi.Framework.ChatHub.Domain.Shared.Caches;
+using Yi.Framework.ChatHub.Domain.Shared.Consts;
+using Yi.Framework.ChatHub.Domain.Shared.Model;
+using Yi.Framework.ChatHub.Domain.SignalRHubs;
+
+namespace Yi.Framework.ChatHub.Domain.Managers
+{
+    public class UserMessageManager : DomainService
+    {
+        private IHubContext<ChatCenterHub> _hubContext;
+        public UserMessageManager(IHubContext<ChatCenterHub> hubContext)
+        {
+            _hubContext = hubContext;
+        }
+        /// <summary>
+        /// 使用懒加载防止报错
+        /// </summary>
+        private IRedisClient RedisClient => LazyServiceProvider.LazyGetRequiredService<IRedisClient>();
+        private string CacheKeyPrefix => LazyServiceProvider.LazyGetRequiredService<IOptions<AbpDistributedCacheOptions>>().Value.KeyPrefix;
+
+        public async Task SendMessageAsync(MessageContext context)
+        {
+            switch (context.MessageType)
+            {
+                case MessageType.Personal:
+                    var userModel =await GetUserAsync(context.ReceiveId.Value);
+                    if (userModel is not null)
+                    {
+                        await _hubContext.Clients.Client(userModel.ClientId).SendAsync(ChatConst.ClientActionReceiveMsg, context.MessageType, context);
+                    }
+                    break;
+                case MessageType.Group:
+                    throw new NotImplementedException();
+                    break;
+                case MessageType.All:
+                    await _hubContext.Clients.All.SendAsync(ChatConst.ClientActionReceiveMsg, context.MessageType, context);
+                    break;
+                default:
+                    break;
+            }
+
+        }
+
+        public async Task<List<ChatOnlineUserCacheItem>> GetAllUserAsync()
+        {
+            var key = new ChatOnlineUserCacheKey(CacheKeyPrefix);
+            var cacheUsers = (await RedisClient.HGetAllAsync(key.GetKey())).Select(x => System.Text.Json.JsonSerializer.Deserialize<ChatOnlineUserCacheItem>(x.Value)).ToList();
+            return cacheUsers;
+        }
+
+        public async Task<ChatOnlineUserCacheItem?> GetUserAsync(Guid userId)
+        {
+            var key = new ChatOnlineUserCacheKey(CacheKeyPrefix);
+            var cacheUser = System.Text.Json.JsonSerializer.Deserialize < ChatOnlineUserCacheItem >( await RedisClient.HGetAsync(key.GetKey(), key.GetField(userId)));
+            return cacheUser;
+        }
+    }
+
+
+}
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/SignalRHubs/ChatHub.cs b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/SignalRHubs/ChatCenterHub.cs
similarity index 90%
rename from Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/SignalRHubs/ChatHub.cs
rename to Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/SignalRHubs/ChatCenterHub.cs
index 4dc09c99..c216cad4 100644
--- a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/SignalRHubs/ChatHub.cs
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/SignalRHubs/ChatCenterHub.cs
@@ -5,16 +5,15 @@ 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;
+using Yi.Framework.ChatHub.Domain.Shared.Model;
 
-namespace Yi.Framework.ChatHub.Application.SignalRHubs
+namespace Yi.Framework.ChatHub.Domain.SignalRHubs
 {
     [HubRoute("/hub/chat")]
     [Authorize]
-    public class ChatHub : AbpHub
+    public class ChatCenterHub : AbpHub
     {
         /// <summary>
         /// 使用懒加载防止报错
@@ -24,7 +23,7 @@ namespace Yi.Framework.ChatHub.Application.SignalRHubs
         /// 缓存前缀
         /// </summary>
         private string CacheKeyPrefix => LazyServiceProvider.LazyGetRequiredService<IOptions<AbpDistributedCacheOptions>>().Value.KeyPrefix;
-        public ChatHub()
+        public ChatCenterHub()
         {
         }
 
@@ -48,7 +47,7 @@ namespace Yi.Framework.ChatHub.Application.SignalRHubs
 
             //连接时，还需要去查询用户包含在的群组，将群主全部加入.Todo
             await Groups.AddToGroupAsync(Context.ConnectionId, ChatConst.AllGroupName);
-            await Clients.All.SendAsync("liveUser", item.Adapt<ChatUserGetListOutputDto>());
+            await Clients.All.SendAsync("liveUser", item.Adapt<ChatUserModel>());
 
 
         }
diff --git a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Yi.Framework.ChatHub.Domain.csproj b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Yi.Framework.ChatHub.Domain.csproj
index d478ffca..665f37cf 100644
--- a/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Yi.Framework.ChatHub.Domain.csproj
+++ b/Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Yi.Framework.ChatHub.Domain.csproj
@@ -7,7 +7,6 @@
 
 	<ItemGroup>
 
-
 		<PackageReference Include="Volo.Abp.AspNetCore.SignalR" Version="$(AbpVersion)" />
 
 		<PackageReference Include="Volo.Abp.Ddd.Domain" Version="$(AbpVersion)" />
@@ -19,7 +18,6 @@
 	<ItemGroup>
     <Folder Include="Entities\" />
     <Folder Include="EventHandlers\" />
-    <Folder Include="Managers\" />
     <Folder Include="Repositories\" />
   </ItemGroup>
 
diff --git a/Yi.Bbs.Vue3/src/apis/chatMessageApi.js b/Yi.Bbs.Vue3/src/apis/chatMessageApi.js
new file mode 100644
index 00000000..3d820226
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/apis/chatMessageApi.js
@@ -0,0 +1,18 @@
+import request from "@/config/axios/service";
+
+export function sendPersonalMessage(data) {
+  return request({
+    url: "/chat-message/personal",
+    method: "post",
+    data
+  });
+}
+
+export function sendGroupMessage(data) {
+    return request({
+      url: "/chat-message/group",
+      method: "post",
+      data
+    });
+  }
+  
\ No newline at end of file
diff --git a/Yi.Bbs.Vue3/src/assets/chat_images/yilogo.png b/Yi.Bbs.Vue3/src/assets/chat_images/yilogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..226b005a8e55f479fdcb393204eb3df269ccd444
GIT binary patch
literal 10097
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

literal 0
HcmV?d00001

diff --git a/Yi.Bbs.Vue3/src/hubs/chatHub.js b/Yi.Bbs.Vue3/src/hubs/chatHub.js
index 6f4d4302..e069b672 100644
--- a/Yi.Bbs.Vue3/src/hubs/chatHub.js
+++ b/Yi.Bbs.Vue3/src/hubs/chatHub.js
@@ -13,7 +13,7 @@ const receiveMsg = (connection) => {
     });
     //接受其他用户消息
     connection.on("receiveMsg", (type, content) => {
-
+        chatStore.addMsg(content);
     });
     //用户状态-正在输入中，无
     connection.on("userStatus", (type) => {
diff --git a/Yi.Bbs.Vue3/src/stores/chat.js b/Yi.Bbs.Vue3/src/stores/chat.js
index 16d779f9..803a3dbf 100644
--- a/Yi.Bbs.Vue3/src/stores/chat.js
+++ b/Yi.Bbs.Vue3/src/stores/chat.js
@@ -1,25 +1,28 @@
 import { defineStore } from "pinia";
-
 const chatStore = defineStore("chat", {
   state: () => ({
     userList: [],
+    msgList: []
   }),
-//   getters: {
-//     userListData: (state) => state.userList,
-//   },
-  actions: {
-    // 设置在线总数
+    getters: {
+      allMsgContext: (state) => state.msgList.filter(x=>x.messageType=="All"),
+      personalMsgContext: (state) => state.msgList.filter(x=>x.messageType=="Personal"),
+    },
+  actions:
+  {
+    setMsgList(value) {
+      this.msgList = value;
+    },
+    addMsg(msg) {
+      this.msgList.push(msg);
+    },
     setUserList(value) {
       this.userList = value;
     },
-    addUser(user)
-    {
-
+    addUser(user) {
       this.userList.push(user);
     },
-    delUser(userId)
-    {
-
+    delUser(userId) {
       this.userList = this.userList.filter(obj => obj.userId != userId);
     }
   },
diff --git a/Yi.Bbs.Vue3/src/views/chathub/Index.vue b/Yi.Bbs.Vue3/src/views/chathub/Index.vue
index 1afcf60c..6884650d 100644
--- a/Yi.Bbs.Vue3/src/views/chathub/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/chathub/Index.vue
@@ -1,18 +1,162 @@
 <script setup>
-import { onMounted, ref,computed } from 'vue';
-import {storeToRefs} from 'pinia'
-import {getList as getChatUserList} from '@/apis/chatUserApi'
+import { onMounted, ref, computed } from 'vue';
+import { storeToRefs } from 'pinia'
+import { getList as getChatUserList } from '@/apis/chatUserApi'
+import { sendPersonalMessage,sendGroupMessage } from '@/apis/chatMessageApi'
 import useChatStore from "@/stores/chat";
-const chatStore=useChatStore();
-const {userList} =storeToRefs(chatStore);
+import useUserStore from "@/stores/user";
 
-onMounted(async()=>{
+//聊天存储
+const chatStore = useChatStore();
+const { userList } = storeToRefs(chatStore);
+
+//用户信息
+const userStore = useUserStore();
+//发送消息是否为空
+const msgIsNullShow=ref(false)
+//当前选择用户
+const currentSelectUser = ref(null);
+//当前输入框的值
+const currentInputValue = ref("");
+//临时存储的输入框，根据用户id及组name、all组为key，data为value
+const inputListDataStore = ref([{ key: "all", value: "" }]);
+
+//当前聊天框显示的消息
+const currentMsgContext = computed(() => {
+  if (selectIsAll()) {
+    return chatStore.allMsgContext;
+  }
+  else {
+    return chatStore.personalMsgContext.filter(x => {
+      //两个条件
+      //接收用户者id为对面id（我发给他）
+      //或者，发送用户id为对面（他发给我）
+      return (x.receiveId == currentSelectUser.value.userId && x.sendUserId == userStore.id)||
+      (x.sendUserId == currentSelectUser.value.userId && x.receiveId == userStore.id);
+    });
+  }
+});
+
+//当前聊天框显示的名称
+const currentHeaderName = computed(() => {
+  return currentSelectUser.value == null ? "官方学习交流群" : currentSelectUser.value.userName;
+});
+const currentUserItem = computed(() => {
+  return userList.value.filter(x=>x.userId!=useUserStore().id)
+});
+
+
+//初始化
+onMounted(async () => {
   chatStore.setUserList((await getChatUserList()).data);
 })
 
+/*-----方法-----*/
+//当前选择的是否为全部
+const selectIsAll = () => {
+  return currentSelectUser.value == null;
+};
+
+//输入框的值被更改
+const changeInputValue = (inputValue) => {
+  currentInputValue.value = inputValue;
+  let index = -1;
+  let findKey = currentSelectUser.value?.userId
+  if (selectIsAll()) {
+    findKey = 'all'
+  }
+  index = inputListDataStore.value.findIndex(obj => obj.key == findKey);
+  inputListDataStore.value[index].value = currentInputValue.value;
+}
+//绑定的input改变事件
+const updateInputValue = (event) => {
+  changeInputValue(event.target.value);
+}
+//获取输入框的值
+const getCurrentInputValue = () => {
+
+  if (selectIsAll()) {
+    return inputListDataStore.value.filter(x => x.key == "all")[0].value;
+  } else {
+    //如果不存在初始存储值
+    if (!inputListDataStore.value.some(x => x.key == currentSelectUser.value.userId)) {
+      inputListDataStore.value.push({ key: currentSelectUser.value.userId, value: "" });
+      return "";
+    }
+    return inputListDataStore.value.filter(x => x.key == currentSelectUser.value.userId)[0].value;
+  }
+};
+
+//点击用户列表,
+const onclickUserItem = (userInfo, isAllItem) => {
+  if (isAllItem) {
+    currentSelectUser.value = null;
+  }
+  else {
+    currentSelectUser.value = userInfo;
+  }
+  //填充临时存储的输入框
+  var value = getCurrentInputValue();
+  //更新当前的输入框
+  changeInputValue(value);
+}
+
+//点击发送按钮
+const onclickSendMsg = () => {
+  console.log(currentInputValue.value ,"currentInputValue.value");
+if(currentInputValue.value=="")
+{
+  msgIsNullShow.value=true;
+  setTimeout(() => {
+      // 这里写上你想要3秒后执行的代码
+      msgIsNullShow.value=false;
+    }, 3000);
+  return;
+}
+
+  if (selectIsAll()) {
+    onclickSendGroupMsg("all", currentInputValue.value);
+  }
+  else {
+    onclickSendPersonalMsg(currentSelectUser.value.userId, currentInputValue.value);
+  }
+  changeInputValue("");
+}
+
+//点击发送个人消息
+const onclickSendPersonalMsg = (receiveId, msg) => {
+  //添加到本地存储
+  chatStore.addMsg({
+    messageType: "Personal",
+    sendUserId: userStore.id,
+    content: msg,
+    receiveId: receiveId
+  });
+  sendPersonalMessage({userId:receiveId,content:msg});
+  //调用接口发送消息
+}
+
+//点击发送群组消息按钮
+const onclickSendGroupMsg = (groupName, msg) => {
+  //组还需区分是否给全部成员组
+  if (selectIsAll) {
+    //添加到本地存储,不需要，因为广播自己能够接收
+    // chatStore.addMsg({
+    //   messageType: "All",
+    //   sendUserId: userStore.id,
+    //   content: msg
+    // });
+    //调用接口发送消息
+    sendGroupMessage({content:msg});
+  }
+  else {
+    alert("暂未实现");
+  }
+}
 </script>
 
 <template>
+
   <div class="body">
     <div class="left">
       <div class="icon">
@@ -47,9 +191,10 @@ onMounted(async()=>{
         </div>
       </div>
       <div class="user-list">
-        <div class="user-div" style="background-color: #C8C8CA;">
+        <div class="user-div" @click="onclickUserItem(null, true)"
+          :class="{ 'select-user-item': currentSelectUser == null }">
           <div class="user-div-left">
-            <img src="@/assets/chat_images/friendicon.jpg" />
+            <img src="@/assets/chat_images/yilogo.png" />
             <div class="user-name-msg">
               <p class="font-name">官方学习交流群</p>
               <p class="font-msg">冲冲冲</p>
@@ -62,11 +207,12 @@ onMounted(async()=>{
         </div>
 
 
-        <div v-for="(item,i) in userList" :key="i" class="user-div">
+        <div v-for="(item, i) in currentUserItem" :key="i" @click="onclickUserItem(item, false)" class="user-div"
+          :class="{ 'select-user-item': currentSelectUser?.userId == item.userId }">
           <div class="user-div-left">
             <img src="@/assets/chat_images/friendicon.jpg" />
             <div class="user-name-msg">
-              <p class="font-name">{{item.userName}}</p>
+              <p class="font-name">{{ item.userName }}</p>
               <p class="font-msg">现在感觉怎么样</p>
             </div>
           </div>
@@ -79,7 +225,7 @@ onMounted(async()=>{
 
     <div class="right">
       <div class="header">
-        <div class="header-left">橙子</div>
+        <div class="header-left">{{ currentHeaderName }}</div>
         <div class="header-right">
           <div>
             <ul>
@@ -96,48 +242,53 @@ onMounted(async()=>{
 
       </div>
       <div class="content">
-        <div v-for="i in 100" :key="i">
-          <div class="content-others content-common">
-            <img src="@/assets/chat_images/friendicon.jpg" />
-            <div class="content-others-msg content-msg-common  ">感觉还可以</div>
-          </div>
-          <div class="content-myself content-common">
-            <div class="content-myself-msg content-msg-common ">现在感觉怎么样</div>
+        <div v-for="(item, i) in currentMsgContext" :key="i">
+          <div class="content-myself content-common" v-if="item.sendUserId == userStore.id">
+            <div class="content-myself-msg content-msg-common ">{{ item.content }}</div>
             <img src="@/assets/chat_images/icon.jpg" />
           </div>
 
+          <div class="content-others content-common" v-else>
+            <img src="@/assets/chat_images/friendicon.jpg" />
+            <div class="content-others-msg content-msg-common  ">{{ item.content }}</div>
+          </div>
+
         </div>
 
       </div>
       <div class="bottom">
         <div class="bottom-tool">
 
-            <ul class="ul-left">
-              <li><img src="@/assets/chat_images/emoji.png" /></li>
-              <li><img src="@/assets/chat_images/sendFile.png" /></li>
-              <li><img src="@/assets/chat_images/screenshot.png" /></li>
-              <li><img src="@/assets/chat_images/chatHistory.png" /></li>
-            </ul>
+          <ul class="ul-left">
+            <li><img src="@/assets/chat_images/emoji.png" /></li>
+            <li><img src="@/assets/chat_images/sendFile.png" /></li>
+            <li><img src="@/assets/chat_images/screenshot.png" /></li>
+            <li><img src="@/assets/chat_images/chatHistory.png" /></li>
+          </ul>
 
-            <ul class="ul-right">
-              <li><img src="@/assets/chat_images/landline.png" /></li>
-              <li><img src="@/assets/chat_images/videoChat.png" /></li>
-            </ul>
-          
-            </div>
-            <div class="bottom-input" contenteditable="true">
+          <ul class="ul-right">
+            <li><img src="@/assets/chat_images/landline.png" /></li>
+            <li><img src="@/assets/chat_images/videoChat.png" /></li>
+          </ul>
 
-            </div>
+        </div>
+        <!-- <div class="bottom-input" contenteditable="true" @input="updateInputValue"> -->
+        <!-- <div class="bottom-input" contenteditable="true"  @input="updateInputValue">
 
-            <div class="bottom-send">
-              <button>
-                发送(S)
-              </button>
+        </div> -->
+        <textarea class="bottom-input" v-model="currentInputValue" @input="updateInputValue" @keyup.enter="onclickSendMsg()">
+
+</textarea>
+        <div class="bottom-send">
+          <div class="msg-null" v-show="msgIsNullShow">不能发送空白信息</div>
+          <button @click="onclickSendMsg()">
+            发送(S)
+          </button>
 
-            </div>
-          </div>
         </div>
       </div>
+    </div>
+  </div>
 </template>
 <style scoped lang="scss">
 .body {
@@ -148,6 +299,10 @@ onMounted(async()=>{
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
 }
 
+.select-user-item {
+  background-color: #C8C8CA !important;
+}
+
 .left {
   background-color: #2a2a2a;
   width: 70px;
@@ -344,46 +499,52 @@ onMounted(async()=>{
 
     &-tool {
       display: flex;
-    justify-content: space-between;
+      justify-content: space-between;
       height: 22px;
+
       .ul-left {
-          display: flex;
+        display: flex;
 
-          li {
-            width: 22px;
-            height: 22px;
-            margin-right: 20px;
-          }
-
-          img {
-            width: 100%;
-            height: 100%;
-          }
+        li {
+          width: 22px;
+          height: 22px;
+          margin-right: 20px;
         }
-   
-      .ul-right {
-          display: flex;
 
-          li {
-            width: 22px;
-            height: 22px;
-            margin-right: 20px;
-          }
-
-          img {
-            width: 100%;
-            height: 100%;
-          }
+        img {
+          width: 100%;
+          height: 100%;
         }
-    
       }
 
+      .ul-right {
+        display: flex;
+
+        li {
+          width: 22px;
+          height: 22px;
+          margin-right: 20px;
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+    }
+
     &-input {
+      font-family: "Microsoft YaHei", sans-serif;
       height: 70px;
       width: 100%;
       overflow-y: auto;
       padding: 10px 0;
       font-size: 18px;
+      background: #F7F7F7;
+      border: none;
+      resize: none;
+      outline: none;
     }
 
     &-send {
@@ -445,6 +606,7 @@ onMounted(async()=>{
 
 .content-common {
   display: flex;
+  margin-bottom: 18px;
 
   img {
     height: 45px;
@@ -526,5 +688,34 @@ onMounted(async()=>{
   border-bottom: 10px solid transparent;
   border-right: 10px solid #FFFFFF;
 
+}
+.msg-null{
+  width: 140px;
+    height: 41px;
+    background-color: #FFFFFF;
+    position: relative;
+    left: 132px;
+    bottom: 60px;
+    border-radius: 5px;
+    // border: 2px solid #E5E5E5;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    font-size: 14px;
+}
+.msg-null:after {
+  /* 箭头靠下边 */
+  content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 40px;
+    left: 80px;
+    border-top: 10px solid #FFFFFF;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-left: 10px solid transparent;
+
 }
 </style>
\ No newline at end of file