SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升,5个Demo贯彻全篇,感兴趣的玩才是真的学)

官方demo:http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr

源码http://pan.baidu.com/s/1dETGYGT

应用情景之一:

没太多连续的时间来研究SignalR,所以我把这篇文章分了三个阶段:

第一个阶段,简单使用,熟悉并认识SignalR

第二个阶段,实现上图的单聊效果

第三个阶段,实现类似QQ群发的功能

扩展阶段,如果有时间,逆天会再开一篇,封装一个LoTSignalR,看过逆天封装的人都知道,绝对简单又轻量级

比如LoTQQ,现在已经很多人在用了,后期会添加新功能,敬请期待~~

++++++++++++++++++ 我是华丽的分割线 +++++++++++++++++++++

步入正轨:

第一个阶段:

1.什么是ASP.NET SignalR?

ASP .NET SignalR是一个 ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消息及调用方法,当然这是实时操作的。

WebSockets是Html5提供的新的API,可以在Web网页与服务器端间建立Socket连接,当WebSockets可用时(即浏览器支持Html5)SignalR使用WebSockets,当不支持时SignalR将使用其它技术来保证达到相同效果。

SignalR当然也提供了非常简单易用的高阶API,使服务器端可以单个或批量调用客户端上的JavaScript函数,并且非常 方便地进行连接管理,例如客户端连接到服务器端,或断开连接,客户端分组,以及客户端授权,使用SignalR都非常 容易实现。

2.可以使用ASP.NET SingalR做什么?
SignalR 将与客户端进行实时通信带给了ASP .NET 。当然这样既好用,而且也有足够的扩展性。以前用户需要刷新页面或使用Ajax轮询才能实现的实时显示数据,现在只要使用SignalR,就可以简单实现了。

最重要的是您无需重新建立项目,使用现有ASP .NET项目即可无缝使用SignalR。

网上某架构图:

上面乱七八糟的估计很多人懒得看,好吧,你可以这样理解:

使用了SignalR就可以让客户端通过SignalR代理直接调用服务端的方法,让服务端通过SignalR直接调用客户端的方法

下面我们来实例演示一下,先演示一下不用IIS的情况:

新建一个控制台项目,引入 signalR Self Host (可以思考一下为什么会用NuGet包,他到底好在哪?O(∩_∩)O~不清楚等项目演示完你应该就知道了

这是他的依赖项

安装一下Owin.Cors

依赖项:

新增一个Owin的Startup类,类似于我们传统项目的Global文件

注册一下signalR中间组件(学过mvc的可以变相的理解为注册路由之类的)

在main方法中绑定端口(不一定是8080,比如我demo中就用的其他端口)

创建一个“SignalR集线器”(控制台这边因为没有集线器所以只能自己建类)

建了一个DntHub,定义了一个服务器端的方法,叫ServiceSend(一会会用到)

转到定义,看看Hub类(好东西啊,还有分组啥的,下面会讲)

运行一下,如果出错请参考我的这篇文章:http://www.cnblogs.com/dunitian/p/5232229.html

先看看共引用多少dll(和MVC之类的比起是不是简洁很多?一会演示好处在哪)最小引用

创建一个web的Client,引用一下 SignalR的js包,其实你会发现就是多了几个js包并没有引用任何dll(必须的,不然岂不是太臃肿?)

前端的调用步骤:

    <!--
总结一下:
1.先引入jq包,再引入signalR的js包,再引入signalR动态生成的hubs
2.设置signalR的hubs url地址:$.connection.hub.url =xxx
3.声明一个代理对象来引用集线器:var chat = $.connection.dntHub;
4.创建一个客户端方法:chat.client.xxxx=function(){}
5.启动并调用服务端方法:
$.connection.hub.start().done(function(){
chat.server.xxx()
});
-->

代码贴起:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单聊天程序</title>
<style type="text/css">
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.js"></script>
<!--动态生成的-->
<script src="http://localhost:5438/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
//日记记录
$.connection.hub.logging = true; //设置hubs的url
$.connection.hub.url = "http://localhost:5438/signalr"; // 声明一个代理来引用该集线器。
var chat = $.connection.dntHub; // 创建一个方法供服务端调用
chat.client.addMessage = function (name, message) {
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
$('#discussion').append('<li><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
};
$('#displayname').val('路人'); // 启动 connection
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
//调用服务器端方法
chat.server.serviceSend($('#displayname').val(), $('#message').val());
});
});
});
</script>
<!--
总结一下:
1.先引入jq包,再引入signalR的js包,再引入signalR动态生成的hubs
2.设置signalR的hubs url地址:$.connection.hub.url =xxx
3.声明一个代理对象来引用集线器:var chat = $.connection.dntHub;
4.创建一个客户端方法:chat.client.xxxx=function(){}
5.启动并调用服务端方法:
$.connection.hub.start().done(function(){
chat.server.xxx()
});
-->
</body>
</html>

如果要调试的话,保证服务端先运行,调试小技巧:

下面说一下上面的好处:

webclient我就单独拿出来了(一个js包,一个index.html),控制台的程序我也单独拿出来了,下面先运行一下服务端,再打开index.html

再次验证最上面说的,端口不固定

第二个阶段:

QQ聊天案例,先讲一种常规的方法,下面会讲一种简单方法

先看看gif效果图把

定义一个BaseHub类,里面用 qqModeList来临时存放数据(用户数据)

QQModel,目前就用到两个属性,其他的可以自己扩展

定义了一个上线方法,一会每个客户端都会调用(本来是准备用OnConnected的,没办法他没参数。。。而且这个时候,qq昵称还没有产生,于是我取其次的方案)

定义一个发消息的方法

下面就是前端的东西了,注释很详细,不清楚可以直接留言,我没高兴深度封装,主要就是简单演示一下

代码贴上:

客户端-逆天

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿QQ聊天--我是逆天</title>
<link href="Style/MyQQ.css" rel="stylesheet" />
</head>
<body>
<div><input id="inputMsg" /><input id="btn" type="button" value="发消息" /></div><br /><br />
<div id="main"></div> <script src="Scripts/jquery-2.2.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="http://localhost:5438/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var leftHtml = [
'<div class="sender">',
'<div><img src="http://img.jfdown.com/jfdown/201403/ygald3wajct.jpg"></div>',
'<div><div class="left_triangle"></div>',
'<span>{msg}</span></div></div>'
].join(''); var rightHtml = [
'<div class="receiver">',
'<div><img src="http://tb.himg.baidu.com/sys/portrait/item/306c9328?t=1397975854"></div>',
'<div><div class="right_triangle"></div>',
'<span>{msg}</span></div></div>'
].join(''); //设置hubs的url
$.connection.hub.url = 'http://localhost:5438/signalR';
// 声明一个代理
var qqProxy = $.connection.qQHub;
// 创建一个方法供服务端调用
qqProxy.client.sendMsg = function (msg) {
$('#main').append(leftHtml.replace('{msg}', msg));
}
// 启动 connection
$.connection.hub.start().done(function () {
qqProxy.server.online('逆天');//QQ昵称
$('#btn').click(function () {
//获取输入
var qqmsg = $('#inputMsg').val();
//给逆天发消息
qqProxy.server.serviceSend('妹子', qqmsg);
$('#main').append(rightHtml.replace('{msg}', qqmsg));
});
});
});
</script>
</body>
</html>

客户端-美女

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿QQ聊天--我是美女</title>
<link href="Style/MyQQ.css" rel="stylesheet" />
</head>
<body>
<div><input id="inputMsg" /><input id="btn" type="button" value="发消息" /></div><br /><br />
<div id="main"></div> <script src="Scripts/jquery-2.2.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="http://localhost:5438/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var rightHtml = [
'<div class="sender">',
'<div><img src="http://img.jfdown.com/jfdown/201403/ygald3wajct.jpg"></div>',
'<div><div class="left_triangle"></div>',
'<span>{msg}</span></div></div>'
].join(''); var leftHtml = [
'<div class="receiver">',
'<div><img src="http://tb.himg.baidu.com/sys/portrait/item/306c9328?t=1397975854"></div>',
'<div><div class="right_triangle"></div>',
'<span>{msg}</span></div></div>'
].join(''); //设置hubs的url
$.connection.hub.url = 'http://localhost:5438/signalR';
// 声明一个代理
var qqProxy = $.connection.qQHub;
// 创建一个方法供服务端调用
qqProxy.client.sendMsg = function (msg) {
$('#main').append(leftHtml.replace('{msg}', msg));
}
// 启动 connection
$.connection.hub.start().done(function () {
qqProxy.server.online('妹子');//QQ昵称
$('#btn').click(function () {
//获取输入
var qqmsg = $('#inputMsg').val();
//给逆天发消息
qqProxy.server.serviceSend('逆天', qqmsg);
$('#main').append(rightHtml.replace('{msg}', qqmsg));
});
});
});
</script>
</body>
</html>

第三阶段

群发

我们先接着昨天的QQ聊天来说

这次用一个简单的方法搞定

一个键值对集合存放ConnectionId和GroupName

每个客户端连接的时候会加入一个组

 断开的时候退出组
 发消息

前端也进行了优化。ok,signalR第三个demo诞生,比昨天简单多了

下面可以说说类似于QQ群的群发消息了

这个是逆天的自学笔记:

SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)的更多相关文章

  1. 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

    上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...

  2. 高仿QQ即时聊天软件开发系列之二登录窗口界面

    继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因 ...

  3. SignalR Self Host+MVC等多端消息推送服务(1)

    一.概述 由于项目需要,最近公司项目里有个模块功能,需要使用到即时获得审批通知:原本的设计方案是使用ajax对服务器进行定时轮询查询,刚刚开始数据量和使用量不大的时候还好,后来使用量的增加和系统中各种 ...

  4. SignalR Self Host+MVC等多端消息推送服务(2)

    一.概述 上次的文章中我们简单的实现了SignalR自托管的服务端,今天我们来实现控制台程序调用SignalR服务端来实现推送信息,由于之前我们是打算做审批消息推送,所以我们的demo方向是做指定人发 ...

  5. 高仿QQ即时聊天软件开发系列之一开端

    前段时间在园子里看到一个大神做了一个GG2014IM软件,仿QQ的,那感觉···,赶快下载源码过来试试,还真能直接跑起来,效果也不错.但一看源码,全都给封装到了ESFramework里面了,音视频那部 ...

  6. SignalR Self Host+MVC等多端消息推送服务(3)

    一.概述 最近项目确实太忙,而且身体也有点不舒服,慢性咽炎犯了,昨晚睡觉时喘不过气来,一直没休息好,也没什么时间写博客,今天朋友问我什么时候能出web端的消息发送的文章时,我还在忙着改项目的事,趁着中 ...

  7. SignalR Self Host+MVC等多端消息推送服务(4)

    由于工作太忙,一直没时间更新博客,之前有很多朋友一直问我什么时候将后续的代码发上来,一直没时间,今天就长话短说,不写文章了,直接上demo,里面将正式项目中用到的一些敏感信息修改了,要使用的话下载后自 ...

  8. devexpress显示缓冲滚动条与实现类似QQ消息推送效果

    1.一般在项目中处理大数据,或者查询大量数据时,耗时会很长,这个时候缓冲条是必不可少的.这里展示一个devexpress不错的缓冲条,如图所示: 使用到了控件splashScreenManager,运 ...

  9. WEB消息推送-原理篇

    这篇文章主要讲述B/S架构中服务器“推送”消息给浏览器.内容涉及ajax论询(polling),comet(streaming,long polling).后面会附上源代码. 最近在工作有这么一个需求 ...

随机推荐

  1. windows服务器。linux服务器的集成包推荐

    我对linux不熟悉,这个有点不好意思,虽然我是做php开发的.我只是对apache+php+mysql的操作熟悉而已,但是linux的服务器配置什么的都太懂 所以我就安装了windows2008,安 ...

  2. jQuery 图片剪裁插件初探之 Jcrop

    主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...

  3. jquery在线预览PDF文件,打开PDF文件(向下兼容ie8、ie7)

    最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  4. In_interrupt( ) 和In_irq( )【转】

    转自:http://blog.csdn.net/do2jiang/article/details/5486888 in_interrupt() 是判断当前进程是否处于中断上下文,这个中断上下文包括底半 ...

  5. java intellij 写控制台程序 窗口程序

    建一个空项目,建一个main函数  用application,就可以运行了 /**  * Created by robin on 15/10/11. */public class hello { pu ...

  6. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  7. 从JAR包中如何读取数据文件

    还不是很懂.....待总结......

  8. layui框架部分功能介绍

    注意:代码的所有功能都没有导入layui的css样式 一,分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介 ...

  9. python字典无限遍历

    #无限遍历dict,通过key获取value,嵌套字典存在多个相同的key,可获取多个key class getValues(object): def __init__(self): pass #无限 ...

  10. mysql 分库分表转

    分表是分散数据库压力的好方法. 分表,最直白的意思,就是将一个表结构分为多个表,然后,可以再同一个库里,也可以放到不同的库. 当然,首先要知道什么情况下,才需要分表.个人觉得单表记录条数达到百万到千万 ...