Toggle navigation
首页
产品中心
全新RDIF.vNext低代码框架
镇店
.NET C/S开发框架
.NET Web敏捷开发框架
.NET 快速开发框架(全新EasyUI版本)
.NET 代码生成器
.NET WebAPI服务端开发框架
客户案例
付款方式
国思学堂
技术文章
新闻资讯
下载
关于
首页
技术文章
.NET(Core)
正文
原创
2019-08-23
浏览 (
12149
)
史上最全面的SignalR系列教程-6、SignalR 实现聊天室
## 1、概述 ## 通过前面几篇文章对SignalR的详细介绍。我们知道Asp.net SignalR是微软为实现实时通信的一个类库。一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信。另外SignalR开发的程序不仅仅限制于宿主在IIS中,也可以宿主在任何应用程序,包括控制台,客户端程序和Windows服务等,另外还支持Mono,这意味着它可以实现跨平台部署在Linux环境下。 SignalR内部有两类对象: 1. Http持久连接(Persisten Connection)对象:用来解决长时间连接的功能。还可以由客户端主动向服务器要求数据,而服务器端不需要实现太多细节,只需要处理PersistentConnection 内所提供的五个事件:OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。 2. Hub(集线器)对象:用来解决实时(realtime)信息交换的功能,服务端可以利用URL来注册一个或多个Hub,只要连接到这个Hub,就能与所有的客户端共享发送到服务器上的信息,同时服务端可以调用客户端的脚本。 SignalR将整个信息的交换封装起来,客户端和服务器都是使用JSON来沟通的,在服务端声明的所有Hub信息,都会生成JavaScript输出到客户端,.NET则依赖Proxy来生成代理对象,而Proxy的内部则是将JSON转换成对象。 ## 2、SignalR实现聊天室(群聊)功能 ## 要想实现群聊的功能,首先我们需要创建一个房间,然后每个在线用户可以加入这个房间里面进行群聊,我们可以为房间设置一个唯一的名字来作为标识。那SignalR类库里面是否有这样现有的方法呢?答案是肯定的。SignalR作为一个强大的集线器,已经在hub里面集成了Gorups,也就是分组管理。 // IGroupManager接口提供如下方法 // 作用:将连接ID加入某个组 // Context.ConnectionId 连接ID,每个页面连接集线器即会产生唯一ID // roomName分组的名称 Groups.Add(Context.ConnectionId, roomName); // 作用:将连接ID从某个分组移除 Groups.Remove(Context.ConnectionId, roomName); // IHubConnectionContext接口提供了如下方法 // 调用客户端方法向房间内所有用户群发消息 // Room:分组名称 // new string[0]:过滤(不发送)的连接ID数组 Clients.Group(Room, new string[0]).clientMethod 上面的代码就是实现群聊的核心方法。Groups对象就是SignalR类库维护的一个列表对象而已,我们完全可以自己维护一个Dictionary<string, List<string>>对象,创建一个房间的时候,我们将房间名称和进入房间的客户端的ConnectionId加入到这个字典里面,然后在聊天室里面点发送消息的时候,我们根据房间名查找到所有加入群聊的ConnectionId,然后调用Clients.Clients(IList<string> connectionIds)方法来将消息群发到每个客户端。以上也就是实现聊天室的原理。 ### 2.1、 创建ASP.NET Mvc项目 ### 新建一个空的ASP.NET Mvc项目,取名为:SignalRGroupChat。 ### 2.2、安装Nuget包 ### 创建好项目后,要使用SignalR,需要先安装SignalR包,可以通过**程序包管理控制台**输入包安装命令进行安装。 Install-Package Microsoft.AspNet.SignalR Install-Package Microsoft.Owin.Cors ### 2.3、聊天室后台代码实现 ### 要实现聊天室功能,我们需要一些基础实体,如:用户类、房间类等,直接上代码: using System.Collections.Generic; using System.ComponentModel.DataAnnotations; namespace SignalRGroupChat { public class UserContext { public UserContext() { Users = new List<User>(); Connections = new List<Connection>(); Rooms = new List<ConversationRoom>(); } /// <summary> /// 用户集合 /// </summary> public List<User> Users { get; set; } /// <summary> /// 连接集合 /// </summary> public List<Connection> Connections { get; set; } /// <summary> /// 房间集合 /// </summary> public List<ConversationRoom> Rooms { get; set; } } public class User { /// <summary> /// 用户名 /// </summary> [Key] public string UserName { get; set; } /// <summary> /// 用户的连接 /// </summary> public List<Connection> Connections { get; set; } /// <summary> /// 用户房间集合 /// </summary> public virtual List<ConversationRoom> Rooms { get; set; } public User() { Connections = new List<Connection>(); Rooms = new List<ConversationRoom>(); } } public class Connection { /// <summary> /// 连接ID /// </summary> public string ConnectionID { get; set; } /// <summary> /// 用户代理 /// </summary> public string UserAgent { get; set; } /// <summary> /// 是否连接 /// </summary> public bool Connected { get; set; } } /// <summary> /// 房间类 /// </summary> public class ConversationRoom { /// <summary> /// 房间名称 /// </summary> [Key] public string RoomName { get; set; } /// <summary> /// 用户集合 /// </summary> public virtual List<User> Users { get; set; } public ConversationRoom() { Users = new List<User>(); } } } 实现聊天室的SignalR Hub代码: using Microsoft.AspNet.SignalR; using Microsoft.AspNet.SignalR.Hubs; using Newtonsoft.Json; using System; using System.Linq; using System.Threading.Tasks; namespace SignalRGroupChat.Hubs { /// <summary> /// 聊天室(群聊) /// </summary> [HubName("groupHub")] public class GroupHub : Hub { public static UserContext db = new UserContext(); public void Hello() { Clients.All.hello(); } /// <summary> /// 重写Hub连接事件 /// </summary> /// <returns></returns> public override Task OnConnected() { // 查询用户。 var user = db.Users.SingleOrDefault(u => u.UserName == Context.ConnectionId); //判断用户是否存在,否则添加 if (user == null) { user = new User() { UserName = Context.ConnectionId }; db.Users.Add(user); } //发送房间列表 var itme = from a in db.Rooms select new { a.RoomName }; Clients.Client(this.Context.ConnectionId).getRoomlist(JsonConvert.SerializeObject(itme.ToList())); return base.OnConnected(); } /// <summary> /// 更新所有用户的房间列表 /// </summary> private void GetRoomList() { var itme = from a in db.Rooms select new { a.RoomName }; string jsondata = JsonConvert.SerializeObject(itme.ToList()); Clients.All.getRoomlist(jsondata); } // 重写Hub连接断开的事件 public override Task OnDisconnected(bool stopCalled) { // 查询用户 var user = db.Users.FirstOrDefault(u => u.UserName == Context.ConnectionId); if (user != null) { // 删除用户 db.Users.Remove(user); // 从房间中移除用户 foreach (var item in user.Rooms) { RemoveFromRoom(item.RoomName); } } return base.OnDisconnected(stopCalled); } /// <summary> /// 加入聊天室 /// </summary> /// <param name="roomName"></param> public void AddToRoom(string roomName) { //查询聊天室 var room = db.Rooms.Find(a => a.RoomName == roomName); //存在则加入 if (room != null) { //查找房间中是否存在此用户 var isuser = room.Users.Where(a => a.UserName == Context.ConnectionId).FirstOrDefault(); //不存在则加入 if (isuser == null) { var user = db.Users.Find(a => a.UserName == Context.ConnectionId); user.Rooms.Add(room); room.Users.Add(user); Groups.Add(Context.ConnectionId, roomName); //调用此连接用户的本地JS(显示房间) Clients.Client(Context.ConnectionId).addRoom(roomName); } else { Clients.Client(Context.ConnectionId).showMessage("请勿重复加入房间!"); } } } /// <summary> /// 创建聊天室 /// </summary> /// <param name="roomName"></param> public void CreatRoom(string roomName) { var room = db.Rooms.Find(a => a.RoomName == roomName); if (room == null) { ConversationRoom cr = new ConversationRoom() { RoomName = roomName }; //将房间加入列表 db.Rooms.Add(cr); AddToRoom(roomName); Clients.Client(Context.ConnectionId).showMessage("房间创建完成!"); GetRoomList(); } else { Clients.Client(Context.ConnectionId).showMessage("房间名重复!"); } } /// <summary> /// 退出聊天室 /// </summary> /// <param name="roomName"></param> public void RemoveFromRoom(string roomName) { //查找房间是否存在 var room = db.Rooms.Find(a => a.RoomName == roomName); //存在则进入删除 if (room != null) { //查找要删除的用户 var user = room.Users.Where(a => a.UserName == Context.ConnectionId).FirstOrDefault(); //移除此用户 room.Users.Remove(user); //如果房间人数为0,则删除房间 if (room.Users.Count <= 0) { db.Rooms.Remove(room); } Groups.Remove(Context.ConnectionId, roomName); //提示客户端 Clients.Client(Context.ConnectionId).removeRoom("退出成功!"); } } /// <summary> /// 给分组内所有的用户发送消息 /// </summary> /// <param name="Room">分组名</param> /// <param name="Message">信息</param> public void SendMessage(string Room, string Message) { Clients.Group(Room, new string[0]).sendMessage(Room, Message + " " + DateTime.Now.ToString("HH:mm:ss")); } } } ### 2.4、页面部分代码参考 ### @{ ViewBag.Title = "GroupChat"; } <h2>聊天室(群聊)实例</h2> <div class="row"> 当前用户:<label id="username"></label> </div> <div class="row"> 输入房间名:<input type="text" class="form-control" style="display: initial;" value="技术交流1" id="Roomname" /><button id="CreatRoom" class="btn btn-success">创建聊天室</button> </div> <div class="row"> <div class="col-md-3"> <div style="float:left;border:1px solid #ff0000;margin:5px;"> <div>房间列表</div> <ul id="roomlist"> </ul> </div> </div> <div class="col-md-9"> <div id="RoomList"> </div> </div> </div> <div class="row"> <div class="col-md-4"></div> <ul id="UserList"></ul> <div class="col-md-8"></div> </div> <br /> @section scripts { <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script> <script src="~/signalr/hubs"></script> <script type="text/javascript"> var chat var roomcount = 0; $(function () { chat = $.connection.groupHub; chat.client.showMessage = function (Message) { alert(Message); } chat.client.sendMessage = function (roomname, message) { $("#" + roomname).find("ul").each(function () { $(this).append('<li>'+message+'</li>') }) } chat.client.removeRoom = function (data) { alert(data); } chat.client.addRoom = function (roomname) { var html = '<table class="table"><tr><td><div style="width: 80%;margin:5px;border:1px solid #ff0000;" id="' + roomname + '" roomname="' + roomname + '"><button onclick="RemoveRoom(this)" class="btn-danger">退出</button>\ <label>' + roomname + '</label>房间\ 聊天记录如下:<ul>\ </ul>\ <input type="text" /> <button class="btn btn-success" onclick="SendMessage(this)">发送</button>\ </div></td></tr></table>' $("#RoomList").append(html); } //注册查询房间列表的方法 chat.client.getRoomlist = function (data) { if (data) { var jsondata = $.parseJSON(data); $("#roomlist").html(" "); for (var i = 0; i < jsondata.length; i++) { var html = ' <li>房间名:' + jsondata[i].RoomName + '<button roomname="'+jsondata[i].RoomName+'" class="btn-sm btn-info" onclick="AddRoom(this)">加入</button></li>'; $("#roomlist").append(html); } } } // 获取用户名称。 $('#username').html(prompt('请输入您的名称:', '')); $.connection.hub.start().done(function () { $('#CreatRoom').click(function () { if (roomcount < 2) { chat.server.creatRoom($("#Roomname").val()); roomcount++; } else { alert("聊天窗口只允许有2个") } }) }); }); function SendMessage(btn) { var message = $(btn).prev().val(); var room = $(btn).parent(); var username = $("#username").html(); message = username + ":" + message; var roomname = $(room).attr("roomname"); chat.server.sendMessage(roomname,message); } function RemoveRoom(btn) { var room = $(btn).parent(); var roomname = $(room).attr("roomname"); $(room).remove(); chat.server.removeFromRoom(roomname); } function AddRoom(roomname) { var data =$(roomname).attr("roomname"); chat.server.addToRoom(data); } </script> } ## 3、效果展示 ## ![效果展示](http://doc.rdiframework.net/blog/article/20190823165415284.png-pw) ## 4、代码下载 ## 实例源码可以移步github下载,地址:[https://github.com/yonghu86/SignalRTestProj](https://github.com/yonghu86/SignalRTestProj) ## 5、参考文章 ## - [RDIFramework.NET敏捷开发框架通过SignalR技术整合即时通讯(IM)](http://www.guosisoft.com/article/detail/229) - [史上最全面的SignalR系列教程-1、认识SignalR](http://www.guosisoft.com/article/detail/225) - [史上最全面的SignalR系列教程-2、SignalR 实现推送功能-永久连接类实现方式](http://www.guosisoft.com/article/detail/226) - [史上最全面的SignalR系列教程-3、SignalR 实现推送功能-集线器类实现方式](http://www.guosisoft.com/article/detail/227) - [史上最全面的SignalR系列教程-4、SignalR 自托管全解(使用Self-Host)-附各终端详细实例](http://www.guosisoft.com/article/detail/228) - [史上最全面的SignalR系列教程-5、SignalR 实现一对一聊天](http://www.guosisoft.com/article/detail/229) - [Real-time ASP.NET with SignalR](https://dotnet.microsoft.com/apps/aspnet/signalr) - [微信公众号开发系列-玩转微信开发-目录汇总](http://www.guosisoft.com/article/detail/216) - [RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录](http://www.guosisoft.com/article/detail/190) - [RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍](http://www.guosisoft.com/article/detail/169) - [RDIFramework.NET框架SOA解决方案(集Windows服务、WinForm形式与IIS形式发布)-分布式应用](http://www.guosisoft.com/article/detail/189) - [RDIFramework.NET代码生成器全新V3.5版本发布-重大升级](http://www.guosisoft.com/article/detail/199) ----- 一路走来数个年头,感谢RDIFramework.NET框架的支持者与使用者,大家可以通过下面的地址了解详情。 RDIFramework.NET官方网站:http://www.rdiframework.net/ RDIFramework.NET官方博客:http://blog.rdiframework.net/ 同时需要说明的,以后的所有技术文章以官方网站为准,欢迎大家收藏! RDIFramework.NET框架由海南国思软件科技有限公司专业团队长期打造、一直在更新、一直在升级,请放心使用! 欢迎关注RDIFramework.net框架官方公众微信(微信号:guosisoft),及时了解最新动态。 扫描二维码立即关注 ![微信号:guosisoft](http://doc.rdiframework.net/weixin.png)
正文到此结束
本文标签:
.NET
项目管理
消息交互
挨踢业界
常用工具
版权声明:
本站原创文章,由
guosisoft.com
发布,遵循
CC 4.0 by-sa
版权协议,转载请附上原文出处链接和本声明。
上一篇
史上最全面的SignalR系列教程-5、SignalR 实现一对一聊天
下一篇
RDIFramework.NET敏捷开发框架Web新增邮件中心实现便捷式的邮件收发
热门推荐
{{article.title}}
热门指数:
浏览({{article.lookCount + 5000}})
相关文章
{{article.title}}
该篇文章的评论功能暂时被站长关闭
说给你听
本文目录
文章标签
RDIF.NET
其他
微信开发
.NET
消息交互
.NetCore
项目管理
常用工具
工作流
Web前端
数据库
挨踢业界
随机文章
RDIFramework.NET敏捷开发框架 ━ 工作流程组件Web业务平台
微信公众号开发C#系列-3、搭建微信本地调试环境-借助花生壳实现内网穿透
解放双手,markdown文章神器,Typora+PicGo+七牛云图床实现自动上传图片
RDIFramework.NET CS敏捷开发框架 V6.0发布(支持.NET6+、Framework双引擎可选,全网唯一)
微信公众号开发C#系列-12、微信前端开发利器:WeUI
微信公众号开发C#系列-4、获取接口调用凭证
常用linux命令,开发必备
ORACLE常见问题一千问[101至200](不怕学不成、就怕心不诚!)
RDIFramework.NETV2.9版本 Web新增至14套皮肤风格+三套界面组合(共42套皮肤组合)
ORACLE常见问题一千问[501至600](不怕学不成、就怕心不诚!)
RDIFramework.NET ━ .NET快速信息化系统开发框架 V2.7 版本发布
JavaScript初学者应知的24条最佳实践(译)
你必知道的 Chrome 前端调试技巧
RDIFramework.NET代码生成器全新V5.1版本发布
史上最全面的SignalR系列教程-2、SignalR 实现推送功能-永久连接类实现方式
一文讲通.NET Core部署到Windows IIS最全解决方案
[推荐]ORACLE SQL:经典查询练手第三篇(不懂装懂,永世饭桶!)
RDIFramework.NET WinForm版新增报表管理功能模块
ORACLE常见问题一千问[901至1000](不怕学不成、就怕心不诚!)
RDIFramework.NET开发框架编码管理助力业务编码的自动处理
网站信息
文章总数:599 篇
标签总数:8 个
分类总数:8 个
留言数量:1385 条
在线人数:
89
人
运行天数:1321天
最后更新:2023-05-18
QQ:406590790
13005007127