- 单对单私聊，网上查了很多资料，都没效果，要么不可取，如果不知道的JWT的，建议你先学会用JWT。有不对的地方望指出，互相学习
我看到有人把一个用户当着一个组，用来单对单私聊，效果是可以的，但是我个人觉得这样不对，我的方法是初始化时，把用户id跟signalr的connectionid存放到一个字典中，私聊时，传入私聊对象的用户Id,然后根据字典获取到该对象的connectionid，发送过去就可以了
1，首先引入signalr,nuget中搜索安装就好，这里不多介绍，Microsoft.AspNetCore.SignalR.Common，不压缩的话就这个包就好
2，startup配置，ConfigureServices中
services.AddSignalR().AddMessagePackProtocol();
Configure中，为了给前端signalr请求加上token,token的定义可能不一样，你们自己定义
app.Use((context, next) =>
{
if (context.Request.Query.TryGetValue("Bearer", out var token))
context.Request.Headers.Add("Authorization", $"Bearer {token}");
return next.Invoke();
});
3，创建ChatHub类，继承Hub,注意要加上 [Authorize]验证特性
namespace AntAdmnin.Hubs
{
[Authorize]
public class ChatHub: Hub
{
//发送消息--发送给所有连接的客户端
//public async Task SendMessage(string msg)
//{
// await Clients.All.SendAsync("ReceiveMessage", msg);
//}
////发送消息--发送给指定用户
//public async Task SendPrivateMessage(string userId, string message)
//{
// await Clients.User(userId).SendAsync("ReceiveMessage", message);
//}
public override async Task OnConnectedAsync()
{
//await Clients.All.OnNotify(new { UserId= Context.User.Identity.Name, Name=Context.User.Identity.Name, ConnectId = Context.ConnectionId });
var userId = Context.User.Identity.Name;
//把上线的用户跟signalr connectionid保存起来
SignalrHelper.UserAndSignalrDc[userId] =Context.ConnectionId;
// 思路 创建一个组时 ，把用户的connectionid跟组名添加进signalr ,如果是持久性保存的组，可初始化时执行一遍组保存
// 例如这里把所有的用户添加到一个叫 company的组 ，要先初始化用户关联字典
foreach (var item in SignalrHelper.UserAndSignalrDc)
{
Groups.AddToGroupAsync(item.Value, "company");
}
await base.OnConnectedAsync();
}
}
}
4，创建一个字典，用来保存用户跟signalr连接id的关联，这应该是第三步才对，在上面signalr连接的时候保存数据
public class SignalrHelper
{
/// <summary>
/// key是用户Id ，value 是connectionid
/// </summary>
public static Dictionary<string, string> UserAndSignalrDc = new Dictionary<string, string>();
}
5，创建一个api控制器，ChatController,我这里用了autofac注入，不用的自己实例化就好，也可以不用控制器，直接请求chathub也是可以的
[Authorize]
[Route("api/[controller]/[action]")]
[ApiController]
public class ChatController : ControllerBase
{
private IHubContext<ChatHub> chatHub;
public ChatController(IHubContext<ChatHub> chatHub)
{
this.chatHub = chatHub;
}
[HttpPost]
public async Task<IActionResult> SendAllMsg(ChatRecordInput input)
{
try
{
chatHub.Clients.Group(input.Receiver.ToString()).SendAsync("ReceiveMessage", input.Msg);
await chatHub.Clients.All.SendAsync("ReceiveMessage", input.Msg);
return Ok(Result.Success());
}
catch (Exception ex)
{
throw ex;
}
}
[HttpPost]
public async Task<IActionResult> SendGroupMsg(ChatRecordInput input)
{
try
{
await chatHub.Clients.Group("company").SendAsync("ReceiveMessage", input.Msg);
return Ok(Result.Success());
}
catch (Exception ex)
{
throw ex;
}
}
[HttpPost]
public async Task<IActionResult> SendUserMsg(ChatRecordInput input)
{
try
{
var connectionId = SignalrHelper.UserAndSignalrDc[input.Receiver.ToString()];
await chatHub.Clients.Clients(connectionId).SendAsync("ReceiveMessage", input.Msg);
return Ok(Result.Success());
}
catch (Exception ex)
{
throw ex;
}
}
后端就是这样了，接下来是前端，用的vue
7, 同样先安装包 ,我这里用的yarn，npm的安装方式我试过好像安装不上的，不知道为什么，安装这个包花了很久，各种安装不上，知道的大佬说一下怎么回事
yarn add @aspnet/signalr
8，页面，ui我用的是ant, 大家可以只参考js部分，前后端的接收方法名得保持一致，这个应该都知道吧
<template>
<div id="components-layout-demo-basic">
<a-layout>
<a-layout-sider>
<a-list itemLayout="horizontal" :dataSource="friends">
<a-list-item
@click="chooseFriend(item.userId)"
class="fItem"
slot="renderItem"
slot-scope="item"
>
<a-list-item-meta
description="Ant Design, a design language for background applications"
>
<p class="nick" slot="title">{{ item.nickName }}</p>
<a-avatar slot="avatar" :src="avatarFilter(item.avart)" />
</a-list-item-meta>
</a-list-item>
</a-list>
</a-layout-sider>
<a-layout>
<a-layout-content>
<div style="height:370px; width:98%; background: #fff; margin:5px; text-align: center;">
<p style="color:red">{{ remsg }}</p>
</div>
</a-layout-content>
<a-layout-footer>
<a-textarea v-model="msg" placeholder="enter message" :rows="4" />
<a-button @click="sendMsg" type="primary">发送信息</a-button>
</a-layout-footer>
</a-layout>
</a-layout>
</div>
</template>
<script>
import { getFriendList, sendMsgPrivate } from '@/api/chat'
import { getImgUrl } from '@/utils/util'
import * as signalR from '@microsoft/signalr'
const signalRMsgPack = require('@aspnet/signalr-protocol-msgpack')
let connection = null
export default {
data () {
return {
friends: [],
sendUserId: '',
msg: '',
remsg: ''
}
},
created () {
this.fetchData()
},
computed: {
avatarFilter () {
return function (avatar) {
return getImgUrl(avatar)
}
}
},
mounted () {
console.log('开始连接' + this.$store.getters.token)
connection = new signalR.HubConnectionBuilder()
.withAutomaticReconnect()
.withHubProtocol(new signalRMsgPack.MessagePackHubProtocol())
.withUrl(process.env.VUE_APP_API_BASE_URL + '/chatHub?Bearer=' + this.$store.getters.token, { accessTokenFactory: () => 'Bearer ' + this.$store.getters.token })
.build()
connection.start().catch(err => alert(err.message))
var _this = this
// 实现Show方法
connection.on('ReceiveMessage', function (username, message) {
_this.remsg = _this.remsg + '<br>' + username + ':' + message
})
},
methods: {
fetchData () {
getFriendList().then(response => {
console.log(response)
this.friends = response
})
},
sendMsg () {
if (this.msg.trim() === '') {
alert('不能发送空白消息')
return
}
var para = {
receiver: this.sendUserId,
msg: this.msg
}
console.log('私聊')
sendMsgPrivate(para).then(response => {})
// 调用后端方法 SendMsg 传入参数
// connection.invoke("SendMsg", this.user, this.msg);
this.msg = ''
},
chooseFriend (userId) {
this.sendUserId = userId
}
}
}
</script>
<style>
#components-layout-demo-basic {
text-align: center;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
background: #7dbcea;
color: #fff;
height: 100px;
}
#components-layout-demo-basic .ant-layout-footer {
line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
background: #3ba0e9;
color: #fff;
line-height: 500px;
}
#components-layout-demo-basic .ant-layout-content {
background: rgba(16, 142, 233, 1);
color: #fff;
min-height: 400px;
line-height: 120px;
}
#components-layout-demo-basic > .ant-layout {
margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
margin: 0;
}
.nick {
color: red;
}
.fItem {
margin-top: 5px;
}
</style>