如何在Asp.net中使用SignalR實(shí)現(xiàn)一個端對端聊天功能-創(chuàng)新互聯(lián)

如何在Asp.net中使用SignalR實(shí)現(xiàn)一個端對端聊天功能？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

10年積累的成都網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有臨澤免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

 public interface IHubConnectionContext<T>
 {
 T All { get; } // 代表所有客戶端

 T AllExcept(params string[] excludeConnectionIds); // 除了參數(shù)中的所有客戶端
 T Client(string connectionId); // 特定的客戶端，這個方法也就是我們實(shí)現(xiàn)端對端聊天的關(guān)鍵
 T Clients(IList<string> connectionIds); // 參數(shù)中的客戶端端
 T Group(string groupName, params string[] excludeConnectionIds); // 指定客戶端組，這個也是實(shí)現(xiàn)群聊的關(guān)鍵所在
 T Groups(IList<string> groupNames, params string[] excludeConnectionIds);
 T User(string userId); // 特定的用戶
 T Users(IList<string> userIds); // 參數(shù)中的用戶
 }

在SignalR中，每一個客戶端為標(biāo)記其性，SignalR都會分配它一個ConnnectionId，這樣我們就可以通過ConnnectionId來找到特定的客戶端了。這樣，我們在向某個客戶端發(fā)送消息的時(shí)候，除了要將消息傳入，也需要將發(fā)送給對方的ConnectionId輸入，這樣服務(wù)端就能根據(jù)傳入的ConnectionId來轉(zhuǎn)發(fā)對應(yīng)的消息給對應(yīng)的客戶端了。這樣也就完成了端對端聊天的功能。另外，如果用戶如果不在線的話，服務(wù)端可以把消息保存到數(shù)據(jù)庫中，等對應(yīng)的客戶端上線的時(shí)候，再從數(shù)據(jù)庫中查看該客戶端是否有消息需要推送，有的話，從數(shù)據(jù)庫取出數(shù)據(jù)，將該數(shù)據(jù)推送給該客戶端。（不過這點(diǎn)，服務(wù)端緩存數(shù)據(jù)的功能本篇博文沒有實(shí)現(xiàn)，在這里介紹就是讓大家明白QQ一個實(shí)現(xiàn)原理）。

下面我們來梳理下端對端聊天功能的實(shí)現(xiàn)思路：

客戶端登入的時(shí)候記錄下客戶端的ConnnectionId，并將用戶加入到一個靜態(tài)數(shù)組中，該數(shù)據(jù)為了記錄所有在線用戶。
用戶可以點(diǎn)擊在線用戶中的用戶聊天，在發(fā)送消息的時(shí)候，需要將ConnectionId一并傳入到服務(wù)端。
服務(wù)端根據(jù)傳入的消息內(nèi)容和ConnectionId調(diào)用Clients.Client(connnection).sendMessage方法來進(jìn)行轉(zhuǎn)發(fā)到對應(yīng)的客戶端。

三、實(shí)現(xiàn)酷炫聊天功能核心代碼

　　有了實(shí)現(xiàn)思路，實(shí)現(xiàn)功能也就得心應(yīng)手了，接下來，讓我們先看下集線器ChatHub中的代碼：

public class ChatHub : Hub
 {
 // 靜態(tài)屬性
 public static List<UserInfo> OnlineUsers = new List<UserInfo>(); // 在線用戶列表

 /// <summary>
 /// 登錄連線
 /// </summary>
 /// <param name="userId">用戶Id</param>
 /// <param name="userName">用戶名</param>
 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);
 }


 /// <summary>
 /// 發(fā)送私聊
 /// </summary>
 /// <param name="toUserId">接收方用戶連接ID</param>
 /// <param name="message">內(nèi)容</param>
 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();
  }
 }

 /// <summary>
 /// 斷線時(shí)調(diào)用
 /// </summary>
 /// <param name="stopCalled"></param>
 /// <returns></returns>
 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); //調(diào)用客戶端用戶離線通知
  // 刪除用戶
  OnlineUsers.Remove(user);


  return base.OnDisconnected(stopCalled);
 }
 }

上面是服務(wù)端主要的實(shí)現(xiàn)，接下來看看客戶端的實(shí)現(xiàn)代碼：

 <script type="text/javascript">
 var systemHub = $.connection.chatHub;
 / 連接IM服務(wù)器成功
 // 主要是更新在線用戶
 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 += '<li class="ChatCore_parentnode ChatCore_liston">'
   + '<h6><i></i><span class="ChatCore_parentname">在線用戶</span><em class="ChatCore_nums">（' + onlinenum + '）</em></h6>'
   + '<ul id="ChatCore_friend_list" class="ChatCore_chatlist">';
  for (; i < onlinenum; i++) {
   str += '<li id="userid-' + allUsers[i].UserID + '" data-id="' + allUsers[i].ConnectionId + '" class="ChatCore_childnode" type="one"><img src="/Content/Images/001.jpg?' + allUsers[i].UserID + '" class="ChatCore_oneface"><span class="ChatCore_onename">' + allUsers[i].UserName + '(' + ')</span><em class="ChatCore_time">' + allUsers[i].LoginTime + '</em></li>';
  }
  str += '</ul></li>';
  myf.html(str);
  } else {
  myf.html('<li class="ChatCore_errormsg">沒有任何數(shù)據(jù)</li>');
  }
  myf.removeClass('loading');
 };
 //消息傳輸
 chatCore.transmit = function () {
 var node = chatCore.node, log = {};
 node.sendbtn = $('#ChatCore_sendbtn');
 node.imwrite = $('#ChatCore_write');

 //發(fā)送
 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('說點(diǎn)啥唄！', '#ChatCore_write', 2);
  node.imwrite.focus();
  } else {
  //此處皆為模擬
  var keys = chatCore.nowchat.type + chatCore.nowchat.id;

  //聊天模版
  log.html = function (param, type) {
   return '<li class="' + (type === 'me' ? 'ChatCore_chateme' : '') + '">'
   + '<div class="ChatCore_chatuser">'
    + function () {
    if (type === 'me') {
     return '<span class="ChatCore_chattime">' + param.time + '</span>'
      + '<span class="ChatCore_chatname">' + param.name + '</span>'
      + '<img src="' + param.face + '" >';
    } else {
     return '<img src="' + param.face + '" >'
      + '<span class="ChatCore_chatname">' + param.name + '</span>'
      + '<span class="ChatCore_chattime">' + param.time + '</span>';
    }
    }()
   + '</div>'
   + '<div class="ChatCore_chatsay">' + param.content + '<em class="ChatCore_zero"></em></div>'
   + '</li>';
  };

  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);

  // 調(diào)用服務(wù)端sendPrivateMessage方法來轉(zhuǎn)發(fā)消息
  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); // 調(diào)用服務(wù)端connect方法
 });
 </script>

關(guān)于如何在Asp.net中使用SignalR實(shí)現(xiàn)一個端對端聊天功能問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

當(dāng)前文章：如何在Asp.net中使用SignalR實(shí)現(xiàn)一個端對端聊天功能-創(chuàng)新互聯(lián)
當(dāng)前地址：http://bm7419.com/article0/dgohio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)站營銷、品牌網(wǎng)站制作、云服務(wù)器、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容