Construisez un tableau de bord SignalR en temps réel avec AngularJS

Créez un panneau de surveillance de services en temps réel!

Notre panneau de surveillance des services affichera des données réelles en temps réel. Cela nous montrera ce qui se passe sur les serveurs et les microservices d'une manière presque en temps réel, asynchrone et non bloquant.

Cliquez ici pour afficher l'exemple complet du client.

Regardez à l'aide de D3.js pour visualiser les données et expliquer vos données en JavaScript! Regardez ce cours Regardez ce cours présenter la démonstration du serveur ici.

Nous utiliserons le framework AngularJS et de nombreux graphiques cool en temps réel et beaucoup de données en temps réel pour créer une version simplifiée de ce panneau de surveillance. Nous créerons également nos services en utilisant la bibliothèque SignalR et API Web de .NET 4.5.

points clés

• Utilisez AngularJS et Signalr pour créer un panneau de surveillance en temps réel qui affiche le serveur et l'activité de microservice de manière asynchrone et non bloquants.
• Configurez votre projet avec des fichiers en texte brut ou Visual Studio, avec des dépendances, notamment AngularJS, JQuery, Bootstrap, SignalR et diverses bibliothèques de graphiques telles que D3.JS et Epoch.
• Implémentez SignalR Center côté serveur pour gérer la transmission de données en temps réel, tirer parti de la capacité de .NET à gérer les demandes asynchrones et les notifications push aux clients.
• Développez les services et contrôleurs AngularJS pour traiter les données reçues des centres SignalR et mettez à jour l'interface utilisateur en temps réel pour refléter les modifications des métriques des performances du serveur.
• Intégrer des solutions de diagramme telles que NG-EPOCH et N3-PIE pour représenter visuellement les données, améliorant l'interactivité et l'engagement des utilisateurs du panneau de surveillance.

Architecture technique

Client

AngularJS applique de bonnes pratiques de développement d'applications hors de la boîte. Tout est injecté, ce qui signifie que les dépendances sont faibles en couplage. De plus, Angular a une bonne séparation entre la vue, le modèle et le contrôleur.

Angular ajoute .NET ici, permettant au code côté serveur d'être maintenu compact, gérable et testable. Le code côté serveur n'est utilisé que pour profiter de ses avantages - pour effectuer un traitement lourd.

côté serveur

L'utilisation de SignalR avec l'API Web de .NET 4.5 est très similaire à l'utilisation de node.js avec socket.io et permet le même type de push asynchrone non bloquant du serveur vers le client d'abonnement. SignalR utilise des lignes Web en bas, mais parce qu'elle résume la communication, lorsqu'il fonctionne à l'intérieur d'angulaires, il retombe à toute technologie prise en charge par le navigateur client. (Par exemple, pour les navigateurs plus âgés, il peut retomber à un long sondage.)

De plus, avec la magie des balises dynamiques et JSON.net, le .NET Framework considère JavaScript en tant que citoyen de première classe. En fait, l'utilisation de l'API Web et de la technologie SignalR via JavaScript est généralement plus facile que par le biais de clients .NET natifs car ils sont construits avec JavaScript à l'esprit.

Core Content

Démarrer les paramètres

Tout le code angularjs utilisé dans ce tutoriel peut être trouvé ici.

Je vais couvrir comment la créer en utilisant votre éditeur de texte préféré et vos dossiers simples ainsi que Visual Studio, selon l'outil qui crée le projet.

Définir avec des fichiers texte brut

La structure du dossier et des fichiers est la suivante:

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

principales dépendances

Vous devez télécharger le fichier suivant:

• jQuery (sélectionnez le lien "Télécharger la production compressée jQuery 2.1.1")
• angularjs (cliquez sur la grande option "Télécharger" et cliquez sur la dernière version d'Angular 1.3)
• bootstrap (cliquez sur l'option "Télécharger l'option bootstrap")
• signalr (cliquez sur le bouton "Télécharger Zip" à droite)
• d3.js (cliquez sur le lien "d3.zip" au milieu de la page)
• Epoch (cliquez sur "Télécharger le lien v0.6.0")
• ng-epoch (cliquez sur le bouton "Télécharger le zip" à droite)
• N3-PIE (Cliquez sur le bouton "Télécharger le zip" à droite)

Dans notre dossier Scripts, nous avons besoin:

• 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

dans notre dossier de contenu:

• bootstrap.min.css
• epoch.min.css

Réglage avec Visual Studio

Si vous pensez que le fichier texte est trop simple, il est très facile à configurer via Visual Studio.

Configurez simplement une application Web vide en allant au fichier - & gt; Créer un nouveau projet - & gt;

Ensuite, cliquez avec le bouton droit sur le projet, accédez au package Manage NuGet, recherchez et téléchargez les clients javascript jQuery, AngularJS, Bootstrap, D3 et Signalr.

Après les téléchargements et les installer, vous devriez les voir dans les dossiers des scripts et des contenus. De plus, sous le package NuGet installé, vous verrez ce qui suit:

Enfin, NuGet ne contient pas de bibliothèques de graphiques époques, ng-epoch et N3, vous devez donc les ajouter manuellement. Suivez simplement les étapes détaillées dans la section précédente pour obtenir ces bibliothèques.

écrivons notre application

Maintenant, nous sommes prêts à écrire du code.

Tout d'abord, créons notre fichier de base index.html, qui conservera notre code JavaScript angulaire.

<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>

Il y a certaines choses à faire attention. Tout d'abord, nous avons ajouté toutes les dépendances afin qu'elles se chargent. Deuxièmement, nous faisons référence à quelques nouveaux fichiers qui n'existent pas encore (tous les fichiers dans le dossier de l'application). Nous rédigerons ces fichiers ensuite.

allons dans notre dossier d'applications et créons notre fichier app.js. Il s'agit d'un fichier très simple.

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

Ce fichier fait quelques choses pour nous. Il configure notre module d'application principal AngularServicedAshboard et injecte deux références externes - ng.epoch (qui est notre directive angulaire Epoch.js) et N3-Pie-Chart (qui est une structure conçue pour la bibliothèque de graphiques bon angulaire).

Si vous l'avez remarqué, nous avons également injecté une valeur dans le backendserverurl, qui est bien sûr hébergé ailleurs, et nous prévoyons de l'utiliser ici.

Créons une classe d'usine de services qui se liera à l'URL du serveur. Ce sera le fichier Services.js référencé dans notre HTML, qui ira dans le dossier de l'application:

<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>

Ce code utilise le mode d'abonnement populaire On and Off (pas besoin de OFF ici) et résume toutes les communications avec Signalr de notre application en utilisant l'usine angulaire.

Ce code peut sembler un peu écrasant à première vue, mais vous le comprendrez mieux lorsque nous construisons le contrôleur. Tout ce qu'il fait est d'obtenir le nom du centre URL et Signalr du serveur Backend Signalr. (Dans SignalR, vous pouvez utiliser plusieurs hubs dans le même serveur pour pousser les données.)

De plus, ce code permet au serveur Signalr (situé dans une boîte ailleurs) d'appeler notre application via la méthode ON. Il permet à notre application d'appeler des fonctions à l'intérieur du serveur SignalR via la méthode Invoke.

Ensuite, nous avons besoin de notre contrôleur, qui liera nos données du service à notre portée. Créons un fichier nommé Controllers.js dans notre dossier d'application.

<code class="language-javascript">'use strict';

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

Ce contrôleur fait quelque chose ici. Il crée notre objet de service angulaire et le lie à une fonction de rappel afin que le serveur appelle quelque chose dans notre contrôleur.

Vous verrez que chaque fois que le serveur nous rappelle, nous allons itérer le tableau JSON renvoyé par le serveur. Ensuite, nous avons une instruction Switch pour chaque type de performances. Maintenant, nous allons régler le RAM, puis revenir en arrière et remplir le reste.

Quant à nos instructions, nous n'avons en fait que nous n'avons besoin que d'un seul tableau d'époque. Nous utiliserons une directive open source appelée ng-poch.js que nous avons référencée dans notre fichier Stub index.html.

Nous pouvons diviser tous ces graphiques en différentes instructions, utiliser certains modèles et utiliser l'interface utilisateur, mais pour la simplicité de ce didacticiel, nous mettrons toutes les vues dans notre fichier index.html.

Ajoutons maintenant notre vue dans le fichier index.html. Nous pouvons le faire en ajoutant le contenu suivant sous la balise corporelle:

<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>

Cela créera simplement un emplacement qui permet au serveur de repousser les données RAM. Les données entreront d'abord dans notre service, puis entrent le contrôleur et entrera enfin la vue.

Cela devrait ressembler à ceci:

Maintenant, ajoutons des graphiques, ce qui est exactement ce que nous voulons vraiment faire. Nous ajouterons une variable nommée horodatage à la chronologie epoch.js. Nous ajouterons également un tableau appelé Chartenntry que nous lierons à notre directive Epoch.ng.

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

Ensuite, cartons les données dans l'instruction Switch et ajoutons les éléments de données Epoch.js restants requis. Bien sûr, nous pouvons le décomposer davantage (par exemple, en utilisant plus de fonctions et de filtres), mais pour la simplicité de ce tutoriel, nous resterons simples.

<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>

Notre contrôleur semble plus complet. Nous avons ajouté unakeakeed réel à la portée, que nous nous lierons à notre point de vue à travers la directive NG-EPOCH, et nous avons également ajouté des zones dans la portée, qui détermine la disposition du graphique de la zone.

Ajoutons maintenant la directive à index.html et affichons les données de valeur CPU entrantes:

<code class="language-javascript">'use strict';

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

Classe de graphique fait référence à la palette de couleurs de D3.js, la hauteur du graphique est ce que vous avez deviné, la chaîne de cartes est les données renvoyées du serveur Signalr.

avec elle, nous devrions voir le graphique apparaître en temps réel:

Connectons maintenant un grand nombre de points de données à ce graphique et ajoutons un autre graphique du cadre N3-PIE (parce que qui n'aime pas les graphiques à tarte!).

Pour ajouter un graphique à secteurs du cadre N3-PIE, ajoutez simplement ce qui suit à notre contrôleur:

<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>

Bien sûr, cette valeur sera mise à jour par le serveur Signalr. Vous pouvez le voir dans le code complet de notre contrôleur.

Nous devons également prendre un moment pour réfléchir au code complet de notre point de vue.

Nous devrions voir les données suivantes à l'écran:

Nous avons vu que Angular peut se connecter très facilement à Signalr - insérez simplement un point de terminaison dans un service ou une usine AngularJS. L'usine AngularJS est un mécanisme d'encapsulation qui communique avec SignalR. Après "combinaison", qui sait qu'AngularJS et .NET fonctionneront si parfaitement?

Aspects principaux du serveur

Je vais présenter un code .NET qui permet cette communication sur le backend. (Vous pouvez trouver le code source ici.)

Tout d'abord, pour commencer à créer du code de serveur, vous devez exécuter SignalR dans votre solution Visual Studio. Pour ce faire, suivez simplement les excellents tutoriels sur ASP.NET pour exécuter la solution SignalR de base. (C'est le plus facile.)

Après avoir fonctionné, modifiez la classe C # Hub en ce qui suit:

<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>

Après avoir modifié la classe Hub, Visual Studio rapportera une erreur, vous devez ajouter un modèle de performances (en raison de JSON.net, il se convertira automatiquement en JSON lorsque le serveur poussera):

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

Les métadonnées JSONProperty disent simplement à JSON.net de convertir automatiquement les noms de propriétés en minuscules lors de la convertissage en JSON pour ce modèle. JavaScript aime les minuscules.

Ajoutons une classe Performance Engine qui poussera des données de performances réelles à tout client d'écoute via SignalR. Le moteur envoie ces messages à tout client écouté via SignalR via un thread d'arrière-plan asynchrone.

En raison de sa longueur, vous pouvez trouver le code dans notre référentiel GitHub.

Ce code pousse essentiellement une série de mesures de performance à tout client souscrit dans chacun de l'itération. Ces mesures de performance sont injectées dans le constructeur. La vitesse de la poussée du serveur est définie sur le paramètre du constructeur Polontervalillis.

Notez que cela fonctionnera bien si vous utilisez OWIN comme auto-hébergement pour héberger Signalr, et cela devrait bien fonctionner si vous utilisez des threads de travailleur Web.

La dernière chose à faire est bien sûr de démarrer le fil d'arrière-plan quelque part dans la classe ONStart () ou le startup du service.

<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>

Les deux lignes de code qui démarrent le thread d'arrière-plan (comme vous l'avez deviné) sont l'endroit où nous instancons des performances InGine et appelons ONPERFORMANDONITORITH ().

Maintenant, je sais que vous pourriez penser que je randomise les données du serveur, ce qui est le fait. Mais pour pousser les métriques réelles, utilisez simplement la bibliothèque System.diagnostics et le PerformanceCounter fourni par Windows. J'essaie de rester simple, mais c'est à quoi ressemble le code:

<code class="language-javascript">'use strict';

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

Conclusion

Nous avons appris à utiliser les données SignalR via Angular, et nous avons connecté ces données au cadre de cartographie en temps réel du côté angulaire.

La démo de la version finale du client est affichée ici, à partir de laquelle vous pouvez obtenir le code.

La démo de la version finale du serveur est affichée ici, et vous pouvez obtenir le code à partir d'ici.

J'espère que vous apprécierez cette procédure pas à pas. Si vous avez essayé quelque chose de similaire, faites-le nous savoir dans les commentaires!

FAQ (FAQ) pour la construction d'un panneau de surveillance SignalR en temps réel avec AngularJS

Comment définir Signalr dans AngularJS?

La configuration de SignalR dans AngularJS implique plusieurs étapes. Tout d'abord, vous devez installer la bibliothèque SignalR à l'aide de NuGet ou NPM. Après l'installation, vous pouvez créer un nouveau Centre SignalR sur le serveur. Ce centre sera responsable de l'envoi et de la réception de messages. Sur le client, vous devez référencer la bibliothèque JavaScript Signalr et créer une connexion à votre centre. Vous pouvez ensuite démarrer la connexion et définir la fonction qui gère les messages entrants.

Comment gérer les erreurs de connexion dans SignalR?

SignalR fournit un mécanisme intégré pour gérer les erreurs de connexion. Vous pouvez utiliser la fonction .Error () sur la connexion centrale pour définir une fonction de rappel qui sera appelée lorsqu'une erreur se produit. Cette fonction de rappel peut afficher un message d'erreur à l'utilisateur ou essayer de se reconnecter au centre.

Puis-je utiliser SignalR avec d'autres frameworks JavaScript?

Oui, SignalR peut être utilisé avec n'importe quel framework JavaScript qui prend en charge Ajax et WebSockets. Cela comprend des cadres populaires tels que React, Vue.js et Angular. Il vous suffit d'inclure la bibliothèque JavaScript Signalr dans votre projet et de créer une connexion centrale comme vous le feriez dans toute autre application JavaScript.

Comment utiliser SignalR pour envoyer des messages du serveur au client?

Pour envoyer des messages du serveur au client, vous pouvez utiliser la propriété des clients du centre. Cette propriété fournit une méthode pour envoyer des messages à tous les clients connectés, clients spécifiques ou groupes de clients. Vous pouvez appeler ces méthodes à partir de n'importe quelle partie du code du serveur pour envoyer des mises à jour en temps réel à votre client.

Comment protéger mon application Signalr?

SignalR fournit plusieurs options pour protéger les applications. Vous pouvez utiliser la propriété [Autoriser] pour restreindre l'accès à vos méthodes centrales et centrales. Vous pouvez également spécifier un autorisateur personnalisé pour votre hub à l'aide de la méthode MAPHUBS () dans le fichier global.asax. De plus, vous pouvez utiliser SSL pour crypter le trafic SignalR et empêcher l'écoute.

Comment gérer la déconnexion dans Signalr?

SignalR gère automatiquement la déconnexion et tente de se reconnecter. Cependant, vous pouvez également gérer manuellement la déconnexion à l'aide de la fonction .Disconnected () sur la connexion centrale. Cette fonction vous permet de définir une fonction de rappel qui sera appelée lorsque la connexion sera perdue.

Puis-je utiliser SignalR sur un serveur non.net?

Signalr est une bibliothèque .NET conçue pour être utilisée avec des serveurs .NET. Cependant, SignalR peut être utilisé sur des serveurs non.NET en utilisant des bibliothèques WebSocket compatibles. Vous devez implémenter le protocole SignalR sur le serveur et gérer vous-même la logique de connexion et de messagerie.

Comment tester mon application Signalr?

Vous pouvez tester votre application SignalR à l'aide d'outils comme Postman ou Fiddler et envoyer des demandes HTTP à votre centre et vérifier la réponse. Vous pouvez également rédiger des tests unitaires pour vos méthodes centrales et vos fonctions clients.

Puis-je utiliser SignalR dans mon application mobile?

Oui, vous pouvez utiliser SignalR dans votre application mobile. La bibliothèque JavaScript SignalR peut être utilisée dans des applications mobiles hybrides construites avec Cordova ou Ionic. Pour les applications mobiles natives, iOS et Android fournissent des clients Signalr.

Comment étendre mon application Signalr?

SignalR fournit plusieurs options pour étendre l'application. Vous pouvez utiliser Azure SignalR Service, un service entièrement géré qui gère toutes les connexions SignalR pour vous. Vous pouvez également utiliser le backend, qui est une couche logicielle pour distribuer des messages entre plusieurs serveurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!