用AngularJS構建實時信號儀表板
- William Shakespeare原創
- 2025-02-20 12:45:11821瀏覽
構建實時服務監控面板！
我們的服務監控面板將實時顯示真實數據。它將以近乎實時的、異步的、非阻塞的方式向我們展示服務器和微服務上發生的情況。
點擊此處查看完整客戶端示例。
觀看使用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應用程序。
然後只需右鍵單擊項目，轉到管理Nuget包，搜索並下載jQuery、AngularJS、Bootstrap、D3和SignalR JavaScript客戶端。
下載並安裝這些後，您應該在Scripts和Contents文件夾中看到它們。此外，在已安裝的Nuget包下，您將看到以下內容：
最後，Nuget不包含Epoch、ng-epoch和n3圖表庫，因此您需要手動添加它們。只需按照上一節中詳細介紹的步驟即可獲取這些庫。
讓我們編寫我們的應用程序
現在我們準備編寫一些代碼了。
首先，讓我們創建我們的基本index.html文件，它將容納我們的Angular JavaScript代碼。
<code class="language-html"><!DOCTYPE html> <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"> </code>
這裡有一些事情需要注意。首先，我們添加了所有依賴項以便它們加載。其次，我們引用了一些尚不存在的新文件（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文件夾：
<code class="language-html"><!DOCTYPE html> <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"> </code>
這段代碼使用了流行的on和off（這裡不需要off）訂閱模式，並通過使用Angular工廠封裝了與我們應用程序的SignalR的所有通信。
這段代碼乍一看可能有點讓人不知所措，但當我們構建控制器時，您會更好地理解它。它所做的只是獲取後端SignalR服務器的URL和SignalR中心名稱。 （在SignalR中，您可以在同一服務器中使用多個中心來推送數據。）
此外，這段代碼允許SignalR服務器（位於其他地方的某個盒子中）通過on方法調用我們的應用程序。它允許我們的應用程序通過invoke方法調用SignalR服務器內部的函數。
接下來，我們需要我們的控制器，它將把我們的數據從服務綁定到我們的作用域。讓我們在我們的app文件夾中創建一個名為controllers.js的文件。
<code class="language-javascript">'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</code>
此控制器在這裡做了一些事情。它創建了我們的Angular服務對象並將其綁定一個回調函數，以便服務器在我們的控制器中調用某些內容。
您會看到，每次服務器回調我們時，我們都會遍歷服務器返回的JSON數組。然後我們為每種性能類型都有一個switch語句。現在，我們將設置RAM，然後返回並填充其餘部分。
至於我們的指令，我們實際上只需要一個用於我們的Epoch圖表。我們將使用一個名為ng-epoch.js的開源指令，我們在我們的index.html存根文件中已經對其進行了引用。
我們可以將所有這些圖表拆分為不同的指令，使用一些模板並使用UI-Router，但是為了本教程的簡單起見，我們將把所有視圖都放在我們的index.html文件中。
現在讓我們將我們的視圖添加到index.html文件中。我們可以通過在body標籤下添加以下內容來實現：
<code class="language-javascript">'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;
}]);</code>
這將簡單地創建一個位置，讓服務器將RAM數據推回。數據將首先進入我們的服務，然後進入控制器，最後進入視圖。
它應該看起來像這樣：
現在讓我們添加一些圖表，這正是我們真正想要做的。我們將為epoch.js時間線添加一個名為timestamp的變量。我們還將添加一個名為chartEntry的數組，我們將將其綁定到我們的epoch.ng指令。
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>
然後讓我們映射switch語句中的數據並添加其餘所需的epoch.js數據項。當然，我們可以進一步分解它（例如，使用更多函數和過濾器），但為了本教程的簡單起見，我們將保持簡單。
<code class="language-html"><!DOCTYPE html> <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"> </code>
我們的控制器看起來更完善了。我們在作用域中添加了一個realtimeAreaFeed，我們將通過ng-epoch指令將其綁定到我們的視圖，並且我們還在作用域中添加了areaAxes，它決定了區域圖的佈局。
現在讓我們將指令添加到index.html並顯示傳入的CPU值數據：
<code class="language-javascript">'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</code>
chart-class指的是D3.js的顏色方案，chart-height是您猜測的內容，chart-stream是從SignalR服務器返回的數據。
有了它，我們應該看到圖表實時出現：
現在讓我們將大量數據點連接到此圖表，並從n3-pie框架添加另一個圖表（因為誰不喜歡餅圖！）。
要從n3-pie框架添加餅圖，只需將以下內容添加到我們的控制器中：
<code class="language-javascript">'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;
}]);</code>
當然，該值將由SignalR服務器更新。您可以在我們控制器的完整代碼中看到這一點。
我們還應該花點時間考慮一下我們視圖的完整代碼。
我們應該在屏幕上看到以下數據：
我們已經看到Angular可以非常輕鬆地連接到SignalR——只需在AngularJS服務或工廠中插入端點即可。 AngularJS工廠是一種與SignalR通信的封裝機制。 “結合”後，誰知道AngularJS和.NET會如此完美地協同工作？
服務器的核心方面
我將介紹一些.NET代碼，這些代碼允許在後端進行此通信。 （您可以在此處找到源代碼。）
首先，要開始構建服務器代碼，您需要在Visual Studio解決方案中運行SignalR。為此，只需按照ASP.NET上的優秀教程即可運行基本的SignalR解決方案。 （這是最簡單的。）
運行後，將C# Hub類更改為以下內容：
<code class="language-javascript">'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;
}
});
});
}
]);</code>
更改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類中的某個地方啟動後台線程。
<code class="language-html"><!DOCTYPE html> <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"> </code>
啟動後台線程的兩行代碼（正如您猜到的那樣）是我們實例化PerformanceEngine和調用OnPerformanceMonitor()的地方。
現在，我知道您可能認為我正在隨機化來自服務器的數據，這是事實。但是要推送真實指標，只需使用System.Diagnostics庫和Windows提供的PerformanceCounter即可。我試圖保持簡單，但這就是代碼的樣子：
<code class="language-javascript">'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</code>
結論
我們已經了解瞭如何通過Angular使用SignalR數據，並且我們已經將該數據連接到Angular端的實時圖錶框架。
此處顯示客戶端最終版本的演示，您可以從此處獲取代碼。
此處顯示服務器最終版本的演示，您可以從此處獲取代碼。
我希望您喜歡這個演練。如果您嘗試過類似的方法，請在評論中告訴我們！
使用AngularJS構建實時SignalR監控面板的常見問題解答 (FAQ)
如何在AngularJS中設置SignalR？
在AngularJS中設置SignalR涉及幾個步驟。首先，您需要使用NuGet或npm安裝SignalR庫。安裝後，您可以在服務器上創建一個新的SignalR中心。此中心將負責發送和接收消息。在客戶端，您需要引用SignalR JavaScript庫並創建到您的中心的連接。然後，您可以啟動連接並定義處理傳入消息的函數。
如何處理SignalR中的連接錯誤？
SignalR提供了一種處理連接錯誤的內置機制。您可以使用中心連接上的.error()函數來定義一個回調函數，該函數將在發生錯誤時調用。此回調函數可以向用戶顯示錯誤消息或嘗試重新連接到中心。
我可以將SignalR與其他JavaScript框架一起使用嗎？
是的，SignalR可以與任何支持AJAX和WebSockets的JavaScript框架一起使用。這包括流行的框架，如React、Vue.js和Angular。您只需要將SignalR JavaScript庫包含在您的項目中並像在任何其他JavaScript應用程序中一樣創建一個中心連接即可。
如何使用SignalR將消息從服務器發送到客戶端？
要將消息從服務器發送到客戶端，您可以使用中心的Clients屬性。此屬性提供方法，用於將消息發送到所有連接的客戶端、特定客戶端或客戶端組。您可以從服務器代碼的任何部分調用這些方法，以將實時更新發送到您的客戶端。
如何保護我的SignalR應用程序？
SignalR提供了幾個保護應用程序的選項。您可以使用[Authorize]屬性來限制對您的中心和中心方法的訪問。您還可以使用Global.asax文件中的MapHubs()方法為您的中心指定自定義授權器。此外，您可以使用SSL來加密SignalR流量並防止竊聽。
如何處理SignalR中的斷開連接？
SignalR會自動處理斷開連接並嘗試重新連接。但是，您也可以使用中心連接上的.disconnected()函數手動處理斷開連接。此函數允許您定義一個回調函數，該函數將在連接丟失時調用。
我可以在非.NET服務器上使用SignalR嗎？
SignalR是一個.NET庫，旨在與.NET服務器一起使用。但是，可以通過使用兼容的WebSocket庫在非.NET服務器上使用SignalR。您需要在服務器上實現SignalR協議並自行處理連接和消息傳遞邏輯。
如何測試我的SignalR應用程序？
您可以使用Postman或Fiddler等工具向您的中心發送HTTP請求並驗證響應來測試您的SignalR應用程序。您還可以為您的中心方法和客戶端函數編寫單元測試。
我可以在移動應用程序中使用SignalR嗎？
是的，您可以在移動應用程序中使用SignalR。 SignalR JavaScript庫可以在使用Cordova或Ionic構建的混合移動應用程序中使用。對於原生移動應用程序，iOS和Android都提供了SignalR客戶端。
如何擴展我的SignalR應用程序？
SignalR提供了幾個擴展應用程序的選項。您可以使用Azure SignalR服務，這是一個完全託管的服務，它為您處理所有SignalR連接。您還可以使用後端，這是一個軟件層，用於在多個服務器之間分發消息。
以上是用AngularJS構建實時信號儀表板的詳細內容。更多資訊請關注PHP中文網其他相關文章！