Connectez vos pages Web à Constellation

Sommaire

Introduction

Il existe actuellement deux librairies Constellation JavaScript :

Constellation for Javascript
Constellation for AngularJS

La première est basée sur jQuery, la deuxième est une surcouche de la 1ère encapsulée dans un module AngularJS.

Vous retrouverez ces deux librairies depuis le gestionnaire de package Nuget intégré à Visual Studio :

Chacune de ces deux librairies propose deux types de client :

Consumer
Controller

Le client “Consumer” permet de se connecter à Constellation en tant que “consommateur” pour pouvoir interroger des StateObjects et envoyer/recevoir des messages.

Le client “Controller” permet lui de se connecter à Constellation en tant que « contrôleur » pour récupérer par exemple en temps réel les logs produits par vos packages, arrêter/démarrer les packages, surveiller la consommation de ressources de chacun d’entre eux, etc.

Dans ce guide nous allons utiliser le client « Consumer » afficher en temps réel le StateObject produit par le package HWMonitor représentant la consommation de votre CPU dans une page Web.

Pour cela vous devez avoir déployé le package “HWMonitor” sur au moins une de vos sentinelles (Windows).

Etape 1 : ajouter la librairie Constellation

En utilisant le CDN

Les librairies JavaScripts sont accessibles sur : http://cdn.myconstellation.io/js/ (en HTTP ou HTTPS).

De ce fait, vous pouvez créer une simple pages HTML et ajoutez dans l’entête les balises suivantes :

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.2.min.js"></script>
<script type="text/javascript" src="https://cdn.myconstellation.io/js/Constellation-1.8.2.min.js"></script>

Si vous souhaitez connecter votre page à Constellation en utilisant le framework AngularJS :

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.2.min.js"></script>
<script type="text/javascript" src="https://cdn.myconstellation.io/js/Constellation-1.8.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.myconstellation.io/js/ngConstellation-1.8.2.min.js"></script>

Par Nuget en utilisant Visual Studio

Créez une application Web vide dans Visual Studio et ouvrez le gestionnaire de package NuGet.

En sélectionnant la source “Constellation”, installez le package Nuget “Constellation.Javascript” :

Une fois installée vous obtiendrez dans le dossier “Scripts” de votre projet Web les librairies jQuery, SignalR et Constellation :

Créez ensuite une page Web (HTML ou ASPX) et dans l’entête de votre code HTML référencez les scripts (à adapter en fonction des n° de version des librairies contenues dans les packages Nuget) :

<script type="text/javascript" src="Scripts/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.signalR-2.2.2.min.js"></script>
<script type="text/javascript" src="Scripts/Constellation-1.8.2.js"></script>

Etape 2 : Initialiser le client

Tout d’abord il faut déterminer la clé d’accès qui sera utilisée par votre page. Ici, depuis la Console Constellation, nous créons un credential “DemoWeb” avec la clé d’accès “123456789” :

Dans notre page HTML, créons un client “Consumer” en spécifiant l’URI de notre Constellation, la clé d’accès utilisée pour se connecter et le “friendly name” de votre client :

var constellation = $.signalR.createConstellationConsumer("http://localhost:8088", "123456789", "Test API JS");

1	var constellation = $.signalR.createConstellationConsumer("http://localhost:8088", "123456789", "Test API JS");

Etape 3 : Etablir la connexion à Constellation

Ajoutons un handler sur le changement d’état de la connection pour afficher le message “Je suis connecté” dans la console de votre navigateur :

constellation.connection.stateChanged(function (change) {
    if (change.newState === $.signalR.connectionState.connected) {
        console.log("Je suis connecté");
    }
});

constellation.connection.stateChanged(function (change) {

if (change.newState === $.signalR.connectionState.connected) {

console.log("Je suis connecté");

}

});

Pour finir lançons la connexion en invoquant la méthode Start :

constellation.connection.start();

1	constellation.connection.start();

Testons la page dans Chrome par exemple :

Etape 4 : Afficher le contenu d’un StateObject en temps réel

Dans notre cas nous voulons afficher en temps réel la consommation CPU de notre sentinelle.

Ce StateObject se nomme “/intelcpu/0/load/0” et est produit par le package “HWMonitor” que vous aurez pris le soin de déployer sur une de vos sentinelles (ici ma sentinelle se nomme “PO-SWARIN”) :

On peut donc enregistrer un “StateObjectLink” avec la méthode “registerStateObjectLink” en demandant un filtre sur la sentinelle nommée “MON-PC”, le package “HWMonitor” et le nom “/intelcpu/load/0” (le dernier argument de cette méthode correspond au type du StateObject, ici ”*” indique qu’il n’y a pas de filtre sur le type) et en indiquant la fonction à invoquer à chaque mise à jour du et des StateObjects liés, ici mettre à jour un <span> de la page.

Vous devez impérativement faire cet enregistrement lorsque vous êtes connecté, c’est à dire lorsque le handler “stateChanged” est invoqué avec l’état “Connected”.

Le code final sera donc :

constellation.connection.stateChanged(function (change) {
    if (change.newState === $.signalR.connectionState.connected) {
        console.log("Je suis connecté");
        constellation.client.registerStateObjectLink("MON-PC", "HWMonitor", "/intelcpu/0/load/0", "*", function (so) {
            console.log(so);
            $("#cpu").text(so.Value.Value);
        });
    }
});

constellation.connection.stateChanged(function (change) {

if (change.newState === $.signalR.connectionState.connected) {

console.log("Je suis connecté");

constellation.client.registerStateObjectLink("MON-PC", "HWMonitor", "/intelcpu/0/load/0", "*", function (so) {

console.log(so);

$("#cpu").text(so.Value.Value);

});

}

});

Dès que le StateObject est réceptionné par notre page nous affectons la propriété “Value” de la valeur du StateObject comme contenu du span “cpu” de la page. De ce fait, ajoutons un “span” nommé “cpu” dans le corps de notre page :

<body>
    <span id="cpu"></span> %
</body>

<body>

<span id="cpu"></span> %

</body>

Ainsi vous aurez en temps réel votre CPU dans une page HTML grâce à l’exploitation du StateObject ici produit par le package HWMonitor :

Vous remarquerez que dans le handler ci-dessus nous loguons également l’objet “stateobject” réceptionné par notre page.

Cet objet contient les différentes propriétés du StateObject : la sentinelle et le package qui ont produit ce StateObject, le nom du StateObject, son type, sa durée de vue (ici “lifetime=0” donc n’expire jamais), la date de mise à jour du StateObject, ses métadonnées et surtout sa valeur (propriété “Value”).

Ici la valeur de ce StateObject produit par le package “HWMonitor” est un objet complexe (entouré en vert) qui contient différentes propriétés :

Pour la suite je vous recommande vivement l’utilisation du framework AngularJS permettant de développer des pages plus facilement.

Next step