练习SignalR使用
前言
随着Ajax越来越普遍的使用,前端页面跟后台服务也越来越密切的进行交互,实现前后端进行实时的消息传递尤为重要,一文件上传为例,现在普遍使用ajax上传然后通过flash进行文件进度的显示,这是目前普遍的用法。
而在.net 4.0以后,出现了一种新的实现页面跟后端服务实时消息传递的方式:SignalR
SignalR简介
官方解释:
当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据。
实现实时服务器与客户端通信。
是一个开源.NET 库生成需要实时用户交互或实时数据更新的 web 应用程序。
SignalR的出现,让页面通过javascript可以很简单的调用后端服务的方法,而在后端也可以很简单的直接调用javascript所实现的方法,从而达到前后端可以进行实时通信。
注意:
SignalR 会自动管理连接。客户端和服务器之间的连接是持久性的,不像传统的 HTTP 连接。
SignalR传输方式
SignalR会根据当前浏览器自动选择适当的传输方式。在最坏的情况下,SignalR会选择使用长轮询(Long Polling).
SignalR会依照下列顺序来判定使用那种传输方式:
- 1.如果浏览器是 Internet Explorer8 或更早版本,则使用长轮询。
- 2.如果配置了 JSONP(即连接启动时 jsonp 参数设置为 true),则使用长轮询。
- 3.如果要建立跨域连接(即 SignalR 终结点和宿主页不在相同的域中),并且满足以下条件,则会使用 WebSocket:
- 3.1客户端支持 CORS(跨域资源共享)
- 3.2客户端支持 WebSocket
- 3.3服务器支持 WebSocket
- 如果这些条件中的任何一条不满足,将使用长轮询.
- 4.如果未配置 JSONP 并且连接没有跨域,只要客户端和服务器都支持的话,将使用 WebSocket。
- 5.如果客户端或服务器不支持 WebSocket,则尽量使用服务器发送事件。Forever Frame。
- 7.如果 Forever Frame 失败,则使用长轮询。
长轮询(long polling)与传统Ajax的不同之处
- 服务器端会阻塞请求直到有数据传递或超时才返回。
- 客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。
- 当客户端处理接收的数据、重新建立连接时,服务器端可能有新的数据到达;这些信息会被服务器端保存直到客户端重新建立连接,客户端会一次把当前服务器端所有的信息取回。
SignalR使用
1.官方实例
参考:
根据官网步骤很容易成功创建SignalR的demo.
需要注意的是,本人为了在.net 4.0下演示,所以实用的SignalR 1.x版本。
2.模拟实例
编程是需要自己动手实践的。下面我将根据在上面创建的项目中模拟一个实时进度条的demo.
说明:
页面上就只有一个按妞,点击按钮后,会发送ajax请求道后端,后端会不停发送消息给页面,页面根据接收到的消息来控制进度条。
HTML 代码(Interaction.aspx)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/Scripts/jquery-1.6.4.min.js"></script>
<script src="/Scripts/jquery.signalR-1.1.4.js"></script>
<script src="/signalr/hubs"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="loading" style="width: 0%;">Loading</div>
</div>
<input id="submit" type="button" value="Start" />
<div id="result"></div>
</form> <script type="text/javascript">
$(function () {
//创建后台hub通信类
var myHub = $.connection.interactionHub; //实现后台调用的notify方法,注意,并不是InteractionHub类的静态方法Notify
myHub.client.notify = function (msg) {
$("#loading").css({
"background-color": "blue",
"width": Number(msg) + "%"
});
}; $.connection.hub.start().done(function () {
// 调用后端InteractionHub类的AddToGroups()方法
myHub.server.addToGroups("Interaction");
$("#submit").click(function () {
$.ajax({
type: "POST",
url: "Interaction.aspx",
data: { action: "ajax" }
});
});
}); });
</script>
</body>
</html>
页面后台代码(Interaction.aspx.cs)
public partial class Interaction : System.Web.UI.Page
{
InteractionHub hub = new InteractionHub();
protected void Page_Load(object sender, EventArgs e)
{
string action = Request["action"];
if (action == "ajax")
{
InteractionWithFront();
}
} public void InteractionWithFront()
{
for (int i = ; i < ; i++)
{
//模拟处理,并发送消息
InteractionHub.Notify(new InteractionMessage("Interaction", i + ));
Thread.Sleep();
}
}
}
Hub类(InteractionHub.cx)
namespace RignalRDemo
{
public class InteractionHub : Hub
{
public static void Notify(InteractionMessage msg)
{
var hubContext = GlobalHost.ConnectionManager.GetHubContext<InteractionHub>();
//注意调用的notify() 该方法会在页面javascript中实现
hubContext.Clients.Group(msg.Key).notify(msg.Message);
} public void AddToGroups(string key)
{
this.Groups.Add(this.Context.ConnectionId, key);
}
} public class InteractionMessage
{
public string Key { get; set; }
public int Message { get; set; } public InteractionMessage(string k, int msg)
{
this.Key = k;
this.Message = msg;
}
}
}
说明:
1.Hub类,在javascript中使用是采用驼峰命名法。所以注意大小写的使用.
2.javascript注意实现hub类中需要被前端调用的方法
3.javascript中,注意使用client 和server 关键字来调用前端方法和后端方法。
4.当web应用中使用了较多的SignalR连接来通信时, 注意使用连接组(Group)来将匹配的signalR连接对应起来。请参考上例 InteractionHub类.
demo代码下载:SignalRDemo(请使用VS2012打开)
参考资料:
SignalR 简介 (必读)
首发:http://www.yuanxj.net/2014/02/signalr/
练习SignalR使用的更多相关文章
- SignalR系列续集[系列8:SignalR的性能监测与服务器的负载测试]
目录 SignalR系列目录 前言 也是好久没写博客了,近期确实很忙,嗯..几个项目..头要炸..今天忙里偷闲.继续我们的小系列.. 先谢谢大家的支持.. 我们来聊聊SignalR的性能监测与服务器的 ...
- ABP文档 - SignalR 集成
文档目录 本节内容: 简介 安装 服务端 客户端 连接确立 内置功能 通知 在线客户端 帕斯卡 vs 骆峰式 你的SignalR代码 简介 使用Abp.Web.SignalR nuget包,使基于应用 ...
- SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
- SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论
异常汇总:http://www.cnblogs.com/dunitian/p/4523006.html#signalR 后台创建了一个DntHub的集线器 前台在调用的时候出现了问题(经检查是代理对象 ...
- 基于SignalR实现B/S系统对windows服务运行状态的监测
通常来讲一个BS项目肯定不止单独的一个BS应用,可能涉及到很多后台服务来支持BS的运行,特别是针对耗时较长的某些任务来说,Windows服务肯定是必不可少的,我们还需要利用B/S与windows服务进 ...
- SignalR SelfHost实时消息,集成到web中,实现服务器消息推送
先前用过两次SignalR,但是中途有段时间没弄了,今天重新弄,发现已经忘得差不多了,做个笔记! 首先创建一个控制台项目Nuget添加引用联机搜索:Microsoft.AspNet.SignalR.S ...
- SignalR系列目录
[置顶]用SignalR 2.0开发客服系统[系列1:实现群发通讯] [置顶]用SignalR 2.0开发客服系统[系列2:实现聊天室] [置顶]用SignalR 2.0开发客服系统[系列3:实现点对 ...
- 基于SignalR的消息推送与二维码描登录实现
1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...
- XAMARIN.ANDROID SIGNALR 实时消息接收发送示例
SignalR 是一个开发实时 Web 应用的 .NET 类库,使用 SignalR 可以很容易的构建基于 ASP.NET 的实时 Web 应用.SignalR 支持多种服务器和客户端,可以 Host ...
- ABP源码分析三十二:ABP.SignalR
Realtime Realtime是ABP底层模块提供的功能,用于管理在线用户.它是使用SignalR实现给在线用户发送通知的功能的前提 IOnlineClient/OnlineClient: 封装在 ...
随机推荐
- Hadoop 中 Eclipse 的配置
先启动Hadoop守护进程,进入hadoop安装目录,执行bin/start-all.sh 主要是为了之后能正确测试 Ubuntu中下载安装Eclipse,执行sudo apt-get install ...
- Hadoop 配置好hive,第一次在conf能进入,第二次就不行了,怎么办?
问题描述: 在 Hadoop 配置好 hive 数据仓库,在conf目录下通过hive命令进入hive数据仓库,非常顺利. 但关闭终端,第二次按这种方式却显示,无次命令. 怎么办? 解决办法: 在h ...
- php中数组可以不写下标
<?php $array[10] = 10; for($i = 0; $i < 100; $i++){ $array[] = $i; } var_dump($array) ?> $a ...
- CF 19D 线段树+set压缩坐标轴+离散化map
题意: n个操作,在200000*200000的平面上加删点 find 严格在坐标右上角,x最小,再y最小的点 线段树做,区间为离散化后的 X轴坐标 ,维护区间点数 和 最小的 y 值 ( 维护最小y ...
- 图片上传unexpected end of stream
第二次上传头像图片的时候出现 unexpected end of stream 解决办法: 将第一次图片上传成功后做以下操作即可: mBitmapFile.delete(); mBitmapFile ...
- Android开发——新特性与知识点回顾
Fragment 用途:在一个Activity里切换界面,切换界面时只切换Fragment里面的内容 生命周期方法跟Activity一致,可以理解把其为就是一个Activity 定义布局文件作为Fra ...
- MINA学习之体系介绍
基于MINA应用程序结构图: 我们可以看出,MINA是应用程序(客户端或服务端)和底层基于TCP,UDP等通讯协议的网络层之间的粘合剂.而且各个模块之间是相互独立的,你只需要在MINA体 系基础上设计 ...
- 安装windows7、windows8.1提示无法创建新的分区
有时候用原版系统镜像安装windows系统时,会提示“windows无法安装到这个磁盘.选中的磁盘采用GPT分区形式”,导致安装失败,下面就来讲解一下如何解决. 1.在系统提示无法安装的那一步,按住“ ...
- EasyUI-在行内进行表格的增删改操作
第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...
- 【OpenCV十六新手教程】OpenCV角检测Harris角点检测
本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/29356187 作者:毛星云(浅墨) ...