最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

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

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 22:37:46
文檔

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

Asp.net使用SignalR實現(xiàn)聊天室的功能:一、引言 在前一篇文章《Asp.net使用SignalR實現(xiàn)酷炫端對端聊天功能》中,我向大家介紹了如何實現(xiàn)實現(xiàn)端對端聊天的功能的,在這一篇文章中將像大家如何使用SignalR實現(xiàn)群聊這樣的功能。 二、實現(xiàn)思路 要想實現(xiàn)群聊的功能,首先我們需要創(chuàng)建一個房間,然后每個
推薦度:
導讀Asp.net使用SignalR實現(xiàn)聊天室的功能:一、引言 在前一篇文章《Asp.net使用SignalR實現(xiàn)酷炫端對端聊天功能》中,我向大家介紹了如何實現(xiàn)實現(xiàn)端對端聊天的功能的,在這一篇文章中將像大家如何使用SignalR實現(xiàn)群聊這樣的功能。 二、實現(xiàn)思路 要想實現(xiàn)群聊的功能,首先我們需要創(chuàng)建一個房間,然后每個

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

二、實現(xiàn)思路
  要想實現(xiàn)群聊的功能,首先我們需要創(chuàng)建一個房間,然后每個在線用戶可以加入這個房間里面進行群聊,我們可以為房間設置一個唯一的名字來作為標識。那SignalR類庫里面是否有這樣現(xiàn)有的方法呢?答案是肯定的。

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

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

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

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

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

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

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

 /// <summary>
 /// 用戶房間集合,一個用戶可以加入多個房間
 /// </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>
 /// 上下文類,用來模擬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. 接下來,讓我們來看到集線器的實現(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("請勿重復加入房間!");
 }
 }

 /// <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("房間名重復!");
 }
 }

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

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

 // 查找要刪除的用戶
 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方法
 // 因為在加入房間的時候,已經(jīng)將客戶端的ConnectionId添加到Groups對象中了,所有可以根據(jù)房間名找到房間內(nèi)的所有連接Id
 // 其實我們也可以自己實現(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服務端的代碼實現(xiàn)已經(jīng)完成,接下來就讓我們一起看看客戶端視圖的實現(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中注冊的地址-->
 <script src="https://www.gxlcms.com/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);
 };

 //注冊查詢房間列表的方法
 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('請輸入您的名稱:', ''));

 $.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)過上面3步,聊天室的功能就已經(jīng)完成了,在看具體效果之前,這里附加一個幫助類的代碼:

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

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

四、運行結(jié)果  

接下來,就具體看看聊天室功能的運行效果,具體運行效果如下圖所示:

源碼下載:SignalRChatRoom

到這里,本篇的所有內(nèi)容都介紹完了,接下來我一篇文章將實現(xiàn)如何使用SignalR來實現(xiàn)發(fā)圖片的功能。

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

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

Asp.net使用SignalR實現(xiàn)聊天室的功能:一、引言 在前一篇文章《Asp.net使用SignalR實現(xiàn)酷炫端對端聊天功能》中,我向大家介紹了如何實現(xiàn)實現(xiàn)端對端聊天的功能的,在這一篇文章中將像大家如何使用SignalR實現(xiàn)群聊這樣的功能。 二、實現(xiàn)思路 要想實現(xiàn)群聊的功能,首先我們需要創(chuàng)建一個房間,然后每個
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top