feat: 对接chathub用户列表

This commit is contained in:
橙子
2024-04-04 19:28:18 +08:00
parent b57d56f317
commit 43b4032bbb
16 changed files with 302 additions and 16 deletions

View File

@@ -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; }
}
}

View File

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

View File

@@ -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;
}
}
}

View File

@@ -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);
}
}
}

View File

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

View File

@@ -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}";
}
}
}

View File

@@ -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";
}
}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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)
)]

View File

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

View File

@@ -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);
}

View File

@@ -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>

View File

@@ -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);

View File

@@ -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;

View File

@@ -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-msg">现在感觉怎么样</p>
<p class="font-name">官方学习交流群</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>