SignalR实现在线聊天室功能

当前位置：网站建设 > 技术支持

SignalR实现在线聊天室功能

资料来源：网络整理时间：2023/2/14 0:41:30 共计：3609 浏览

一、在线聊天室

1、新建解决方案 SignalROnlineChatDemo

2、新建MVC项目 SignalROnlineChatDemo.Web

（无身份验证）

3、安装SignalR

PM> install-package Microsoft.AspNet.SignalR

4、创建一个称为 Startup.cs 的新类

1 public class Startup 2  { 3 public void Configuration(IAppBuilder app) 4  { 5 // 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888 6  app.MapSignalR(); 7  } 8 }

5、添加Hubs

1 public class ChatHub : Hub 2  { 3 public void Hello() 4  { 5  Clients.All.hello(); 6  } 7 }

6、Action/View

 1 /// <summary>  2 /// 在线聊天室  3 /// </summary>  4 /// <returns></returns>  5 public ActionResult Chat(string groupName)  6  {  7 if (string.IsNullOrWhiteSpace(groupName))  8  {  9 return Content("groupName is nllOrWhiteSpace"); 10  } 11 return View((object)groupName); 12 }

 1 @model string  2 @{  3  ViewBag.Title = "Chat";  4 }  5  6 <style>  7  .chat-container div {  8  margin: 10px 0;  9 } 10  .dN { 11  display: none; 12 } 13 </style> 14 15 <h2>Chat <span id="chatRoomName"></span></h2> 16 17 <div class="chat-container"> 18 <ul id="discussion"></ul> 19 <div class="sendto-wrap dN"> 20  发送给： 21 <span></span> 22 </div> 23 <div class="sendcontent-wrap"> 24 <input type="text" name="message" /> 25 <input type="button" id="btnSendMessage" value="Send" /> 26 </div> 27 </div> 28 29 @section scripts{ 30 <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script> 31 <!-- Reference the autogenerated SignalR hub script. --> 32 <script src="~/signalr/hubs"></script> 33 <script type="text/javascript"> 34  $(function () { 35 //聊天室编号 36 var groupName = '@Model'; 37 //成员昵称 38 var nickName = ''; 39 //成员聊天Id 40 var connectionId = ''; 41 42 //Reference the auto-generated proxy for the hub. 43 var chat = $.connection.chatHub; 44 45  $("#chatRoomName").html(groupName); 46 47 //Get the user name and store it to prepend to message 48 while (nickName == '' || $.trim(nickName) == '') { 49  nickName = prompt('Enter your name:', '') 50  $('#displayname').val(nickName); 51  } 52 53  $('#message').focus(); 54 55  }); 56 57 </script> 58 }

7、功能1：新成员加入，群发欢迎

 1 /// <summary>  2 /// newcomer 进入聊天室  3 /// </summary>  4 /// <param name="groupName"></param>  5 public void JoinGroup(string groupName, string userNickName)  6  {  7 //对聊天室成员群发‘新成员加入’  8 var conId = Context.ConnectionId;  9 10  Groups.Add(conId, groupName); 11 12 var psn = new ChatPerson() 13  { 14 ConnectionId = conId, 15 NickName = userNickName, 16 GroupName = groupName, 17  }; 18 19  Clients.Caller.setCallerInfo(psn); 20 //Clients.Group(groupName).welcome(psn); //不能广播给自己，所以分成了两句 21  Clients.Caller.welcome(psn); 22  Clients.Group(groupName, conId).welcome(psn); 23 24 }

1  //新成员身份信息（connectionId） 2  chat.client.setCallerInfo = function (psn) { 3  connectionId = psn.ConnectionId; 4  groupName = psn.groupName; 5  }; 6  //welcome newcomer 7  chat.client.welcome = function (psn) { 8 $("#discussion").append('<li><a href="javascript:;" data-conId="' + psn.ConnectionId + '">' + psn.NickName + '</a>加入了聊天室</li>'); 9 };

结果截图：

8、功能2：群发

 1 /// <summary>  2 /// newcomer进入聊天室，对聊天室成员群发‘新成员加入’  3 /// </summary>  4 /// <param name="groupName"></param>  5 public void JoinGroup(string groupName, string userNickName)  6  {  7 var conId = Context.ConnectionId;  8 var psn = new ChatPerson()  9  { 10 ConnectionId = conId, 11 NickName = userNickName, 12 GroupName = groupName, 13  }; 14 15 //成员信息计入Redis中 16 //var redisClient = RedisManager.GetClient(); 17 //if (redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, psn.ConnectionId)) != null) 18 //{ 19 // //connected 20 // return; 21 //} 22 //redisClient.Set<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, psn.ConnectionId), psn); 23 //redisClient.SaveAsync(); 24 using (var redisClient = RedisManager.GetClient()) 25  { 26 IRedisTypedClient<ChatPerson> psns = redisClient.As<ChatPerson>(); 27 if (psns.GetValue(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, psn.ConnectionId)) != null) 28  { 29 //connected 30 return; 31  } 32 psns.SetValue(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, psn.ConnectionId), psn); 33  } 34 35  Groups.Add(conId, groupName); 36  Clients.Caller.setCallerInfo(psn); 37 //Clients.Group(groupName).welcome(psn); //不能广播给自己，所以分成了两句 38  Clients.Caller.welcome(psn); 39  Clients.Group(groupName, conId).welcome(psn); 40  } 41 42 /// <summary> 43 /// 群发内容 44 /// </summary> 45 public void SendMessage(string message) 46  { 47 if (string.IsNullOrWhiteSpace(message)) 48  { 49 return; 50  } 51 var conId = Context.ConnectionId; 52 ChatPerson psn = null; 53 var redisClient = RedisManager.GetClient(); 54 if ((psn = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, conId))) == null 55 || string.IsNullOrWhiteSpace(psn.GroupName) || string.IsNullOrWhiteSpace(psn.NickName) 56  ) 57  { 58 //invalid ConnectionId 59 return; 60  } 61  Clients.Group(psn.GroupName).sendMessage(conId, psn.NickName, message); 62 }

1 //群发内容 2 chat.client.sendMessage = function (sendFromConnectionId, sendFromNickName, message) { 3 $("#discussion").append('<li><a href="javascript:;" data-conId="' + sendFromConnectionId + '">' + sendFromNickName + '</a>：' + message + '</li>'); 4 };

结果截图：

9、功能3：回复

 1 /// <summary>  2 /// 回复（@）  3 /// </summary>  4 /// <param name="sendTo"></param>  5 /// <param name="message"></param>  6 public void SendMessageTo(string sendTo, string message)  7  {  8 if (string.IsNullOrWhiteSpace(message) || string.IsNullOrWhiteSpace(sendTo))  9  { 10 return; 11  } 12 var connId = Context.ConnectionId; 13 if (connId == sendTo) 14  { 15 return; 16  } 17 ChatPerson curPerson = null; 18 ChatPerson desPerson = null; 19 var redisClient = RedisManager.GetClient(); 20 if ((curPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, connId))) == null 21 || string.IsNullOrWhiteSpace(curPerson.GroupName) || string.IsNullOrWhiteSpace(curPerson.NickName) 22  ) 23  { 24 //invalid ConnectionId 25 return; 26  } 27 if ((desPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, sendTo))) == null 28 || string.IsNullOrWhiteSpace(desPerson.GroupName) || string.IsNullOrWhiteSpace(desPerson.NickName) 29  ) 30  { 31 //invalid ConnectionId 32 return; 33  } 34 if (curPerson.GroupName != desPerson.GroupName) 35  { 36 return; 37  } 38 39  Clients.Group(curPerson.GroupName).sendMessageTo(curPerson.ConnectionId, curPerson.NickName, desPerson.ConnectionId, desPerson.NickName, message); 40 }

1 //at回复 2 chat.client.sendMessageTo = function (fromConnId, fromNickName, toConnId, toNickName, message) { 3 $("#discussion").append('<li data-connId="' + fromConnId + '" data-nickName="' + fromNickName + '"><a href="javascript:;">' + fromNickName + '</a>对<a href="javascript:;">' + toNickName + '</a>&nbsp;说：' + message + ' ' 4 + (fromConnId == connectionId ? '' : '&nbsp;&nbsp;&nbsp;<a href="javascript:;" action="at">&#64;他</a>') + '' + (fromConnId == connectionId ? '' : '&nbsp;&nbsp;&nbsp;<a title="屏蔽其发言" href="javascript:;" action="shielding">屏蔽</a>') + '</li>'); 5 };

 1 //发送  2 $("#btnSendMessage").click(function () {  3 var desConnId = $('.sendto-wrap a').attr('data-desConnId');  4 if (!desConnId || desConnId.length == 0) {  5 //群发  6 chat.server.sendMessage($('[name=message]').val());  7  }  8 else {  9 //回复 10 chat.server.sendMessageTo(desConnId, $('[name=message]').val()); 11  } 12 $('.sendto-wrap').addClass('dN'); 13 $('.sendto-wrap a').attr('data-desConnId', ''); 14 $('[name=message]').val('').focus(); 15  }); 16 //at 17 $('#discussion').on('click', '[action=at]', function () { 18 var desConnId = $(this).closest('li').attr('data-connId'); 19 var desNickName = $(this).closest('li').attr('data-nickName'); 20 $('.sendto-wrap').removeClass('dN'); 21 $('.sendto-wrap a').attr('data-desConnId', desConnId).html(desNickName); 22 });

结果截图：

10、功能4：私信

 1 /// <summary>  2 /// 私信给  3 /// </summary>  4 /// <param name="sendTo"></param>  5 /// <param name="message"></param>  6 public void PrivateMessageTo(string sendTo, string message)  7  {  8 if (string.IsNullOrWhiteSpace(message) || string.IsNullOrWhiteSpace(sendTo))  9  { 10 return; 11  } 12 var connId = Context.ConnectionId; 13 if (connId == sendTo) 14  { 15 return; 16  } 17 ChatPerson curPerson = null; 18 ChatPerson desPerson = null; 19 var redisClient = RedisManager.GetClient(); 20 if ((curPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, connId))) == null 21 || string.IsNullOrWhiteSpace(curPerson.GroupName) || string.IsNullOrWhiteSpace(curPerson.NickName) 22  ) 23  { 24 //invalid ConnectionId 25 return; 26  } 27 if ((desPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, sendTo))) == null 28 || string.IsNullOrWhiteSpace(desPerson.GroupName) || string.IsNullOrWhiteSpace(desPerson.NickName) 29  ) 30  { 31 //invalid ConnectionId 32 return; 33  } 34 if (curPerson.GroupName != desPerson.GroupName) 35  { 36 return; 37  } 38  Clients.Caller.myPrivateMessageTo(desPerson.ConnectionId, desPerson.NickName, message); 39  Clients.Client(sendTo).bePrivateMessageTo(curPerson.ConnectionId, curPerson.NickName, message); 40 }

1 //私信 2 $('#discussion').on('click', '[action=privateAt]', function () { 3 var desConnId = $(this).closest('li').attr('data-connId'); 4 var desNickName = $(this).closest('li').attr('data-nickName'); 5 $('.sendto-wrap span.sendto-to').html('私信给'); 6 $('.sendto-wrap').removeClass('dN'); 7 $('.sendto-wrap a').attr('data-desConnId', desConnId).attr('data-desAction', 'privateAt').html(desNickName); 8 });

 1 //privateAt私信  2 //我发的  3 chat.client.myPrivateMessageTo = function (toConnId, toNickName, message) {  4 $("#discussion").append('<li data-connId="' + connectionId + '" data-nickName="' + nickName + '">我对<a href="javascript:;">' + toNickName + '</a>&nbsp;说：' + message + ' '  5 //+ getActionBlockHtml(connectionId)  6  );  7  };  8 //发给我的  9 chat.client.bePrivateMessageTo = function (fromConnId, fromNickName, message) { 10 $("#discussion").append('<li data-connId="' + fromConnId + '" data-nickName="' + fromNickName + '"><a href="javascript:;">' + fromNickName + '</a>对我私信说：' + message + ' ' 11 + getActionBlockHtml(fromConnId) 12  ); 13 };

结果截图：

11、功能5：屏蔽

 1 /// <summary>  2 ///  3 /// </summary>  4 public class PersonShielding  5  {  6 /// <summary>  7 /// 成员的ConnectionId  8 /// </summary>  9 public string ConnectionId { get; set; } 10 11 /// <summary> 12 /// 被屏蔽 我被哪些人屏蔽（这样设计似乎不合理，但好用） 13 /// </summary> 14 public string[] BeShieldingByConnIdArr { get; set; } 15 }

 1 /// <summary>  2 /// 屏蔽某人的发言  3 /// </summary>  4 /// <param name="desConId"></param>  5 public void Shielding(string desConnId)  6  {  7 if (string.IsNullOrWhiteSpace(desConnId))  8  {  9 return; 10  } 11 var connId = Context.ConnectionId; 12 if (connId == desConnId) 13  { 14 return; 15  } 16 var redisClient = RedisManager.GetClient(); 17 ChatPerson curPerson = null; 18 ChatPerson desPerson = null; 19 if ((curPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, connId))) == null 20 || string.IsNullOrWhiteSpace(curPerson.GroupName) || string.IsNullOrWhiteSpace(curPerson.NickName) 21  ) 22  { 23 //invalid ConnectionId 24 return; 25  } 26 if ((desPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, desConnId))) == null 27 || string.IsNullOrWhiteSpace(desPerson.GroupName) || string.IsNullOrWhiteSpace(desPerson.NickName) 28  ) 29  { 30 //invalid ConnectionId 31 return; 32  } 33 var personShielding = redisClient.Get<PersonShielding>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_PersonShielding, desConnId)); 34 if (personShielding == null) 35  { 36 personShielding = new PersonShielding() 37  { 38 ConnectionId = desConnId, 39 BeShieldingByConnIdArr = new string[] { connId } 40  }; 41  } 42 else 43  { 44 if (personShielding.BeShieldingByConnIdArr == null) 45  { 46 personShielding.BeShieldingByConnIdArr = new string[] { connId }; 47  } 48 else if (!personShielding.BeShieldingByConnIdArr.Contains(connId)) 49  { 50 personShielding.BeShieldingByConnIdArr = personShielding.BeShieldingByConnIdArr.Union(new string[] { connId }).ToArray(); 51  } 52  } 53 redisClient.Set<PersonShielding>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_PersonShielding, desConnId), personShielding); 54  redisClient.SaveAsync(); 55 56  Clients.Caller.shieldingSuccess(desConnId, desPerson.NickName); 57 }

 1 var personShielding = redisClient.Get<PersonShielding>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_PersonShielding, connId));  2 if (personShielding != null && personShielding.BeShieldingByConnIdArr != null && personShielding.BeShieldingByConnIdArr.Length > 0)  3  {  4 //屏蔽我的 不发  5  Clients.Group(curPerson.GroupName, personShielding.BeShieldingByConnIdArr).sendMessage(connId, curPerson.NickName, message);  6  }  7 else  8  {  9  Clients.Group(curPerson.GroupName).sendMessage(connId, curPerson.NickName, message); 10 }

1 var personShielding = redisClient.Get<PersonShielding>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_PersonShielding, connId)); 2 if (personShielding == null || personShielding.BeShieldingByConnIdArr == null || !personShielding.BeShieldingByConnIdArr.Contains(sendTo)) 3  { 4 //sendTo没有屏蔽我，那我就发 5  Clients.Group(curPerson.GroupName).sendMessageTo(curPerson.ConnectionId, curPerson.NickName, desPerson.ConnectionId, desPerson.NickName, message); 6 }

1 //屏蔽 2 $('#discussion').on('click', '[action=shielding]', function () { 3 if (confirm('确定屏蔽其发言么！')) { 4 var desConnId = $(this).closest('li').attr('data-connId'); 5  chat.server.shielding(desConnId); 6  } 7 });

1 //屏蔽成功 callback 2 chat.client.shieldingSuccess = function (desConnId, desNickName) { 3 $("#discussion").append('<li data-connId="' + connectionId + '" data-nickName="' + nickName + '">你成功屏蔽了<a href="javascript:;">' + desNickName + '</a>的发言' 4 + '</li>' 5  ); 6 };

结果截图：

二、其他工作

1、退出后重新接入，能确定唯一身份么？

关于这个问题，通常的解决方案是：使用UserId，以UserId作为主线。当时是想到一点就写一点的！

如果能在页面加载$.connection.hub.start()的时候带入上次使用的connectionId就好了，但暂时我还没发现能这么做

（如果谁知道怎么解决，分享给我下，谢谢！！！）

2、退出聊天室时从Redis清理用户的相关数据

先来看看Hub的这三个方法：Hub.OnConnected 、Hub.OnDisconnected 、 Hub.OnReconnected

 1 /// <summary>  2 /// Called when the connection connects to this hub instance.  3 /// </summary>  4 /// <returns></returns>  5 public override Task OnConnected()  6  {  7 DefaultLoggerProvider.Instance.InfoFormat("ChatHub.OnConnected, ConnectionId:{0}", Context.ConnectionId);  8 return base.OnConnected();  9  } 10 11 /// <summary> 12 /// Called when a connection disconnects from this hub gracefully or due to a timeout. 13 /// </summary> 14 /// <param name="stopCalled"></param> 15 /// <returns></returns> 16 public override Task OnDisconnected(bool stopCalled) 17  { 18 DefaultLoggerProvider.Instance.InfoFormat("ChatHub.OnDisconnected, ConnectionId:{0}", Context.ConnectionId); 19 return base.OnDisconnected(stopCalled); 20  } 21 22 /// <summary> 23 /// Called when the connection reconnects to this hub instance. 24 /// </summary> 25 /// <returns></returns> 26 public override Task OnReconnected() 27  { 28 DefaultLoggerProvider.Instance.InfoFormat("ChatHub.OnReconnected, ConnectionId:{0}", Context.ConnectionId); 29 return base.OnReconnected(); 30 }

从查看日志可以得出结论：

Onconnected 是在加载页面/刷新页面重新加载的时候触发（$.connection.hub.start()）。

OnDisConnected 在离开（关闭选项卡/刷新页面）的时候触发（$.connection.hub.stop()）。

OnReconnected 仅会在生成网站的时候触发。重启网站不会触发。（暂不知所以然）

所以可以这样

 1 public override Task OnDisconnected(bool stopCalled)  2  {  3 var connId = Context.ConnectionId;  4  5 DefaultLoggerProvider.Instance.InfoFormat("ChatHub.OnDisconnected, ConnectionId:{0}, stopCalled:{1}", connId, stopCalled);  6  7 using (var redisClient = RedisManager.GetClient())  8  {  9 redisClient.Remove(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, connId)); 10 redisClient.Remove(string.Format(RedisKey.SignalROnlineChatDemoWebModels_PersonShielding, connId)); 11  redisClient.SaveAsync(); 12  } 13 14 return base.OnDisconnected(stopCalled); 15 }

附：源码下载

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：在微信小程序中使用WebSocket连接Asp.Net Core SignalR | ·下一条：SignalR实现消息推送，包括私聊、群聊、在线所有人接收消息（源码）