前言

随着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使用的更多相关文章

  1. SignalR系列续集[系列8:SignalR的性能监测与服务器的负载测试]

    目录 SignalR系列目录 前言 也是好久没写博客了,近期确实很忙,嗯..几个项目..头要炸..今天忙里偷闲.继续我们的小系列.. 先谢谢大家的支持.. 我们来聊聊SignalR的性能监测与服务器的 ...

  2. ABP文档 - SignalR 集成

    文档目录 本节内容: 简介 安装 服务端 客户端 连接确立 内置功能 通知 在线客户端 帕斯卡 vs 骆峰式 你的SignalR代码 简介 使用Abp.Web.SignalR nuget包,使基于应用 ...

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

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  4. SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论

    异常汇总:http://www.cnblogs.com/dunitian/p/4523006.html#signalR 后台创建了一个DntHub的集线器 前台在调用的时候出现了问题(经检查是代理对象 ...

  5. 基于SignalR实现B/S系统对windows服务运行状态的监测

    通常来讲一个BS项目肯定不止单独的一个BS应用,可能涉及到很多后台服务来支持BS的运行,特别是针对耗时较长的某些任务来说,Windows服务肯定是必不可少的,我们还需要利用B/S与windows服务进 ...

  6. SignalR SelfHost实时消息,集成到web中,实现服务器消息推送

    先前用过两次SignalR,但是中途有段时间没弄了,今天重新弄,发现已经忘得差不多了,做个笔记! 首先创建一个控制台项目Nuget添加引用联机搜索:Microsoft.AspNet.SignalR.S ...

  7. SignalR系列目录

    [置顶]用SignalR 2.0开发客服系统[系列1:实现群发通讯] [置顶]用SignalR 2.0开发客服系统[系列2:实现聊天室] [置顶]用SignalR 2.0开发客服系统[系列3:实现点对 ...

  8. 基于SignalR的消息推送与二维码描登录实现

    1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...

  9. XAMARIN.ANDROID SIGNALR 实时消息接收发送示例

    SignalR 是一个开发实时 Web 应用的 .NET 类库,使用 SignalR 可以很容易的构建基于 ASP.NET 的实时 Web 应用.SignalR 支持多种服务器和客户端,可以 Host ...

  10. ABP源码分析三十二:ABP.SignalR

    Realtime Realtime是ABP底层模块提供的功能,用于管理在线用户.它是使用SignalR实现给在线用户发送通知的功能的前提 IOnlineClient/OnlineClient: 封装在 ...

随机推荐

  1. [LeetCode] 234. Palindrome Linked List 解题思路

    Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O(n) time ...

  2. CSS Sprites的详细使用步骤

    一.把小图放在一张大图中,先排版好.上几张图看看,就比如这个: 谷歌: 淘宝: 土豆右下角悬浮框: 1.把用到的小图都放到了一张大图里,其中的小图之间的排版是有点规律的,比如说淘宝那张,类似的小图放置 ...

  3. angularjs ngrepeat filter

    angularjs ng-repeat filter演示样例 地址

  4. UVA 11551 - Experienced Endeavour(矩阵高速幂)

    UVA 11551 - Experienced Endeavour 题目链接 题意:给定一列数,每一个数相应一个变换.变换为原先数列一些位置相加起来的和,问r次变换后的序列是多少 思路:矩阵高速幂,要 ...

  5. web开发性能优化---扩展性能篇

    1.实现代码分离 一个成熟的软件开发团队一般都不会全然手写代码.这里讲的代码分离仅仅要是开发中用到的小技巧,通过底层框架+手工代码方式结合实现高速开发和高速扩展. Code目录内文件不同意改动,目录主 ...

  6. AndroidManifest.xml解释说明和android的启动过程

    1.android清单文件:AndroidManifest.xml 说明如下: <?xml version="1.0" encoding="utf-8"? ...

  7. centos6.7 install chrome

    1.yum仓库 (如果用rpm包安装 可以忽略此步) vim /etc/yum.repos.d/google-chrome.repo [google-chrome] name=google-chrom ...

  8. CEO、COO、CFO、CTO

    CEO.COO.CFO.CTO是什么意思? 网站里的各种职位: CEO(Chief executive officer)首席执行官 类似总经理.总裁,是企业的法人代表. COO(Chief opera ...

  9. 用Markdown优雅的渲染我们的网页

    认识 Markdown Markdown 是一种用来写作的轻量级「标记语言」,它用简洁的语法代替排版,而不像一般我们用的字处理软件 Word 或 Pages 有大量的排版.字体设置.它使我们专心于码字 ...

  10. Nico Game Studio 3.地图纹理编辑 物体皮肤编辑

    完成功能: 1.地图纹理编辑功能. 图层编辑,添加/删除纹理,地图编辑.网格绘制.