SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)-阿里云开发者社区

开发者社区> 浣熊干面包> 正文

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昵称还没有产生,于是我取其次的方案)

定义一个发消息的方法

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

代码贴上:

客户端-逆天

 View Code

客户端-美女

 View Code

 

第三阶段

 群发

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

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

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

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

 断开的时候退出组
 发消息

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

 

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

 

这个是逆天的自学笔记:


本文转自毒逆天博客园博客,原文链接:http://www.cnblogs.com/dunitian/p/5226515.html,如需转载请自行联系原作者

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

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6978 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7796 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5472 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
469 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
3861 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3262 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16906 0
941
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载