练习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=" 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/