用AngularJS构建实时信号仪表板-js教程-PHP中文网

关键要点

技术架构

客户端

服务器端

核心内容

开始设置

使用纯文本文件进行设置

主要依赖项

使用Visual Studio进行设置

让我们编写我们的应用程序

服务器的核心方面

结论

使用AngularJS构建实时SignalR监控面板的常见问题解答 (FAQ)

如何在AngularJS中设置SignalR？

如何处理SignalR中的连接错误？

我可以将SignalR与其他JavaScript框架一起使用吗？

如何使用SignalR将消息从服务器发送到客户端？

如何保护我的SignalR应用程序？

如何处理SignalR中的断开连接？

我可以在非.NET服务器上使用SignalR吗？

如何测试我的SignalR应用程序？

我可以在移动应用程序中使用SignalR吗？

如何扩展我的SignalR应用程序？

首页

web前端

js教程

用AngularJS构建实时信号仪表板

William Shakespeare

Feb 20, 2025 pm 12:45 PM

构建实时服务监控面板！

Build a Real-time SignalR Dashboard with AngularJS 我们的服务监控面板将实时显示真实数据。它将以近乎实时的、异步的、非阻塞的方式向我们展示服务器和微服务上发生的情况。

点击此处查看完整客户端示例。

观看使用D3.js可视化数据，用JavaScript阐述你的数据！观看此课程观看此课程此处展示服务器演示。

我们将使用AngularJS框架和许多炫酷的实时图表以及大量实时数据来构建此监控面板的简化版本。我们还将使用.NET 4.5的SignalR和Web API库构建我们的服务。

关键要点

利用AngularJS和SignalR创建一个实时监控面板，异步且非阻塞地显示服务器和微服务的活动。
使用纯文本文件或Visual Studio设置项目，依赖项包括AngularJS、jQuery、Bootstrap、SignalR以及各种图表库，如D3.js和Epoch。
在服务器端实现SignalR中心来管理实时数据传输，利用.NET处理异步请求和向客户端推送通知的能力。
开发AngularJS服务和控制器来处理从SignalR中心接收的数据，实时更新UI以反映服务器性能指标的变化。
集成ng-epoch和n3-pie等图表解决方案来直观地表示数据，增强监控面板的交互性和用户参与度。

技术架构

客户端

AngularJS开箱即用地强制执行良好的应用程序开发实践。所有内容都是注入的，这意味着依赖项的耦合度低。此外，Angular在视图、模型和控制器之间具有良好的分离。

Angular在这里补充了.NET，允许服务器端代码保持小巧、易于管理和可测试。服务器端代码仅用于发挥其优势——进行繁重的处理。

服务器端

将SignalR与.NET 4.5的Web API一起使用与将Node.js与Socket.IO一起使用非常相似，并允许从服务器到订阅客户端进行相同类型的非阻塞、异步推送。SignalR在底层使用WebSockets，但因为它抽象了通信，所以在Angular内部运行时，它将回退到客户端浏览器支持的任何技术。（例如，对于旧版浏览器，它可能会回退到长轮询。）

此外，借助动态标签和Json.NET的魔力，.NET框架将JavaScript视为一等公民。事实上，通过JavaScript使用Web API和SignalR技术通常比通过原生.NET客户端更容易，因为它们是考虑到JavaScript而构建的。

核心内容

开始设置

本教程中使用的所有AngularJS代码都可以在此处找到。

我将介绍如何使用您最喜欢的文本编辑器和纯文件夹以及Visual Studio来创建它，这取决于创建项目的工具。

使用纯文本文件进行设置

文件夹和文件结构如下所示：

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

登录后复制

主要依赖项

您需要下载以下文件：

jQuery（选择“下载压缩的生产jQuery 2.1.1”链接）
AngularJS（单击大型“下载”选项，然后单击Angular 1.3 的最新版本）
Bootstrap（单击“下载Bootstrap”选项）
SignalR（单击右侧的“下载ZIP”按钮）
D3.js（单击页面中间的“d3.zip”链接）
Epoch（单击“下载v0.6.0链接”）
ng-epoch（单击右侧的“下载ZIP”按钮）
n3-pie（单击右侧的“下载ZIP”按钮）

在我们的Scripts文件夹中，我们需要：

jquery-2.1.1.min.js
angular.min.js
bootstrap.min.js
jquery.signalR.min.js
d3.min.js
epoch.min.js
pie-chart.min.js

在我们的Content文件夹中：

bootstrap.min.css
epoch.min.css

使用Visual Studio进行设置

如果您觉得文本文件过于简单，则通过Visual Studio进行设置非常简单。

只需通过转到文件 -> 新建 -> 项目，然后选择Web作为模板类型来设置一个空的Web应用程序。

Build a Real-time SignalR Dashboard with AngularJS 然后只需右键单击项目，转到管理Nuget包，搜索并下载jQuery、AngularJS、Bootstrap、D3和SignalR JavaScript客户端。

下载并安装这些后，您应该在Scripts和Contents文件夹中看到它们。此外，在已安装的Nuget包下，您将看到以下内容：

Build a Real-time SignalR Dashboard with AngularJS 最后，Nuget不包含Epoch、ng-epoch和n3图表库，因此您需要手动添加它们。只需按照上一节中详细介绍的步骤即可获取这些库。

让我们编写我们的应用程序

现在我们准备编写一些代码了。

首先，让我们创建我们的基本index.html文件，它将容纳我们的Angular JavaScript代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css" />
  <link rel="stylesheet" href="Content/epoch.min.css" />

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

</head>
<body ng-app="angularServiceDashboard">

</body>
</html>

登录后复制

这里有一些事情需要注意。首先，我们添加了所有依赖项以便它们加载。其次，我们引用了一些尚不存在的新文件（app文件夹中的所有文件）。我们接下来将编写这些文件。

让我们进入我们的app文件夹并创建我们的app.js文件。这是一个非常简单的文件。

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

登录后复制

此文件为我们做了几件事。它设置了我们的主应用程序模块angularServiceDashboard，并注入了两个外部引用——ng.epoch（这是我们的Epoch.js Angular指令）和n3-pie-chart（这是一个为Angular制作的、结构良好的图表库）。

如果您注意到，我们还为backendServerUrl注入了一个值，它当然托管在其他地方，我们计划在这里使用它。

让我们创建一个服务工厂类，它将绑定到服务器的URL。这将是我们HTML中引用的services.js文件，它将进入app文件夹：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css" />
  <link rel="stylesheet" href="Content/epoch.min.css" />

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

</head>
<body ng-app="angularServiceDashboard">

</body>
</html>

登录后复制

这段代码使用了流行的on和off（这里不需要off）订阅模式，并通过使用Angular工厂封装了与我们应用程序的SignalR的所有通信。

这段代码乍一看可能有点让人不知所措，但当我们构建控制器时，您会更好地理解它。它所做的只是获取后端SignalR服务器的URL和SignalR中心名称。（在SignalR中，您可以在同一服务器中使用多个中心来推送数据。）

此外，这段代码允许SignalR服务器（位于其他地方的某个盒子中）通过on方法调用我们的应用程序。它允许我们的应用程序通过invoke方法调用SignalR服务器内部的函数。

接下来，我们需要我们的控制器，它将把我们的数据从服务绑定到我们的作用域。让我们在我们的app文件夹中创建一个名为controllers.js的文件。

'use strict';

var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');

登录后复制

此控制器在这里做了一些事情。它创建了我们的Angular服务对象并将其绑定一个回调函数，以便服务器在我们的控制器中调用某些内容。

您会看到，每次服务器回调我们时，我们都会遍历服务器返回的JSON数组。然后我们为每种性能类型都有一个switch语句。现在，我们将设置RAM，然后返回并填充其余部分。

至于我们的指令，我们实际上只需要一个用于我们的Epoch图表。我们将使用一个名为ng-epoch.js的开源指令，我们在我们的index.html存根文件中已经对其进行了引用。

我们可以将所有这些图表拆分为不同的指令，使用一些模板并使用UI-Router，但是为了本教程的简单起见，我们将把所有视图都放在我们的index.html文件中。

现在让我们将我们的视图添加到index.html文件中。我们可以通过在body标签下添加以下内容来实现：

'use strict';

app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl', 
  function ($rootScope, backendServerUrl) {

    function backendFactory(serverUrl, hubName) {
      var connection = $.hubConnection(backendServerUrl);
      var proxy = connection.createHubProxy(hubName);

      connection.start().done(function () { });

      return {
        on: function (eventName, callback) {
              proxy.on(eventName, function (result) {
                $rootScope.$apply(function () {
                  if (callback) {
                    callback(result);
                  }
                 });
               });
             },
        invoke: function (methodName, callback) {
                  proxy.invoke(methodName)
                  .done(function (result) {
                    $rootScope.$apply(function () {
                      if (callback) {
                        callback(result);
                      }
                    });
                  });
                }
      };
    };

    return backendFactory;
}]);

登录后复制

这将简单地创建一个位置，让服务器将RAM数据推回。数据将首先进入我们的服务，然后进入控制器，最后进入视图。

它应该看起来像这样：

Build a Real-time SignalR Dashboard with AngularJS 现在让我们添加一些图表，这正是我们真正想要做的。我们将为epoch.js时间线添加一个名为timestamp的变量。我们还将添加一个名为chartEntry的数组，我们将将其绑定到我们的epoch.ng指令。

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

登录后复制

然后让我们映射switch语句中的数据并添加其余所需的epoch.js数据项。当然，我们可以进一步分解它（例如，使用更多函数和过滤器），但为了本教程的简单起见，我们将保持简单。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css" />
  <link rel="stylesheet" href="Content/epoch.min.css" />

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

</head>
<body ng-app="angularServiceDashboard">

</body>
</html>

登录后复制

我们的控制器看起来更完善了。我们在作用域中添加了一个realtimeAreaFeed，我们将通过ng-epoch指令将其绑定到我们的视图，并且我们还在作用域中添加了areaAxes，它决定了区域图的布局。

现在让我们将指令添加到index.html并显示传入的CPU值数据：

'use strict';

var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');

登录后复制

chart-class指的是D3.js的颜色方案，chart-height是您猜测的内容，chart-stream是从SignalR服务器返回的数据。

有了它，我们应该看到图表实时出现：

Build a Real-time SignalR Dashboard with AngularJS 现在让我们将大量数据点连接到此图表，并从n3-pie框架添加另一个图表（因为谁不喜欢饼图！）。

要从n3-pie框架添加饼图，只需将以下内容添加到我们的控制器中：

'use strict';

app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl', 
  function ($rootScope, backendServerUrl) {

    function backendFactory(serverUrl, hubName) {
      var connection = $.hubConnection(backendServerUrl);
      var proxy = connection.createHubProxy(hubName);

      connection.start().done(function () { });

      return {
        on: function (eventName, callback) {
              proxy.on(eventName, function (result) {
                $rootScope.$apply(function () {
                  if (callback) {
                    callback(result);
                  }
                 });
               });
             },
        invoke: function (methodName, callback) {
                  proxy.invoke(methodName)
                  .done(function (result) {
                    $rootScope.$apply(function () {
                      if (callback) {
                        callback(result);
                      }
                    });
                  });
                }
      };
    };

    return backendFactory;
}]);

登录后复制

当然，该值将由SignalR服务器更新。您可以在我们控制器的完整代码中看到这一点。

我们还应该花点时间考虑一下我们视图的完整代码。

我们应该在屏幕上看到以下数据：

Build a Real-time SignalR Dashboard with AngularJS 我们已经看到Angular可以非常轻松地连接到SignalR——只需在AngularJS服务或工厂中插入端点即可。AngularJS工厂是一种与SignalR通信的封装机制。“结合”后，谁知道AngularJS和.NET会如此完美地协同工作？

服务器的核心方面

我将介绍一些.NET代码，这些代码允许在后端进行此通信。（您可以在此处找到源代码。）

首先，要开始构建服务器代码，您需要在Visual Studio解决方案中运行SignalR。为此，只需按照ASP.NET上的优秀教程即可运行基本的SignalR解决方案。（这是最简单的。）

运行后，将C# Hub类更改为以下内容：

'use strict';

app.controller('PerformanceDataController', ['$scope', 'backendHubProxy',
  function ($scope, backendHubProxy) {
    console.log('trying to connect to service')
    var performanceDataHub = backendHubProxy(backendHubProxy.defaultServer, 'performanceHub');
    console.log('connected to service')
    $scope.currentRamNumber = 68;

    performanceDataHub.on('broadcastPerformance', function (data) {
      data.forEach(function (dataItem) {
        switch(dataItem.categoryName) {
          case 'Processor':
            break;
          case 'Memory':
            $scope.currentRamNumber = dataItem.value;
            break;
          case 'Network In':
            break;
          case 'Network Out':
            break;
          case 'Disk Read Bytes/Sec':
            break;
          case 'Disk Write Bytes/Sec':
            break;
          default:
            //default code block
            break;           
        }
      });     
    });
  }
]);

登录后复制

更改Hub类后，Visual Studio将报错，您需要添加一个性能模型（由于Json.NET，它在服务器推送时会自动转换为JSON）：

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

登录后复制

JsonProperty元数据只是告诉Json.NET在为此模型转换为JSON时自动将属性名称转换为小写。JavaScript喜欢小写。

让我们添加一个PerformanceEngine类，它将通过SignalR将真实性能数据推送到任何侦听的客户端。该引擎通过异步后台线程通过SignalR向任何侦听的客户端发送这些消息。

由于其长度，您可以在我们的GitHub存储库中找到代码。

此代码基本上在每次while迭代中将一系列性能指标推送到任何已订阅的客户端。这些性能指标被注入到构造函数中。从服务器推送的速度在构造函数参数pollIntervalMillis上设置。

请注意，如果您使用OWIN作为自托管来托管SignalR，这将运行良好，如果您使用Web工作线程，它也应该运行良好。

最后要做的事情当然是在服务的OnStart()或Startup类中的某个地方启动后台线程。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css" />
  <link rel="stylesheet" href="Content/epoch.min.css" />

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

</head>
<body ng-app="angularServiceDashboard">

</body>
</html>

登录后复制

启动后台线程的两行代码（正如您猜到的那样）是我们实例化PerformanceEngine和调用OnPerformanceMonitor()的地方。

现在，我知道您可能认为我正在随机化来自服务器的数据，这是事实。但是要推送真实指标，只需使用System.Diagnostics库和Windows提供的PerformanceCounter即可。我试图保持简单，但这就是代码的样子：

'use strict';

var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');

登录后复制

结论

我们已经了解了如何通过Angular使用SignalR数据，并且我们已经将该数据连接到Angular端的实时图表框架。

此处显示客户端最终版本的演示，您可以从此处获取代码。

Build a Real-time SignalR Dashboard with AngularJS 此处显示服务器最终版本的演示，您可以从此处获取代码。

Build a Real-time SignalR Dashboard with AngularJS 我希望您喜欢这个演练。如果您尝试过类似的方法，请在评论中告诉我们！

使用AngularJS构建实时SignalR监控面板的常见问题解答 (FAQ)

如何在AngularJS中设置SignalR？

在AngularJS中设置SignalR涉及几个步骤。首先，您需要使用NuGet或npm安装SignalR库。安装后，您可以在服务器上创建一个新的SignalR中心。此中心将负责发送和接收消息。在客户端，您需要引用SignalR JavaScript库并创建到您的中心的连接。然后，您可以启动连接并定义处理传入消息的函数。