前言
随着Ajax越来越普遍的使用,前端页面跟后台服务也越来越密切的进行交互,实现前后端进行实时的消息传递尤为重要,一文件上传为例,现在普遍使用ajax上传然后通过flash进行文件进度的显示,这是目前普遍的用法。
而在.net
4.0以后,出现了一种新的实现页面跟后端服务实时消息传递的方式:SignalR
官方解释:
当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据。
实现实时服务器与客户端通信。
是一个开源.NET
库生成需要实时用户交互或实时数据更新的 web
应用程序。
SignalR的出现,让页面通过javascript可以很简单的调用后端服务的方法,而在后端也可以很简单的直接调用javascript所实现的方法,从而达到前后端可以进行实时通信。
注意:
SignalR
会自动管理连接。客户端和服务器之间的连接是持久性的,不像传统的 HTTP 连接。
SignalR传输方式
SignalR会根据当前浏览器自动选择适当的传输方式。在最坏的情况下,SignalR会选择使用长轮询(Long
Polling).
SignalR会依照下列顺序来判定使用那种传输方式:
长轮询(long polling)与传统Ajax的不同之处
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 = 0; i < 100; i++) { //模拟处理,并发送消息 InteractionHub.Notify(new InteractionMessage("Interaction", i + 1)); Thread.Sleep(200); } } }
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/
原文:http://www.cnblogs.com/kids/p/signalr.html