转使用 SignalR 构建进度栏

Dino Esposito

下载代码示例

 尽管 AJAX 取得成功并得到采用，但仍缺乏不借助 Silverlight 或 Flash 即可在 Web 应用程序中显示上下文相关进度栏的被广泛接受的综合解决方案。

这个月，我重新讨论同一主题，但我将讨论如何使用以下仍在不断完善的新库构建进度栏： SignalR。

它提供了一些前景极为光明的功能，而这些功能正是 .NET Framework 当前不曾具有的，并且是越来越多的开发者所需要的。

SignalR 概览

对话通过永久连接进行，允许客户端向服务器发送多个消息，并允许服务器做出相应答复，值得注意的是，还允许服务器向客户端发送异步消息。

客户端通过向服务器发送消息来开始对话；服务器（ASP.NET 终结点）答复并持续侦听新请求。

 中看到的其他包用于其他特定目的，例如提供 .NET 客户端、Ninject 依赖关系解析程序和基于 HTML5 Web 套接字的备用传输机制。

  图 1 NuGet 平台上提供的 SignalR 包

深入探讨聊天示例

但请注意，SignalR 不是已发布项目。

在 ASP.NET MVC 项目的上下文中，您首先引用一些脚本文件，如下所示：

1.  
2.           <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")"
3.   type="text/javascript"></script>
4. <script src="@Url.Content("~/Scripts/jquery.signalr.min.js")"
5.   type="text/javascript"></script>
6. <script src="@Url.Content("~/signalr/hubs")"
7.   type="text/javascript"></script>
8.         

请注意，SignalR 中没有任何内容是特定于 ASP.NET MVC 的，此库同样可用于 Web 窗体应用程序。

还请注意，如果您打算支持低于 Internet Explorer 8 版的版本，则需要 JSON2 库。

代码将脚本处理程序绑定到 HTML 元素（非介入式 JavaScript）并准备 SignalR 对话。

图 2 为聊天示例建立 SignalR 库

1.  
2.           <script type="text/javascript">
3.   $(document).ready(function () {    // Add handler to Send button
4.     $("#sendButton").click(function () {
5.       chat.send($('#msg').val());
6.     });
7.     // Create a proxy for the server endpoint
8.     var chat = $.connection.chat; 
9.     // Add a client-side callback to process any data
10.     // received from the server
11.     chat.addMessage = function (message) {
12.       $('#messages').append('<li>' + message + '</li>');
13.     };
14.     // Start the conversation
15.     $.connection.hub.start();
16.   });
17. </script>
18.         

 中的客户端代码如果没有强大的服务器端对应部分，则没有多大意义（和作用）。

下面是类签名：

1.  
2.           using System;
3. using SignalR.Hubs;
4. namespace SignalrProgressDemo.Progress
5. {
6.   public class Chat : Hub
7.   {
8.     public void Send(String message)
9.     {
10.       Clients.addMessage(message);
11.     }
12.   }
13. }
14.         

 中的 Chat 对象具有 addMessage 方法，所以要求服务器端 Chat 对象也公开相同的 addMessage 方法。

准备进度栏演示

下面是签名：

1.  
2.           public class BookingHub : Hub
3. {
4.   ...
5.           }
6.         

例如，让我们添加一个方法来预订机票：

1.  
2.           public void BookFlight(String from, String to)
3. {
4.   ...
5.           }
6.         

假设 BookFlight 方法的框架如下所示：

1.  
2.           public void BookFlight(String from, String to)
3. {
4.   // Book first leg  var ref1 = BookFlight(from, to);  // Book return flight
5.   var ref2 = BookFlight(to, from);
6.   // Handle payment
7.   PayFlight(ref1, ref2);
8. }
9.         

然后，让我们转到客户端。

首先，获取服务器对象的代理：

1.  
2.           var bookingHub = $.connection.bookingHub;
3. // Some config work
4. ...
5.           // Open the connection
6. $.connection.hub.start();
7.         

您可以将单击处理程序添加到 HTML 按钮中并通过 AJAX 启动服务器操作，如下所示：

1.  
2.           bookingHub.bookFlight("fco", "jfk");
3.         

例如，您可以在客户端代理上定义接收消息并通过 HTML 范围标记显示消息的 displayMessage 方法：

1.  
2.           bookingHub.displayMessage = function (message) {
3.   $("#msg").html(message);
4. };
5.         

您决定传递什么内容和要求任何输入是什么类型。

 显示了 Hub 类的最终版本。

图 3 Hub 类的最终版本

1.  
2.           public void BookFlight(String from, String to)
3. {
4.   // Book first leg
5.   Clients.displayMessage(    String.Format("Booking flight: {0}-{1} ...", from, to));
6.   Thread.Sleep(2000);
7.   // Book return
8.   Clients.displayMessage(    String.Format("Booking flight: {0}-{1} ...", to, from));
9.   Thread.Sleep(3000);
10.   // Book return
11.   Clients.displayMessage(    String.Format("Booking flight: {0}-{1} ...", to, from));
12.   Thread.Sleep(2000);
13.   // Some return value
14.   Clients.displayMessage("Flight booked successfully.");
15. }
16.         

如果您将它错误键入为 DisplayMessage 之类，则不会获得任何异常，但也不会执行任何代码。

Hub 代码作为 Task 对象实现，因此它获取自己的线程来运行，并且不会影响 ASP.NET 线程池。

当收到消息并且有要执行的工作时，将使用 ASP.NET 工作线程。

使用 HTML 的真正进度栏

您可以通过合适的 CSS 类来更改 HTML 元素的外观。

图 4 创建基于 HTML 的规杆

1.  
2.           var GaugeBar = GaugeBar || {};
3. GaugeBar.generate = function (percentage) {
4.   if (typeof (percentage) != "number")
5.     return;
6.   if (percentage > 100 || percentage < 0)
7.     return;
8.   var colspan = 1;
9.   var markup = "<table class='gauge-bar-table'><tr>" +
10.     "<td style='width:" + percentage.toString() +
11.     "%' class='gauge-bar-completed'></td>";
12.   if (percentage < 100) {
13.     markup += "<td class='gauge-bar-tobedone' style='width:" +
14.       (100 - percentage).toString() +
15.       "%'></td>";
16.     colspan++;
17.   }
18.   markup += "</tr><tr class='gauge-bar-statusline'><td colspan='" +
19.     colspan.toString() +
20.     "'>" +
21.     percentage.toString() +
22.     "% completed</td></tr></table>";
23.   return markup;
24. }
25.         

您从按钮单击处理程序调用此方法：

1.  
2.           bookingHub.updateGaugeBar = function (perc) {
3.   $("#bar").html(GaugeBar.generate(perc));
4. };
5.         

您可以将以前使用的 displayMessage 替换为 Hub 方法中的 updateGaugeBar。

不仅是 Web 客户端

您可以为 .NET 桌面应用程序下载客户端，而且将很快发布支持 Windows Phone 客户端的另一个客户端。

请继续关注。