附源码 vue3.0＋.NET6实现聊天室(实时聊天SignalR)

参考文章
搭建文章
gitte源码
在线体验
可以注册两个号来测试
演示图：
一. 整体介绍
介绍一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。
内容有：
①：Hub模型的方法介绍
②：服务器端代码介绍
③：前端vue3 安装并调用后端方法
④：聊天室样例
整体流程：
1、进入网站 -> 调用连接的方法
2、与好友发送消息 -> 调用的自定义方法
前端通过，内置方法 .()去请求接口
3、监听接受方法（渲染消息）
通过 .().on("接受方法") 这个函数
然后将接受的消息存放到数组里
再 v-for 将数据渲染出来
4、退出浏览器或退出登录，触发 “连接终止时调用” ()
修改登录状态为离线

文章插图

/// /// 连接终止时调用 。/// /// public override Task OnDisconnectedAsync(Exception? exception){var httpContext = Context.GetHttpContext();var username = httpContext.Request.Cookies["username"];if (username == null){throw new Exception("系统异常连接失败");}// 修改用户登录状态_ChatLoginService.Update(s => s.ChatUserName == username,f => new ChatUser{Status = 0});var user = clientusers.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();判断用户是否存在，否则添加集合if (user != null){clientusers.Remove(user);}return base.OnDisconnectedAsync(exception);}

在文件夹ARW-vue-main\src\views\tool\chat 中的 index.vue 是简易版的demo
可以先把这个搞明白，后面会很好理解
这个对应的Hub 是
二. Hub模型的方法介绍
继承成Hub类，所以可以三个方法：
(1).：连接成功时调用
(2).：连接断开时调用
(3).：重连时调用
我这里用于修改用户登录状态在线人数列表...
使用对象进行调用，对象下的属性和方法有：
(1).向指定人发送，一对一：( )
(2). 向某个组发送：Group()
(3). 进入某个房间：Group.(, )
三.服务器端代码介绍
好友聊天思路详细讲解：

/// /// 好友发送信息/// /// /// /// public async Task SendFriendsChat(string selfConnectionId, string connectId, string sender, string receiver, string message){if (string.IsNullOrEmpty(connectId)){throw new CustomException("好友不在线，请留言！");}// 服务端主动调用客户端的方法// 向指定用户(connectId)发送指定消息// 监听接受方法("ReceiveMessage")来获取消息 -> ( new { sender, receiver, message } )await Clients.Client(connectId).SendAsync("ReceiveMessage", new { sender, receiver, message });await Clients.Client(selfConnectionId).SendAsync("ReceiveMessage", new { sender, receiver, message });}

我们直接手撕源码，先看这个方法的参数一共有5个
参数说明： -> 在连接时会给该用户生成一个连接Id，并存在在线用户列表里
后面统称 "连接ID"
1、 -> 自己的连接ID
2、 -> 对方的连接ID
3、 -> 发送者的用户GUID
4、-> 接收者的用户GUID
5、 -> 发送的消息
首先我们给发送消息，必须先知道对方的
才能够调用 .().(.......)
Q：为什么需要自己的连接ID呢？
A：因为给对方发送，对方能够接收到消息，但自己是接收不到的，所以这里要给自己也发一份。因而需要传自己的连接ID 。

文章插图
Q：如何区分是谁发送的消息？
A：这里我用的是接收者和发送者做的判断，这里需要捋一捋思路，所以这里要传发送者的GuId 和接收者的GuId 。(发送消息时也带和 )