SignalR2.0开发实例之——创建房间聊天
SignalR作为一个强大的集线器,已经在hub里面集成了Gorups,也就是分组管理,使用方法如下:

//作用:将连接ID加入某个组 //Context.ConnectionId 连接ID,每个页面连接集线器即会产生唯一ID //roomName分组的名称 Groups.Add(Context.ConnectionId, roomName); //作用:将连接ID从某个分组移除 Groups.Remove(Context.ConnectionId, roomName); //作用:调用分组内连接对象注册的本地JS //XXX:本地JS名称 //Room:分组名称 // new string[0]:过滤(不发送)的连接ID数组 Clients.Group(Room, new string[0]).XXXX

其实SignalR已经帮我们封装的很好了,关键代码其实就这三句..
废话不多说,下面开始讲我的实现.
首先实体类(参考微软Demo):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;
using Microsoft.AspNet.SignalR;
namespace SignalRTest
{
public class UserContext
{
public UserContext()
{
Users = new List<User>();
Connections = new List<Connection>();
Rooms = new List<ConversationRoom>();
}
//用户集合
public List<User> Users { get; set; }
//连接集合
public List<Connection> Connections { get; set; }
//房间集合
public List<ConversationRoom> Rooms { get; set; }
}
public class User
{
[Key]
//用户名
public string UserName { get; set; }
//用户的连接
public List<Connection> Connections { get; set; }
//用户房间集合
public virtual List<ConversationRoom> Rooms { get; set; }
public User()
{
Connections = new List<Connection>();
Rooms = new List<ConversationRoom>();
}
}
public class Connection
{
//连接ID
public string ConnectionID { get; set; }
//用户代理
public string UserAgent { get; set; }
//是否连接
public bool Connected { get; set; }
}
/// <summary>
/// 房间类
/// </summary>
public class ConversationRoom
{
//房间名称
[Key]
public string RoomName { get; set; }
//用户集合
public virtual List<User> Users { get; set; }
public ConversationRoom()
{
Users = new List<User>();
}
}
}

然后聊天室的Hub(这里我就不解释了,每句话我都加了注释,注释+代码方便大家理解..):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR.Hubs;
using Newtonsoft.Json;
namespace SignalRTest
{
[HubName("groupsHub")]
public class GroupsHub : Hub
{
public static UserContext db = new UserContext();
public void Hello()
{
Clients.All.hello();
}
/// <summary>
/// 重写Hub连接事件
/// </summary>
/// <returns></returns>
public override Task OnConnected()
{
// 查询用户。
var user = db.Users.SingleOrDefault(u => u.UserName == Context.ConnectionId);
//判断用户是否存在,否则添加
if (user == null)
{
user = new User()
{
UserName = Context.ConnectionId
};
db.Users.Add(user);
}
//发送房间列表
var itme = from a in db.Rooms
select new { a.RoomName };
Clients.Client(this.Context.ConnectionId).getRoomlist(JsonConvert.SerializeObject(itme.ToList()));
return base.OnConnected();
}
/// <summary>
/// 更新所有用户的房间列表
/// </summary>
private void GetRoomList()
{
var itme = from a in db.Rooms
select new { a.RoomName };
string jsondata = JsonConvert.SerializeObject(itme.ToList());
Clients.All.getRoomlist(jsondata);
}
/// <summary>
/// 重写Hub连接断开的事件
/// </summary>
/// <returns></returns>
public override Task OnDisconnected()
{
var user = db.Users.Where(u => u.UserName == Context.ConnectionId).FirstOrDefault();
//判断用户是否存在,存在则删除
if (user != null)
{
//删除用户
db.Users.Remove(user);
// 循环用户的房间,删除用户
foreach (var item in user.Rooms)
{
RemoveFromRoom(item.RoomName);
}
}
return base.OnDisconnected();
}
/// <summary>
/// 加入聊天室
/// </summary>
/// <param name="roomName"></param>
public void AddToRoom(string roomName)
{
//查询聊天室
var room = db.Rooms.Find(a=>a.RoomName==roomName);
//存在则加入
if (room != null)
{
//查找房间中是否存在此用户
var isuser = room.Users.Where(a => a.UserName == Context.ConnectionId).FirstOrDefault();
//不存在则加入
if (isuser == null)
{
var user = db.Users.Find(a => a.UserName == Context.ConnectionId);
user.Rooms.Add(room);
room.Users.Add(user);
Groups.Add(Context.ConnectionId, roomName);
//调用此连接用户的本地JS(显示房间)
Clients.Client(Context.ConnectionId).addRoom(roomName);
}
else
{
Clients.Client(Context.ConnectionId).showMessage("请勿重复加入房间!");
}
}
}
/// <summary>
/// 创建聊天室
/// </summary>
/// <param name="roomName"></param>
public void CreatRoom(string roomName)
{
var room = db.Rooms.Find(a => a.RoomName == roomName);
if (room == null)
{
ConversationRoom cr = new ConversationRoom()
{
RoomName = roomName
};
//将房间加入列表
db.Rooms.Add(cr);
AddToRoom(roomName);
Clients.Client(Context.ConnectionId).showMessage("房间创建完成!");
GetRoomList();
}
else
{
Clients.Client(Context.ConnectionId).showMessage("房间名重复!");
}
}
/// <summary>
/// 退出聊天室
/// </summary>
/// <param name="roomName"></param>
public void RemoveFromRoom(string roomName)
{
//查找房间是否存在
var room = db.Rooms.Find(a => a.RoomName == roomName);
//存在则进入删除
if (room != null)
{
//查找要删除的用户
var user = room.Users.Where(a => a.UserName == Context.ConnectionId).FirstOrDefault();
//移除此用户
room.Users.Remove(user);
//如果房间人数为0,则删除房间
if (room.Users.Count <= 0)
{
db.Rooms.Remove(room);
}
Groups.Remove(Context.ConnectionId, roomName);
//提示客户端
Clients.Client(Context.ConnectionId).removeRoom("退出成功!");
}
}
/// <summary>
/// 给分组内所有的用户发送消息
/// </summary>
/// <param name="Room">分组名</param>
/// <param name="Message">信息</param>
public void SendMessage(string Room, string Message)
{
Clients.Group(Room, new string[0]).sendMessage(Room,Message+" "+DateTime.Now.ToString());
}
}
}

前端HTML+JS:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<!--这里要注意,这是虚拟目录,也就是你在OWIN Startup中注册的地址-->
<script src="signalr/hubs"></script>
<script>
var chat
var roomcount = 0;
$(function () {
chat = $.connection.groupsHub;
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.addRoom = function (roomname) {
var html = '<div style="float:left; margin-left:30px; border:double" id="' + roomname + '" roomname="' + roomname + '"><button onclick="RemoveRoom(this)">退出</button>\
' + roomname + '房间\
聊天记录如下:<ul>\
</ul>\
<input type="text" /> <button onclick="SendMessage(this)">发送</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 () {
if (roomcount < 2) {
chat.server.creatRoom($("#Roomname").val());
roomcount++;
} else {
alert("聊天窗口只允许有2个")
}
})
});
});
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);
}
function RemoveRoom(btn) {
var room = $(btn).parent();
var roomname = $(room).attr("roomname");
chat.server.removeFromRoom(roomname);
}
function AddRoom(roomname) {
var data =$(roomname).attr("roomname");
chat.server.addToRoom(data);
}
</script>
</head>
<body>
<div>
<div>名称:<p id="username"></p></div>
输入房间名:
<input type="text" value="asdasd" id="Roomname" />
<button id="CreatRoom">创建聊天室</button>
</div>
<div style="float:left;border:double">
<div>房间列表</div>
<ul id="roomlist">
</ul>
</div>
<div id="RoomList">
</div>
</body>
</html>

结果展示:
源码连接:http://pan.baidu.com/s/1bnSPDN5
参考资料:
http://www.cnblogs.com/GuZhenYin/p/4626379.html
SignalR2.0开发实例之——创建房间聊天的更多相关文章
- SignalR2.0开发实例之——设置时间、后台其他地方使用集线器、使用自己的连接ID
一.连接的生命周期设置: 如下: // 该值表示连接在超时之前保持打开状态的时间长度. //默认为110秒 GlobalHost.Configuration.ConnectionTimeout = T ...
- SignalR2.0开发实例之——私聊
一.前言 继续上一章的补充,这章介绍使用私聊的功能.主要通过一个方法 Clients.Client(Context.ConnectionId).showMessage(msg); SignalR框 ...
- SignalR2.0开发实例之——群发消息
一.前言 ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相 ...
- SignalR2.0开发实例之——负载均衡
SignalR 2.0作为一个新的而且强大的通信工具,发布博客之后得到了很多人的支持,谢谢...也有人对性能和架设等问题提出了各种质疑..真的很感谢.. 我特意下载了SignalR 2.0的源码硬着头 ...
- 一篇对OAuth2.0开发实例的介绍
今天看到了博友对SSO的文章,SSO单点登录的讲解突然想写一篇关于OAuth2.0用户授权的介绍. 应用场景:在APP或者网页接入一些第三方应用时,时长会需要用户登录另一个合作平台,比如QQ,微博,微 ...
- 用SignalR 2.0开发客服系统[系列2:实现聊天室]
前言 交流群:195866844 上周发表了 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 这篇文章,得到了很多帮助和鼓励,小弟在此真心的感谢大家的支持.. 这周继续系列2,实现聊天室 ...
- Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试
Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试一.下载相关安装包 1.下载nginx最新版本(nginx1.3.13版之后才支持websocket协议) 下载地址 ...
- MVC5中使用SignalR2.0实现实时聊天室
原文 MVC5中使用SignalR2.0实现实时聊天室 有时候需要浏览器和服务端保持实时的通讯(比如在线聊天),SignalR的出现让这一切变得非常简单.它能够让服务端向客户端实时的推送消息.如果用户 ...
- 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(中)
接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...
随机推荐
- BOM头问题
最近有不少在微博上谈论BOM头问题,BOM头会造成页面展示的乱码,xml分析出现问题.而我恰巧遇到一种情况,在wml页面中如果加上BOM头,PC浏览器(IE,火狐)和手机浏览器(UC)都很正常,而如果 ...
- php 学习路线 赵兴壮2014年4月28 日 加油
第一阶段 第一讲,WEB基础 1.1 网站基本知识: 1.2 网络协议介绍: 1.3 B/S与C/S结构的区别: 1.4 WEB编程.网站开发技术介绍. 第二讲,网页设计 2 ...
- TableView_图片异步加载 KVO
TableView 异步下载图片 ImageDownloader.h #pragma mark - 声明block //1,声明block typedef void(^Result) (UIImage ...
- UI、ID、UE和GUI,这些都是什么
在网页和应用设计领域中,我们经常会听到人们用这些英文缩写描述设计工作,那么它们各自代表什么含义?具体的工作.方向和区别是什么呢? 下面让我们先来看看它们的英文全称和基本概念. UI(User Inte ...
- Android 部分属性学习
android:imeOptions属性 谈一下个人的理解,设置软件盘中下一个/完成按钮的显示,如果需要监听软件盘中该按钮的事件,则需要实现 setOnEditorActionListener 其实, ...
- chrome 打不开网页
右键单击Chrome在桌面的快捷方式,在在但中选择“属性”,在对话框的“目标”项目中追加:-no-sandbox 大家比较熟悉的解决方法有配置 Hosts 文件和使用FQ软件两种,配置 Hos ...
- sigaction 用法实例
sigaction函数的功能是检查或修改与指定信号相关联的处理动作(可同时两种操作). 他是POSIX的信号接口,而signal()是标准C的信号接口(如果程序必须在非POSIX系统上运行,那么就应该 ...
- 2014-07-29 浅谈MVC框架中Razor与ASPX视图引擎
今天是在吾索实习的第15天.随着准备工作的完善,我们小组将逐步开始手机端BBS的开发,而且我们将计划使用MVC框架进行该系统的开发.虽然我们对MVC框架并不是非常熟悉,或许这会降低我们开发该系统的效率 ...
- HDU_2045——RPG问题,递推
Problem Description 人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多“Cole”(LELE的粉丝,即"可乐"),经过多方打探,某资深Co ...
- [HNOI 2013] 消毒 (搜索,二分图匹配)
题目大意 一个a * b * c(a * b * c <= 5000)大小的长方体中有一些点需要被覆盖,每次可以选择任意大小的长方体,覆盖其中的点,产生的代价为这个长方体长宽高中最小的那个的长度 ...