快捷導(dǎo)航

Asp.net使用SignalR實(shí)現(xiàn)聊天室的功能

更新時(shí)間：2016年04月11日 14:47:10 作者：Learning hard

這篇文章主要介紹了Asp.net使用SignalR實(shí)現(xiàn)聊天室的功能的相關(guān)資料,需要的朋友可以參考下

一、引言
在前一篇文章《Asp.net使用SignalR實(shí)現(xiàn)酷炫端對(duì)端聊天功能》中，我向大家介紹了如何實(shí)現(xiàn)實(shí)現(xiàn)端對(duì)端聊天的功能的，在這一篇文章中將像大家如何使用SignalR實(shí)現(xiàn)群聊這樣的功能。

二、實(shí)現(xiàn)思路
　　要想實(shí)現(xiàn)群聊的功能，首先我們需要?jiǎng)?chuàng)建一個(gè)房間，然后每個(gè)在線用戶可以加入這個(gè)房間里面進(jìn)行群聊，我們可以為房間設(shè)置一個(gè)唯一的名字來(lái)作為標(biāo)識(shí)。那SignalR類庫(kù)里面是否有這樣現(xiàn)有的方法呢？答案是肯定的。

// IGroupManager接口提供如下方法
// 作用:將連接ID加入某個(gè)組
// Context.ConnectionId 連接ID,每個(gè)頁(yè)面連接集線器即會(huì)產(chǎn)生唯一ID
// roomName分組的名稱
Groups.Add(Context.ConnectionId, roomName);

// 作用:將連接ID從某個(gè)分組移除
Groups.Remove(Context.ConnectionId, roomName);

// IHubConnectionContext接口提供了如下方法
// 調(diào)用客戶端方法向房間內(nèi)所有用戶群發(fā)消息 
// Room:分組名稱
// new string[0]:過(guò)濾(不發(fā)送)的連接ID數(shù)組
 Clients.Group(Room, new string[0]).clientMethod

　　上面的代碼也就是實(shí)現(xiàn)群聊的核心方法。Groups對(duì)象說(shuō)白了也就是SignalR類庫(kù)維護(hù)的一個(gè)列表對(duì)象而已，其實(shí)我們完全可以自己來(lái)維護(hù)一個(gè)Dictionary<string, List<string>>這個(gè)對(duì)象，創(chuàng)建一個(gè)房間的時(shí)候，我們將房間名稱和進(jìn)入房間的客戶端的ConnectionId加入到這個(gè)字典里面，然后在聊天室里面點(diǎn)發(fā)送消息的時(shí)候，我們根據(jù)房間名查找到所有加入群聊的ConnectionId，然后調(diào)用Clients.Clients(IList<string> connectionIds)方法來(lái)將消息群發(fā)到每個(gè)客戶端。以上也就是實(shí)現(xiàn)聊天室的原理。

三、使用SignalR實(shí)現(xiàn)聊天室的功能
理清楚了實(shí)現(xiàn)思路之后，接下來(lái)我們就看下具體的實(shí)現(xiàn)代碼，同時(shí)大家也可以對(duì)照代碼來(lái)對(duì)照前面的實(shí)現(xiàn)思路。
首先看下聊天室功能所涉及實(shí)體類的實(shí)現(xiàn)代碼：

/// <summary>
 /// 用戶類
 /// </summary>
 public class User
 {
  /// <summary>
  /// 用戶Id
  /// </summary>
  public string UserId { get; set; }

  /// <summary>
  /// 用戶的連接集合
  /// </summary>
  public List<Connection> Connections { get; set; }

  /// <summary>
  /// 用戶房間集合，一個(gè)用戶可以加入多個(gè)房間
  /// </summary>
  public List<ChatRoom> Rooms { get; set; }

  public User()
  {
   Connections = new List<Connection>();
   Rooms = new List<ChatRoom>();
  }
 }

 public class Connection
 {
  //連接ID
  public string ConnectionId { get; set; }

  //用戶代理
  public string UserAgent { get; set; }
  //是否連接
  public bool Connected { get; set; } 
 }

  /// <summary>
 /// 房間類
 /// </summary>
 public class ChatRoom
 {
  // 房間名稱
  public string RoomName { get; set; }

  // 用戶集合
  public List<User> Users { get; set; }

  public ChatRoom()
  {
   Users = new List<User>();
  }
 }

 /// <summary>
 /// 上下文類，用來(lái)模擬EF中的DbContext
 /// </summary>
 public class ChatContext
 {
  public List<User> Users { get; set; }

  public List<Connection> Connections { get; set; }

  public List<ChatRoom> Rooms { get; set; }

  public ChatContext()
  {
   Users = new List<User>();
   Connections = new List<Connection>();
   Rooms = new List<ChatRoom>();
  }
 }

2. 接下來(lái)，讓我們來(lái)看到集線器的實(shí)現(xiàn)：

[HubName("chatRoomHub")]
 public class GroupsHub : Hub
 {
  public static ChatContext DbContext = new ChatContext();

  #region IHub Members
  // 重寫Hub連接事件
  public override Task OnConnected()
  {
   // 查詢用戶
   var user = DbContext.Users.FirstOrDefault(u => u.UserId == Context.ConnectionId);

   if (user == null)
   {
    user = new User
    {
     UserId = Context.ConnectionId
    };

    DbContext.Users.Add(user);
   }

   // 發(fā)送房間列表
   var items = DbContext.Rooms.Select(p => new {p.RoomName});
   Clients.Client(this.Context.ConnectionId).getRoomList(JsonHelper.ToJsonString(items.ToList()));
   return base.OnConnected();
  }

  // 重寫Hub連接斷開的事件
  public override Task OnDisconnected(bool stopCalled)
  {
   // 查詢用戶
   var user = DbContext.Users.FirstOrDefault(u => u.UserId == Context.ConnectionId);

   if (user != null)
   {
    // 刪除用戶
    DbContext.Users.Remove(user);

    // 從房間中移除用戶
    foreach (var item in user.Rooms)
    {
     RemoveUserFromRoom(item.RoomName);
    }
   }
   return base.OnDisconnected(stopCalled);
  }

  #endregion 

  #region Public Methods

  // 為所有用戶更新房間列表
  public void UpdateRoomList()
  {
   var itme = DbContext.Rooms.Select(p => new {p.RoomName});
   var jsondata = JsonHelper.ToJsonString(itme.ToList());
   Clients.All.getRoomlist(jsondata);
  }

  /// <summary>
  /// 加入聊天室
  /// </summary>
  public void JoinRoom(string roomName)
  {
   // 查詢聊天室
   var room = DbContext.Rooms.Find(p => p.RoomName == roomName);

   // 存在則加入
   if (room == null) return;

   // 查找房間中是否存在此用戶
   var isExistUser = room.Users.FirstOrDefault(u => u.UserId == Context.ConnectionId);

   // 不存在則加入
   if (isExistUser == null)
   {
    var user = DbContext.Users.Find(u => u.UserId == Context.ConnectionId);
    user.Rooms.Add(room);
    room.Users.Add(user);
    
    // 將客戶端的連接ID加入到組里面
    Groups.Add(Context.ConnectionId, roomName);

    //調(diào)用此連接用戶的本地JS(顯示房間)
    Clients.Client(Context.ConnectionId).joinRoom(roomName);
   }
   else
   {
    Clients.Client(Context.ConnectionId).showMessage("請(qǐng)勿重復(fù)加入房間!");
   }
  }

  /// <summary>
  /// 創(chuàng)建聊天室
  /// </summary>
  /// <param name="roomName"></param>
  public void CreateRoom(string roomName)
  {
   var room = DbContext.Rooms.Find(a => a.RoomName == roomName);
   if (room == null)
   {
    var cr = new ChatRoom
    {
     RoomName = roomName
    };

    //將房間加入列表
    DbContext.Rooms.Add(cr);

    // 本人加入聊天室
    JoinRoom(roomName);
    UpdateRoomList();
   }
   else
   {
    Clients.Client(Context.ConnectionId).showMessage("房間名重復(fù)!");
   }
  }

  public void RemoveUserFromRoom(string roomName)
  {
   //查找房間是否存在
   var room = DbContext.Rooms.Find(a => a.RoomName == roomName);

   //存在則進(jìn)入刪除
   if (room == null)
   {
    Clients.Client(Context.ConnectionId).showMessage("房間名不存在!");
    return;
   }

   // 查找要?jiǎng)h除的用戶
   var user = room.Users.FirstOrDefault(a => a.UserId == Context.ConnectionId);
   // 移除此用戶
   room.Users.Remove(user);
   //如果房間人數(shù)為0,則刪除房間
   if (room.Users.Count <= 0)
   {
    DbContext.Rooms.Remove(room);
   }

   Groups.Remove(Context.ConnectionId, roomName);

   //提示客戶端
   Clients.Client(Context.ConnectionId).removeRoom("退出成功!");
  }

  /// <summary>
  /// 給房間內(nèi)所有的用戶發(fā)送消息
  /// </summary>
  /// <param name="room">房間名</param>
  /// <param name="message">信息</param>
  public void SendMessage(string room, string message)
  {
   // 調(diào)用房間內(nèi)所有客戶端的sendMessage方法
   // 因?yàn)樵诩尤敕块g的時(shí)候，已經(jīng)將客戶端的ConnectionId添加到Groups對(duì)象中了，所有可以根據(jù)房間名找到房間內(nèi)的所有連接Id
   // 其實(shí)我們也可以自己實(shí)現(xiàn)Group方法，我們只需要用List記錄所有加入房間的ConnectionId
   // 然后調(diào)用Clients.Clients(connectionIdList),參數(shù)為我們記錄的連接Id數(shù)組。
   Clients.Group(room, new string[0]).sendMessage(room, message + " " + DateTime.Now);
  }
  #endregion 
}

3. 上面SignalR服務(wù)端的代碼實(shí)現(xiàn)已經(jīng)完成，接下來(lái)就讓我們一起看看客戶端視圖的實(shí)現(xiàn)：

@{
 Layout = null;
}

<!DOCTYPE html>

<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</title>
 <script src="~/Scripts/jquery-2.2.2.min.js"></script>
 <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
 <script src="~/Scripts/layer/layer.min.js"></script>
 <!--這里要注意,這是虛擬目錄,也就是你在OWIN Startup中注冊(cè)的地址-->
 <script src="/signalr/hubs"></script>

 <script type="text/javascript">
  var chat;
  var roomcount = 0;
  
  $(function() {
   chat = $.connection.chatRoomHub;
   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.joinRoom = function (roomname) {
    var html = '<div style="float:left; margin-left:360px; border:double; height:528px;width:493px" id="' + roomname + '" roomname="' + roomname + '"><button onclick="RemoveRoom(this)">退出</button>\
         ' + roomname + '房間\
            聊天記錄如下:<ul>\
            </ul>\
         <textarea class="ChatCore_write" id="ChatCore_write" style="width:400px"></textarea> <button onclick="SendMessage(this)">發(fā)送</button>\
         </div>';
    $("#RoomList").append(html);
   };

   //注冊(cè)查詢房間列表的方法
   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 + '" onclick="AddRoom(this)">加入</button></li>';
      $("#roomlist").append(html);
     }
    }
   };
   // 獲取用戶名稱。
   $('#username').html(prompt('請(qǐng)輸入您的名稱:', ''));

   $.connection.hub.start().done(function() {
    $('#CreatRoom').click(function() {
     chat.server.createRoom($("#Roomname").val());
    });
   });
  });
  
  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);
   $(btn).prev().val('').focus();
  }
  
  function RemoveRoom(btn) {
   var room = $(btn).parent();
   var roomname = $(room).attr("roomname");
   chat.server.removeUserFromRoom(roomname);
  }
  
  function AddRoom(roomname) {
   var data =$(roomname).attr("roomname");
   chat.server.joinRoom(data);
  }

 </script>
</head>
<body>
 <div>
  <div>名稱:<p id="username"></p></div>
  輸入房間名:
  <input type="text" value="聊天室1" id="Roomname" />
  <button id="CreatRoom">創(chuàng)建聊天室</button>
 </div>
 <div style="float:left;border:double">
  <div>房間列表</div>
  <ul id="roomlist"></ul>
 </div>
 <div id="RoomList">
 </div>
</body>
</html>

4. 經(jīng)過(guò)上面3步，聊天室的功能就已經(jīng)完成了，在看具體效果之前，這里附加一個(gè)幫助類的代碼：

/// <summary>
 /// JSON 幫助類
 /// </summary>
 public class JsonHelper
 {
  /// <summary>
  /// 從一個(gè)對(duì)象信息生成Json字符串
  /// </summary>
  /// <param name="obj"></param>
  /// <returns></returns>
  public static string ToJsonString(object obj)
  {
   return JsonConvert.SerializeObject(obj);
  }

  /// <summary>
  /// 從Json字符串生成對(duì)象
  /// </summary>
  /// <typeparam name="T"></typeparam>
  /// <param name="jsonString"></param>
  /// <returns></returns>
  public static T ToObject<T>(string jsonString)
  {
   return JsonConvert.DeserializeObject<T>(jsonString);
  }
 }

四、運(yùn)行結(jié)果　　

接下來(lái)，就具體看看聊天室功能的運(yùn)行效果，具體運(yùn)行效果如下圖所示：