feat: 对接chathub用户列表
This commit is contained in:
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,6 @@
|
||||
|
||||
|
||||
<ItemGroup>
|
||||
<Folder Include="Dtos\" />
|
||||
<Folder Include="IServices\" />
|
||||
</ItemGroup>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,6 @@
|
||||
|
||||
<ItemGroup>
|
||||
<Folder Include="Jobs\" />
|
||||
<Folder Include="Services\" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
@@ -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}";
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)
|
||||
)]
|
||||
|
||||
8
Yi.Bbs.Vue3/src/apis/chatUserApi.js
Normal file
8
Yi.Bbs.Vue3/src/apis/chatUserApi.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import request from "@/config/axios/service";
|
||||
|
||||
export function getList() {
|
||||
return request({
|
||||
url: "/chat-user",
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
26
Yi.Bbs.Vue3/src/hubs/chatHub.js
Normal file
26
Yi.Bbs.Vue3/src/hubs/chatHub.js
Normal 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);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
28
Yi.Bbs.Vue3/src/stores/chat.js
Normal file
28
Yi.Bbs.Vue3/src/stores/chat.js
Normal 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;
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user