Erstellen Sie ein Echtzeit-Service-Überwachungspanel!
In unserem Serviceüberwachungsbereich werden echte Daten in Echtzeit angezeigt. Es wird uns zeigen, was auf Servern und Microservices auf nahezu Echtzeit, asynchroner, nicht blockierter Weise passiert.
Klicken Sie hier, um das vollständige Client -Beispiel anzuzeigen.
Beobachten Sie mit D3.JS, um Daten zu visualisieren und Ihre Daten in JavaScript zu erläutern! 
Sehen Sie sich diesen Kurs an. Sehen Sie sich diesen Kurs an. Präsentieren Sie die Serverdemonstration hier.
Wir werden das AngularJS-Framework und viele coole Echtzeit-Diagramme und viele Echtzeitdaten verwenden, um eine vereinfachte Version dieses Überwachungsfelds zu erstellen. Wir werden unsere Dienste auch mit der SignalR- und Web -API -Bibliothek von .NET 4.5 erstellen.
AngularJS erzwingt gute Anwendungsentwicklungspraktiken außerhalb des Box. Alles wird injiziert, was bedeutet, dass die Abhängigkeiten eine geringe Kopplung sind. Darüber hinaus weist Angular eine gute Trennung zwischen Ansicht, Modell und Controller auf.
Angular fügt hier .NET hinzu, sodass der serverseitige Code kompakt, überschaubar und Testbar gehalten werden kann. Der serverseitige Code wird nur verwendet, um seine Vorteile zu nutzen - um eine starke Verarbeitung durchzuführen.
Die Web-API von SignalR mit .NET 4.5 ist der Verwendung von Node.js mit Socket.io sehr ähnlich und ermöglicht den gleichen nicht blockierenden, asynchronen Druck vom Server zum Abonnement-Client. SignalR verwendet Websockets unten, weil es die Kommunikation abstrahiert, wenn es in Angular in Angular ausgeführt wird, fällt es auf jede vom Kundenbrowser unterstützte Technologie zurück. (Zum Beispiel kann es für ältere Browser auf lange Umfragen zurückfallen.)
Darüber hinaus betrachtet das .NET-Framework mit der Magie der dynamischen Tags und JSON.net JavaScript als erstklassiger Bürger. In der Tat ist die Verwendung von Web -API- und SignalR -Technologie über JavaScript in der Regel einfacher als bei nativen .NET -Clients, da sie mit Blick auf JavaScript erstellt werden.
Alle in diesem Tutorial verwendeten AngularJS -Code finden Sie hier.
Ich werde abhängen, wie Sie es mit Ihrem bevorzugten Texteditor und einfachen Ordnern sowie von Visual Studio erstellen, abhängig vom Tool, das das Projekt erstellt.
Ordner und Dateistruktur sind wie folgt:
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>Sie müssen die folgende Datei herunterladen:
Einfach eine leere Webanwendung einrichten, indem Sie zur Datei gehen -& gt;
Klicken Sie dann mit der rechten Maustaste auf das Projekt, gehen Sie zum Nuget-Paket verwalten, suchen und laden Sie JQuery, AngularJS, Bootstrap, D3 und Signalr JavaScript-Clients herunter. 
Schließlich enthält Nuget keine Bibliotheken von Epoche, NG-Epoch und N3, daher müssen Sie sie manuell hinzufügen. Befolgen Sie einfach die im vorherigen Abschnitt beschriebenen Schritte, um diese Bibliotheken zu erhalten. 
Erstellen wir zuerst unsere grundlegende Index.html -Datei, die unseren angularen JavaScript -Code enthält.
<!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>
Gehen wir zu unserem App -Ordner und erstellen Sie unsere App.js -Datei. Dies ist eine sehr einfache Datei.
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>Diese Datei macht ein paar Dinge für uns. Es richtet unser Hauptanwendungsmodul AngularServicedashboard ein und injiziert zwei externe Referenzen-ng.epoch (das ist unsere epoch.js Angular-Richtlinie) und N3-Pie-Chart (eine Struktur, die für Angular Good Diagrammbibliothek hergestellt wurde).
Wenn Sie es bemerkt haben, haben wir auch einen Wert in den Backendserverurl injiziert, der natürlich an anderer Stelle gehostet wird, und wir planen, ihn hier zu verwenden.
Erstellen wir eine Service Factory -Klasse, die an die URL des Servers binden. Dies ist die in unserem HTML verwiesene Dienste.js -Datei, die zum App -Ordner wird
<!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>
Dieser Code mag auf den ersten Blick ein wenig überwältigend aussehen, aber Sie werden ihn besser verstehen, wenn wir den Controller aufbauen. Alles, was es tut, ist den Namen URL und Signalr Center des Backend SignalR -Servers. (In SignalR können Sie mehrere Hubs auf demselben Server verwenden, um Daten zu pushen.)
Außerdem ermöglicht dieser Code dem SignalR -Server (in einer Box an anderer Stelle) unsere Anwendung über die On -Methode aufzurufen. Dadurch kann unsere Anwendung Funktionen auf dem SignalR -Server über die Invoke -Methode aufrufen.
Als nächstes brauchen wir unseren Controller, der unsere Daten vom Dienst an unseren Bereich bindet. Erstellen wir eine Datei namens Controllers.js in unserem App -Ordner.
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');Sie werden sehen, dass wir jedes Mal, wenn der Server uns zurückruft, über das vom Server zurückgegebene JSON -Array iterieren. Dann haben wir eine Switch -Anweisung für jeden Leistungstyp. Jetzt setzen wir den RAM ein und gehen dann zurück und füllen den Rest.
Was unsere Anweisungen betrifft, benötigen wir tatsächlich nur ein Epoch -Diagramm für uns. Wir werden eine Open-Source-Anweisung namens ng-epoch.js verwenden, auf die wir in unserer Index.html-Stub-Datei verwiesen haben.
Wir können alle diese Diagramme in verschiedene Anweisungen aufteilen, einige Vorlagen verwenden und UI-Router verwenden, aber für die Einfachheit dieses Tutorials werden wir alle Ansichten in unsere Index.html-Datei einfügen.
Fügen wir nun unsere Ansicht zur index.html -Datei hinzu. Wir können dies tun, indem wir den folgenden Inhalt unter das Body -Tag hinzufügen:
'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;
}]);es sollte so aussehen:
Lassen Sie uns jetzt einige Diagramme hinzufügen, genau das möchten wir wirklich tun. Wir werden der Zeitleiste epoch.js eine Variable namens Timestamp hinzufügen. Wir werden auch ein Array namens Chartentry hinzufügen, das wir an unsere EPOCH.NG -Richtlinie binden.
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>Dann lassen Sie die Daten in der Switch -Anweisung zuzuordnen und die verbleibenden erforderlichen EPOCH.JS -Datenelemente hinzuzufügen. Natürlich können wir es weiter (zum Beispiel mehr Funktionen und Filter verwenden) aufschlüsseln, aber für die Einfachheit dieses Tutorials werden wir es einfach halten.
<!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>
Unser Controller sieht vollständiger aus. Wir haben dem Zielfernrohr eine RealTimeareafed hinzugefügt, die wir durch die NG-Epoch-Richtlinie an unsere Ansicht binden, und wir haben auch Areaaxen im Bereich hinzugefügt, das das Layout des Flächendiagramms bestimmt.
Lassen Sie uns nun die Anweisung zu index.html hinzufügen und die eingehenden CPU -Wertdaten anzeigen:
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');Diagrammklasse bezieht sich auf das Farbschema von D3.Js. Diagrammhöhe ist das, was Sie erraten haben. Diagrammstrom sind die vom SignalR-Server zurückgegebenen Daten.
damit sollten wir sehen, dass das Diagramm in Echtzeit angezeigt wird:
Lassen Sie uns nun eine große Anzahl von Datenpunkten an dieses Diagramm anschließen und ein weiteres Diagramm aus dem N3-Pie-Framework hinzufügen (denn wer mag keine Kreisdiagramme!).
Um ein Kreisdiagramm aus dem N3-Pie-Framework hinzuzufügen, fügen Sie einfach Folgendes zu unserem Controller hinzu:
'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;
}]);Natürlich wird dieser Wert vom SignalR -Server aktualisiert. Sie können dies im vollständigen Code unseres Controllers sehen.
Wir sollten uns auch einen Moment Zeit nehmen, um über den vollständigen Code unserer Ansicht nachzudenken.
Wir sollten die folgenden Daten auf dem Bildschirm sehen:
Wir haben gesehen, dass Angular sehr einfach eine Verbindung zu SignalR herstellen kann - Einen Endpunkt in einen AngularJS -Dienst oder eine Fabrik einfügen. AngularJS Factory ist ein Kapselungsmechanismus, der mit SignalR kommuniziert. Wer weiß, dass AngularJs und .NET nach dem "Kombinieren" so perfekt zusammenarbeiten?
Ich werde einen .NET -Code einführen, der diese Kommunikation im Backend ermöglicht. (Hier finden Sie den Quellcode.)
Um den Servercode zu erstellen, müssen Sie zuerst SignalR in Ihrer Visual Studio -Lösung ausführen. Folgen Sie dazu einfach die hervorragenden Tutorials auf ASP.NET, um die Basis -SignalR -Lösung auszuführen. (Dies ist das einfachste.)
Ändern Sie nach dem Laufen die C# Hub -Klasse in Folgendes:
'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;
}
});
});
}
]);Nachdem Sie die Hub -Klasse geändert haben, meldet Visual Studio einen Fehler. Sie müssen ein Leistungsmodell hinzufügen (aufgrund von JSON.NET wird es automatisch zu JSON konvertiert, wenn der Server drückt):
<code>root
app (Angular应用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>JsonProperty Metadata fordert JSON.NET nur mit, dass sie Eigenschaftsnamen automatisch in Kleinbuchstaben konvertieren, wenn sie für dieses Modell in JSON konvertiert. JavaScript mag Kleinbuchstaben.
Fügen wir eine Performancegine -Klasse hinzu, die jeden Hörclient über SignalR echte Leistungsdaten überschreitet. Die Engine sendet diese Nachrichten über SignalR über einen asynchronen Hintergrund -Thread an einen beliebigen Hörclient.
Aufgrund seiner Länge finden Sie den Code in unserem GitHub -Repository.
Dieser Code bringt im Grunde genommen eine Reihe von Leistungsmetriken in jedem abonnierten Client während der Iteration. Diese Leistungsmetriken werden in den Konstruktor injiziert. Die Geschwindigkeit des Pushs vom Server wird auf dem Konstruktorparameter Pollintervalmillis festgelegt.
Beachten Sie, dass dies gut funktioniert, wenn Sie Owin als Selbsthost für Host SignalR verwenden, und es sollte gut funktionieren, wenn Sie Web-Worker-Threads verwenden.
Das Letzte, was Sie tun müssen, ist natürlich den Hintergrund -Thread irgendwo in der OnStart () oder Start -up -Klasse des Dienstes zu beginnen.
<!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>
Die beiden Codezeilen, die den Hintergrund -Thread (wie Sie erraten) beginnen, sind dort, wo wir Performancegine instanziieren und onperformancemonitor () aufrufen.
Nun, ich weiß, dass Sie vielleicht denken, dass ich Daten vom Server randomisiere, was die Tatsache ist. Um echte Metriken voranzutreiben, verwenden Sie einfach das System.Diagnostics Library und die von Windows bereitgestellte PerformanceCounter. Ich versuche es einfach zu halten, aber so sieht der Code aus:
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');Wir haben gelernt, wie man SignalR-Daten über Angular verwendet, und wir haben diese Daten mit dem Echtzeit-Diagramm-Framework auf der Winkelseite verbunden.
Die Demo der endgültigen Version des Clients wird hier angezeigt, von der Sie den Code erhalten können.
Die Demo der endgültigen Version des Servers wird hier angezeigt, und Sie können den Code von hier erhalten.
Ich hoffe, Sie genießen diese Anleitung. Wenn Sie etwas Ähnliches ausprobiert haben, lassen Sie es uns bitte in den Kommentaren wissen!
Einrichten von SignalR in AngularJs umfasst mehrere Schritte. Zunächst müssen Sie die SignalR -Bibliothek mit Nuget oder NPM installieren. Nach der Installation können Sie ein neues SignalR -Zentrum auf dem Server erstellen. Dieses Zentrum ist für das Senden und Empfangen von Nachrichten verantwortlich. Auf dem Client müssen Sie auf die SignalR JavaScript -Bibliothek verweisen und eine Verbindung zu Ihrem Zentrum erstellen. Sie können dann die Verbindung starten und die Funktion definieren, die eingehende Nachrichten übernimmt.
SignalR bietet einen integrierten Mechanismus zum Umgang mit Verbindungsfehlern. Sie können die Funktion .Error () in der zentralen Verbindung verwenden, um eine Rückruffunktion zu definieren, die auftritt, wenn ein Fehler auftritt. Diese Rückruffunktion kann dem Benutzer eine Fehlermeldung anzeigen oder versuchen, sich wieder mit der Mitte zu verbinden.
Ja, SignalR kann mit jedem JavaScript -Framework verwendet werden, das Ajax und WebSockets unterstützt. Dies umfasst beliebte Frameworks wie React, Vue.js und Angular. Sie müssen nur die SignalR JavaScript -Bibliothek in Ihr Projekt aufnehmen und eine zentrale Verbindung erstellen, genau wie Sie es in jeder anderen JavaScript -Anwendung tun würden.
Um Nachrichten vom Server an den Client zu senden, können Sie die Client -Eigenschaft des Zentrums verwenden. Diese Eigenschaft bietet eine Methode zum Senden von Nachrichten an alle verbundenen Clients, bestimmten Clients oder Client -Gruppen. Sie können diese Methoden von jedem Teil des Servercode aus aufrufen, um Echtzeit-Updates an Ihren Client zu senden.
SignalR bietet mehrere Optionen zum Schutzanwendungen. Sie können die Eigenschaft [Autorize] verwenden, um den Zugriff auf Ihre Zentrum- und Zentrummethoden einzuschränken. Sie können auch einen benutzerdefinierten Autorizer für Ihren Hub mit der Methode maphubs () in der global.asax -Datei angeben. Zusätzlich können Sie SSL verwenden, um den SignalR -Verkehr zu verschlüsseln und Abhören zu verhindern.
SignalR behandelt automatisch die Trennung und versucht, sich wieder zu verbinden. Sie können jedoch auch die Unterbrechung mit der Funktion .Disconnected () auf der zentralen Verbindung manuell behandeln. Mit dieser Funktion können Sie eine Rückruffunktion definieren, die aufgerufen wird, wenn die Verbindung verloren geht.
SignalR ist eine .NET -Bibliothek, die für die Verwendung von .NET -Servern verwendet werden soll. SignalR kann jedoch auf Nicht-NET-Servern mithilfe kompatibler WebSocket-Bibliotheken verwendet werden. Sie müssen das SignalR -Protokoll auf dem Server implementieren und die Verbindungs- und Messaging -Logik selbst verarbeiten.
Sie können Ihre SignalR -Anwendung mit Tools wie Postman oder Fiddler testen und HTTP -Anforderungen an Ihr Zentrum senden und die Antwort überprüfen. Sie können auch Unit -Tests für Ihre zentralen Methoden und Kundenfunktionen schreiben.
Ja, Sie können SignalR in Ihrer mobilen App verwenden. Die SignalR JavaScript -Bibliothek kann in hybriden mobilen Anwendungen verwendet werden, die mit Cordova oder Ionic erstellt wurden. Für native mobile Apps bieten sowohl iOS als auch Android SignalR -Clients an.
SignalR bietet mehrere Optionen zur Erweiterung der Anwendung. Sie können den Azure SignalR -Service verwenden, einen vollständig verwalteten Dienst, der alle SignalR -Verbindungen für Sie verarbeitet. Sie können auch das Backend verwenden, der eine Software -Ebene zum Verteilen von Nachrichten zwischen mehreren Servern ist.
Das obige ist der detaillierte Inhalt vonBauen Sie ein Echtzeit-SignalR-Dashboard mit AngularJs auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Java-Basisdatentypen
Was bedeutet Mesh-Netzwerk?
Einführung in die Methode zum Abfangen von Zeichenfolgen in js
Pascal-Tutorial
Der Unterschied zwischen Artikel-Tag und Abschnitts-Tag
So stellen Sie Serverdaten wieder her
So lösen Sie das Problem, dass in Win7 kein neuer Ordner erstellt werden kann
So richten Sie einen sicheren VPS ein
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
