开发者社区> 毒逆天> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

 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
2
3
4
5
6
7
8
9
10
11
<!--
总结一下:
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()
    });
-->

代码贴起:

View Code

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

下面说一下上面的好处:

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群的群发消息了

 

这个是逆天的自学笔记:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spring 全家桶之 Spring Boot 2.6.4(六)- Web Develop(Part A)
Spring 全家桶之 Spring Boot 2.6.4(六)- Web Develop(Part A)
20 0
WebSocket + Redis简单快速实现Web网站单设备登录功能
单设备登录作用很明显,就是为了保护用户账号安全,今天我们不说手机APP,我们来说说PC Web网站如何简单快速实现这种效果。本篇文章重点是实现单设备登录,内容未涉及WebSocket + Redis的概念和使用方法。限于本人经验,如有错误,欢迎指正。
28 0
for循环+scp一行命令实现批量推送文件到多台远程服务器
for循环+scp一行命令实现批量推送文件到多台远程服务器
17 0
并发扣款一致性优化,CAS下ABA问题,这个话题还没聊完!!!
select&set业务场景,在并发时会出现一致性问题。
774 0
[教程]在CentOS7上配置 FTP服务器 Proftpd 支持 MySQL 虚拟用户加密认证以及磁盘限额(Quota)
本文软件采用 yum 安装,不需要编译,而且随时都可以跟随 CentOS 升级 Proftpd 到最新版本,以避免可能的漏洞攻击。利用 Proftpd 现成的配置以及设置好的各种模块,可以实现 sftp 和 ssh 的结合,完美的实现虚拟用户加密密码存放于数据库。
4088 0
《信息物理融合系统(CPS)设计、建模与仿真——基于 Ptolemy II 平台》——1.2 域和计算模型
本节书摘来自华章出版社《信息物理融合系统(CPS)设计、建模与仿真——基于 Ptolemy II 平台》一书中的第1章,第1.2节,作者:[美]爱德华·阿什福德·李(Edward Ashford Lee),更多章节内容可以访问云栖社区“华章计算机”公众号查看 1.2域和计算模型 Ptolemy II中的语义域(semantic domain),通常称为域(domain),它定义了设计中两个组件交互的“物理定律”。
1447 0
sql点滴—mysql中查询表的信息
mysql中查询表的信息 查询mysql表字段信息的sql语句 SHOW DATABASES //列出 MySQL Server 数据库。
645 0
基于Java Socket实现的SMTP邮件客户端 - 全面支持SSL, TLS
协议完成有: - 最小化完成了RFC821, RFC822, 简单的邮件发送协议,邮件格式化协议 - 最小化完成RFC4648 - Base64编码协议 - 完成扩展协议[MS-XLOGIN] - 基于SSLSocket完成的支持 SSL, TLS等加密SMTP传输协议 基于Swing程序界面: 支持操作如下: - 设置 SMTP Server, 端口, 用户名和密码 - 编辑简单纯文本E-Mail内容,发送E-Mail 项目文件列表: 基于Swing的Model和View分离原则完成编码。
922 0
+关注
毒逆天
目前不太用云栖, 博客园地址:http://dunitian.cnblogs.com;GitHub地址:https://github.com/dunitian
文章
问答
文章排行榜
最热
最新
相关电子书
更多
微信PaxosStore简介
立即下载
微信 H5 视频播放器在海量业务下的实践
立即下载
微信H5视频播放器在海量业务下的实践
立即下载