使用 SignalR 进行实时时钟

• 下载 RealTimeClock.zip - 793 KB

引言

本文内容

1. 什么是实时通信。
2. 什么是 SignalR。
3. 示例应用程序。

什么是实时通信

在实时通信中，服务器在不等待客户端请求的情况下，将数据推送到连接的客户端或通知更新。在实时通信中，客户端也可以在不轮询完整 HTTP 请求的情况下将数据发送到服务器。 在实时通信中，Web 浏览器看起来就像一个桌面应用程序。

什么是 SignalR

SignalR 是一个 asp.net 包，用于在 Web 应用程序中实现实时通信功能。它适用于 VS2012 及更高版本。可以使用 NuGet 下载。它结合了服务器端代码和客户端 JavaScript。 它提供了一种在服务器和客户端之间实现实时通信的简单方法。 SignalR 使用 Web Socket 进行通信，并隐藏了套接字实现对开发者的复杂性。 它在服务器端使用 Hub 类，在客户端使用 jQuery。

示例应用程序

本示例应用程序展示了如何在 Asp.Net 项目中安装 SignalR，并描述了如何使用 SignalR 显示实时时钟。通过从下拉列表中选择一个国家，时钟将在浏览器中显示该选定国家的本地时间，并使用 SignalR 从服务器更新时间，而不是从客户端使用 JavaScript。我使用了 VS2013 作为 IDE。

步骤如下。

1. 使用 ASP.NET Web 应用程序模板创建一个空项目。
2. 使用 NuGet 程序包管理器安装 SignalR 服务器和客户端程序包。
3. 安装的 jQuery 库如下图所示。
4. 现在，在 App_Code 文件夹内的项目中添加一个 SignalR Hub 类。
5. Hub 类包含由客户端调用的公共函数。在 Hub 中添加一个名为 getTime 的公共函数。此函数将国家时区作为参数，并将系统日期时间转换为选定的时区，然后将转换后的日期时间推送到调用方浏览器。

   public void getTime(string countryZone)
   {
       TimeZone currentZone = TimeZone.CurrentTimeZone;
       DateTime currentDate = DateTime.Now;
       DateTime currentUTC = currentZone.ToUniversalTime(currentDate);
       TimeZoneInfo selectedTimeZone = TimeZoneInfo.FindSystemTimeZoneById(countryZone);
       DateTime currentDateTime = TimeZoneInfo.ConvertTimeFromUtc(currentUTC, selectedTimeZone);
       Clients.Caller.setTime(currentDateTime.ToString("h:mm:ss tt"));
   }
   

   调用此函数的客户端代码如下所示。

   var hubProxy = $.connection.clockHub;
   hubProxy.server.getTime(countryZone);
   
   

6. 现在，在项目中添加一个 OWIN Startup 类。
7. 向 Startup 类添加以下代码，以便在启动时将 SignalR 与项目映射。

   public void Configuration(IAppBuilder app)
   {
       app.MapSignalR("/signalr", new HubConfiguration());
   }
   

8. 在项目中添加一个 html 页面，用于在浏览器中显示时钟。客户端脚本引用如下：

   src="/Scripts/jquery-1.6.4.min.js"
   src="/Scripts/jquery.signalR-2.2.0.min.js"
   src="/signalr/hubs" 
   src="/Scripts/Client.js"

   这里首先添加了 jQuery 库，然后添加了 jQuery SignalR 库，最后添加了 hub 脚本的引用，该脚本由服务器动态生成。

9. 现在，在 Scripts 文件夹中添加一个 Client.js 脚本文件。添加客户端代码，使客户端连接到服务器并调用 hub 类中的函数。下面的示例客户端 JavaScript 代码显示了这一点。

   var hubProxy = $.connection.clockHub;
   
   hubProxy.client.setTime = function (time) {
       $('#clock').html(time);
   };
   
   $.connection.hub.start().done(function () {
       setInterval(function () {
           hubProxy.server.getTime(countryZone);
       }, 1000);
   });
   

   在上述代码中，首先创建了一个代理对象，然后将一个回调函数的引用分配给代理客户端对象，当服务器将更新推送到浏览器时，该函数会被触发。最后，调用 start 函数来启动通信。连接成功完成后，setInterval JavaScript 函数每秒调用一次 getTime 服务器函数，直到浏览器关闭。然后服务器执行 hub 函数，并在不刷新整个页面的情况下将响应发送到连接的浏览器。用于将更新推送到客户端的服务器端代码如下所示。

   Clients.Caller.setTime(currentDateTime.ToString("h:mm:ss tt"));
   

   这里调用客户端函数 setTime 来更新客户端。收到响应后，客户端执行回调函数，并使用新数据更新时钟。

10. 在浏览器中打开 html 页面。浏览器将显示如下所示的时钟。

结论

总之，SignalR 是一个非常优秀且易于实现的实时通信工具。它在服务器端使用 Hub 类，在客户端使用 jQuery。它就像服务器和客户端之间的远程过程调用。实时通信用于许多应用程序，如浏览器聊天、实时仪表板等。