网站建设资讯

NEWS

网站建设资讯

如何在Asp.net中使用SignalR实现一个端对端聊天功能-创新互联

如何在Asp.net中使用SignalR实现一个端对端聊天功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

10年积累的成都网站建设、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有临泽免费网站建设让你可以放心的选择与我们合作。
 public interface IHubConnectionContext
 {
 T All { get; } // 代表所有客户端

 T AllExcept(params string[] excludeConnectionIds); // 除了参数中的所有客户端
 T Client(string connectionId); // 特定的客户端,这个方法也就是我们实现端对端聊天的关键
 T Clients(IList connectionIds); // 参数中的客户端端
 T Group(string groupName, params string[] excludeConnectionIds); // 指定客户端组,这个也是实现群聊的关键所在
 T Groups(IList groupNames, params string[] excludeConnectionIds);
 T User(string userId); // 特定的用户
 T Users(IList userIds); // 参数中的用户
 }

在SignalR中,每一个客户端为标记其性,SignalR都会分配它一个ConnnectionId,这样我们就可以通过ConnnectionId来找到特定的客户端了。这样,我们在向某个客户端发送消息的时候,除了要将消息传入,也需要将发送给对方的ConnectionId输入,这样服务端就能根据传入的ConnectionId来转发对应的消息给对应的客户端了。这样也就完成了端对端聊天的功能。另外,如果用户如果不在线的话,服务端可以把消息保存到数据库中,等对应的客户端上线的时候,再从数据库中查看该客户端是否有消息需要推送,有的话,从数据库取出数据,将该数据推送给该客户端。(不过这点,服务端缓存数据的功能本篇博文没有实现,在这里介绍就是让大家明白QQ一个实现原理)。

下面我们来梳理下端对端聊天功能的实现思路:

客户端登入的时候记录下客户端的ConnnectionId,并将用户加入到一个静态数组中,该数据为了记录所有在线用户。
用户可以点击在线用户中的用户聊天,在发送消息的时候,需要将ConnectionId一并传入到服务端。
服务端根据传入的消息内容和ConnectionId调用Clients.Client(connnection).sendMessage方法来进行转发到对应的客户端。


三、实现酷炫聊天功能核心代码


   有了实现思路,实现功能也就得心应手了,接下来,让我们先看下集线器ChatHub中的代码:


public class ChatHub : Hub
 {
 // 静态属性
 public static List OnlineUsers = new List(); // 在线用户列表

 /// 
 /// 登录连线
 /// 
 /// 用户Id
 /// 用户名
 public void Connect(string userId, string userName)
 {
  var connnectId = Context.ConnectionId;

  if (OnlineUsers.Count(x => x.ConnectionId == connnectId) == 0)
  {
  if (OnlineUsers.Any(x => x.UserId == userId))
  {
   var items = OnlineUsers.Where(x => x.UserId == userId).ToList();
   foreach (var item in items)
   {
   Clients.AllExcept(connnectId).onUserDisconnected(item.ConnectionId, item.UserName);
   }
   OnlineUsers.RemoveAll(x => x.UserId == userId);
  }

  //添加在线人员
  OnlineUsers.Add(new UserInfo
  {
   ConnectionId = connnectId,
   UserId = userId,
   UserName = userName,
   LastLoginTime = DateTime.Now
  });
  }

  // 所有客户端同步在线用户
  Clients.All.onConnected(connnectId, userName, OnlineUsers);
 }


 /// 
 /// 发送私聊
 /// 
 /// 接收方用户连接ID
 /// 内容
 public void SendPrivateMessage(string toUserId, string message)
 {
  var fromUserId = Context.ConnectionId;

  var toUser = OnlineUsers.FirstOrDefault(x => x.ConnectionId == toUserId);
  var fromUser = OnlineUsers.FirstOrDefault(x => x.ConnectionId == fromUserId);

  if (toUser != null && fromUser != null)
  { 
  // send to 
  Clients.Client(toUserId).receivePrivateMessage(fromUserId, fromUser.UserName, message);

  // send to caller user
  // Clients.Caller.sendPrivateMessage(toUserId, fromUser.UserName, message);
  }
  else
  {
  //表示对方不在线
  Clients.Caller.absentSubscriber();
  }
 }

 /// 
 /// 断线时调用
 /// 
 /// 
 /// 
 public override Task OnDisconnected(bool stopCalled)
 {
  var user = OnlineUsers.FirstOrDefault(u => u.ConnectionId == Context.ConnectionId);

  // 判断用户是否存在,存在则删除
  if (user == null) return base.OnDisconnected(stopCalled);

  Clients.All.onUserDisconnected(user.ConnectionId, user.UserName); //调用客户端用户离线通知
  // 删除用户
  OnlineUsers.Remove(user);


  return base.OnDisconnected(stopCalled);
 }
 }

上面是服务端主要的实现,接下来看看客户端的实现代码:


 
 var systemHub = $.connection.chatHub;
 / 连接IM服务器成功
 // 主要是更新在线用户
 systemHub.client.onConnected = function (id, userName, allUsers) {
  var node = chatCore.node, myf = node.list.eq(0), str = '', i = 0;
  myf.addClass('loading');
  onlinenum = allUsers.length;
  if (onlinenum > 0) {
  str += ''
   + '
在线用户(' + onlinenum + ')
'    + '';   for (; i < onlinenum; i++) {    str += '' + allUsers[i].UserName + '(' + ')' + allUsers[i].LoginTime + '';   }   str += '';   myf.html(str);   } else {   myf.html('没有任何数据');   }   myf.removeClass('loading');  };  //消息传输  chatCore.transmit = function () {  var node = chatCore.node, log = {};  node.sendbtn = $('#ChatCore_sendbtn');  node.imwrite = $('#ChatCore_write');  //发送  log.send = function () {   var data = {   content: node.imwrite.val(),   id: chatCore.nowchat.id,   sign_key: '', //密匙   _: +new Date   };   if (data.content.replace(/\s/g, '') === '') {   layer.tips('说点啥呗!', '#ChatCore_write', 2);   node.imwrite.focus();   } else {   //此处皆为模拟   var keys = chatCore.nowchat.type + chatCore.nowchat.id;   //聊天模版   log.html = function (param, type) {    return ''    + ''     + function () {     if (type === 'me') {      return '' + param.time + ''       + '' + param.name + ''       + '';     } else {      return ''       + '' + param.name + ''       + '' + param.time + '';     }     }()    + '
'    + '' + param.content + '
'    + '';   };   log.imarea = chatCore.chatbox.find('#ChatCore_area' + keys);   log.imarea.append(log.html({    time: new Date().toLocaleString(),    name: config.user.name,    face: config.user.face,    content: data.content   }, 'me'));   node.imwrite.val('').focus();   log.imarea.scrollTop(log.imarea[0].scrollHeight);   // 调用服务端sendPrivateMessage方法来转发消息   systemHub.server.sendPrivateMessage(chatCore.nowchat.id, data.content);   }  };  node.sendbtn.on('click', log.send);  node.imwrite.keyup(function (e) {   if (e.keyCode === 13) {   log.send();   }  });  };  //用户离线  systemHub.client.onUserDisconnected = function (id, userName) {   onlinenum = onlinenum - 1;   $(".ChatCore_nums").html("(" + onlinenum + ")");   $("#ChatCore_friend_list li[data-id=" + id + "]").remove();  };  // 启动连接  $.connection.hub.start().done(function () {   systemHub.server.connect(userid, username); // 调用服务端connect方法  });  

关于如何在Asp.net中使用SignalR实现一个端对端聊天功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


网站名称:如何在Asp.net中使用SignalR实现一个端对端聊天功能-创新互联
网站路径:http://njwzjz.com/article/dgohio.html

其他资讯