mars 12, 2021

Tableau de bord WinUI en temps réel avec backend SignalR

Un tableau de bord de bureau moderne alimenté par des communications en temps réel. Allons-y.

La vie se passe en temps réel et l'échange d'informations devrait se faire de la même manière. C'est plus facile à dire qu'à faire et les défis transcendent les piles technologiques. Cependant, à mesure que les communications entre serveurs / clients deviennent plus intelligentes, les développeurs ont pu tirer parti de techniques sophistiquées pour créer des communications en temps réel entre les plates-formes d'applications. Les applications en temps réel, cependant, n'ont pas besoin d'être réservées aux applications Web et peuvent alimenter des solutions de bureau pour divers flux de travail d'entreprise.

Avec les frameworks open source modernes comme SignalR qui résout la complexité de la pile réseau, les développeurs peuvent se concentrer sur les applications en temps réel des fonctionnalités qui permettent des solutions puissantes. Les applications de bureau incarnent souvent une interface utilisateur chargée et une richesse de fonctionnalités, ce qui est assez classique pour créer des tableaux de bord numériques en temps réel, remplis de visualisations de données pour tenir l'utilisateur informé. Et si vous créez des applications pour cibler Windows, les développeurs d'applications de bureau seront bien servis en choisissant le dernier WinUI 3, un cadre d'interface utilisateur natif pour les applications de bureau Windows modernes. Prenons deux technologies .NET populaires – WinUI 3 pour créer un tableau de bord réaliste avec une interface utilisateur efficace, alimenté par des communications en temps réel avec un backend SignalR.

Le backend SignalR

SignalR facilite l'ajout d'une communication en temps réel à applications Web exécutées sur la pile ASP.NET et clients connectés sur une grande variété de plates-formes Étant donné une paire serveur / client spécifique, SignalR choisit de manière experte le meilleur mécanisme de transport pour les échanges en temps réel, avec des plans de secours gracieux. SignalR fournit des API pour les appels de procédure distante bidirectionnels (RPC) entre le serveur et le client et évite les complexités de la communication en temps réel. SignalR utilise le concept de Hub côté serveur, un objet en mémoire auquel tous les clients se connectent pour des communications en temps réel. Le Hub permet à SignalR d'envoyer et de recevoir des messages à travers les limites de la machine, permettant ainsi aux clients d'appeler des méthodes sur le serveur et vice versa. En plus de l'invocation de méthode à travers les paradigmes de programmation, Hubs permet le transport de paramètres nommés / fortement typés sur les protocoles de données JSON ou MessagePack .

The Hub

Pour construire un réel- tableau de bord temporel, commençons par un backend alimenté par SignalR. Ce backend serait, en substance, la source de vérité – collectant des données à partir de diverses entrées et transmettant les informations aux clients connectés intéressés en temps réel. Tout d'abord, nous devons commencer par le SignalR Hub côté serveur qui alimentera notre tableau de bord. Nous commencerons par un nouveau projet d'application Web ASP.NET Core et définirons un tableau de bord personnalisé à l'aide de la plomberie SignalR côté serveur déjà incluse dans le framework partagé ASP.NET Core 3.1:

 à l'aide de Microsoft. AspNetCore.SignalR;
using System.Text.Json.Serialization;
using System.Threading.Tasks;

espace de noms SignalRBackend.Hubs
{
    Public class DashboardHub: Hub
    {
        Tâche publique async SendDashboardUpdate (string dashupdate)
        {
            attendre Clients.All.SendAsync ("ReceiveDashUpdate", dashupdate);
        }

        Tâche publique async SendObjectUpdate (ChartData [] chartUpdate)
        {
            attendre Clients.All.SendAsync ("ReceiveObjUpdate", chartUpdate);
        }
    }

    classe publique ChartData
    {
        chaîne publique Category {get; ensemble; }
        public int Value {get; ensemble; }
    }
}

Nous déclarons ici deux méthodes Hub – SendDashboardUpdate () pour mettre à jour un indicateur de données sur un tableau de bord et SendObjectUpdate () pour peut-être mettre à jour les données d'un objet de tableau de bord vers une interface utilisateur . SignalR Hubs peut fonctionner avec des types de données simples, ainsi qu'avec des objets métier complexes. Remarquez la classe ChartData ici – bien que simplifiant à l'extrême, cela démontre qu'un concentrateur SignalR accepte et transmet un objet de données C #. La sérialisation / désérialisation est gratuite. ReceiveDashUpdate () et ReceiveObjUpdate () sont deux méthodes que SignalR Hub chercherait à invoquer dans chaque client connecté et à transmettre des paramètres.

Ensuite, nous peaufinons les configurations dans le fichier Startup.cs de l'application ASP.NET Core – en ajoutant essentiellement un middleware SignalR pour acheminer les requêtes appropriées vers SignalR Dashboard Hub:

 public void ConfigureServices (IServiceCollection prestations de service)
{
    services.AddRazorPages ();
    services.AddSignalR ();
}

public void Configure (application IApplicationBuilder, IWebHostEnvironment env)
{
    ...
    ...
    app.UseEndpoints (points de terminaison =>
            {
                endpoints.MapRazorPages ();
                endpoints.MapHub  ("/ dashboardHub");
            });
}

Normalement, il suffit d'appeler AddSignalR () pour établir le flux de travail SignalR et le Hub fonctionne comme un objet en mémoire. Cependant, cela a des conséquences lorsque l'application Web est placée derrière une batterie de serveurs ou un équilibrage de charge et qu'un recours courant consiste à utiliser un fond de panier Redis pour synchroniser tous les clients connectés entre les serveurs. Toutefois, si vous ne souhaitez pas héberger SignalR vous-même, Azure SignalR Service est là pour vous aider – un service géré pour réduire la complexité des concentrateurs SignalR et offrir de nombreuses évolutions.

Il est facile de laisser Azure Signal Service faire le gros du travail: l'application Web peut rester locale, mais les communications SignalR Hub peuvent être gérées par Azure. Nous devons simplement extraire le package Azure.SignalR Nuget et augmenter avec AddAzureSignalR () dans nos configurations.

AzureNuget "title =" AzureNuget "/></p data-recalc-dims=

 public void ConfigureServices (services IServiceCollection)
{
    services.AddRazorPages ();
    services.AddSignalR (). AddAzureSignalR ();
}

Tout ce dont vous avez besoin pour laisser Azure SignalR Service gérer les communications du Hub est d'extraire la Connection String et le Access Token du service Azure correspondant. .NET CLI fournit un outil pratique Secrets Manager pour stocker les paramètres de configuration au lieu de les ajouter au code. Une fois déployé, il peut s'agir d'un paramètre d'application lu à partir d'Azure Secrets.

Le client Web

Ensuite, construisons le premier client qui se connectera à notre Dashboard SignalR Hub – un client Web dans le projet lui-même. Cela s'apparente aux utilisateurs Admin du tableau de bord ayant une interface Web pour transmettre des informations aux clients ou automatiser le flux d'informations. Les clients Web SignalR ont des dépendances JavaScript, généralement introduites à l'aide de Library Manager (LibMan) pour obtenir les bits de Unpkg fournissant ainsi une fonctionnalité de nœud de livraison de contenu dans toutes les zones géographiques d'utilisation. Le fichier l ibman.json énonce les dépendances qui sont ramenées dans le dossier local wwwroot :

 {
  "version": "1.0",
  "defaultProvider": "unpkg",
  "bibliothèques": [
    {
      "library": "@microsoft/signalr@latest",
      "destination": "wwwroot/js/signalr",
      "files": [
        "dist/browser/signalr.js",
        "dist/browser/signalr.min.js"
      ]
    }
  ]
}

Ajoutons un peu d'interface utilisateur à notre client Web comme dans la page Dashboard.cshtml . En supposant que nous piloterons un tableau de bord en temps réel à partir du backend SignalR, il y a une entrée utilisateur pour mettre à jour une valeur de données et deux boutons – potentiellement pour mettre à jour une jauge et une grille que le tableau de bord client peut avoir.

 @page

     & nbsp; 
    
         Valeur de la jauge 
        
    
     & nbsp;

SignalRBackend "title =" SignalRBackend "/></p data-recalc-dims=

L'interface Web simple fonctionne pour ce qu'elle voulait faire – si vous le souhaitez, nous pourrions ajouter n'importe quel nombre d'entrées afin que les utilisateurs Admin pourrait changer une variété de valeurs à transmettre aux tableaux de bord des clients. Vient maintenant tout raccorder dans le fichier dashboard.js comme indiqué dans notre page.

 "use strict";

var connection = new signalR.HubConnectionBuilder (). withUrl ("/ dashboardHub"). build ();

connection.on ("ReceiveDashUpdate", function (dashupdate) {
    var encodedMsg = "Mise à jour du tableau de bord:" + dashupdate;
    var li = document.createElement ("li");
    li.textContent = encodedMsg;
    document.getElementById ("dashUpdateList"). appendChild (li);
});

document.getElementById ("sendDashButton"). addEventListener ("clic", fonction (événement) {
    var gaugeupdate = document.getElementById ("gaugeValue"). value;
    connection.invoke ("SendDashboardUpdate", gaugeupdate) .catch (function (err) {
        return console.error (err.toString ());
    });
    event.preventDefault ();
});

document.getElementById ("sendObjButton"). addEventListener ("clic", fonction (événement) {
    var chartdata = [{ "category": "A", "value": 5 }, { "category": "B", "value": 10 }];
    connection.invoke ("SendObjectUpdate", chartdata) .catch (function (err) {
        return console.error (err.toString ());
    });
    event.preventDefault ();
});

connection.start (). then (function () {
}). catch (fonction (err) {
    return console.error (err.toString ());
});

Peu de choses clés se passent ici. Le gestionnaire d'événements de clic de sendDashButton est câblé pour saisir l'entrée utilisateur et la renvoyer à la méthode Hub SendDashboardUpdate () . Le gestionnaire d'événements click de sendObjButton affiche un objet JSON représentant un tableau de valeurs ChartData — codées en dur ici, mais pourraient facilement être pilotées par l'utilisateur. La méthode Hub SendObjectUpdate () est appelée ensuite, transmettant le contenu sérialisé JSON, qui désérialiserait / agirait côté Hub et serait renvoyé à chaque client connecté. Nous utilisons également le HubConnectionBuilder () pour renvoyer le client Web vers le Dashboard Hub et démarrer la connexion SignalR. Voilà, notre backend SignalR est maintenant prêt pour que les clients du tableau de bord se connectent et reçoivent des mises à jour du Hub.

WinUI Dashboard

Windows UI Library (WinUI) 3 est en Preview 4 au moment de l'écriture et est la voie du futur pour les applications Windows. WinUI 3 représente le framework d'interface utilisateur de nouvelle génération qui est extrait des mises à jour Windows et promet de fonctionner sur les environnements d'exécution .NET Native / .NET. Bien qu'il existe plusieurs façons de cibler le bureau Windows, choisir WinUI 3 pour les projets nouveaux rend les choses à l'épreuve du temps – en combinant les meilleurs outils et les dernières technologies d'interface utilisateur.

WinUIArchitecture "title =" WinUIArchitecture "/><h3 id=
Un tableau de bord a besoin de l'interface utilisateur

WinUI fournit un excellent point de départ en termes de composants d'interface utilisateur, dont beaucoup respirent le système Fluent Design. Mais un tableau de bord de bureau complet pourrait probablement utiliser des visualisations complexes – Telerik UI pour WinUI peut vous aider. Les composants Telerik WinUI fournissent des commandes d'interface utilisateur performantes et riches en fonctionnalités qui intègrent des API intuitives, une prise en charge MVVM et une accessibilité / localisation intégrée. La suite Telerik UI pour WinUI se développe rapidement et peut fournir une partie de la visualisation des données nécessaire à notre tableau de bord WinUI.

TelerikWinUI "title =" TelerikWinUI "/></p data-recalc-dims=

Donc, pour notre tableau de bord WinUI, nous allons lancer un nouveau projet WinUI pour une application vierge qui s'exécute sur UWP, puis intégrer l'interface utilisateur Telerik pour la dépendance WinUI, soit via le package NuGet, soit via des bits de référence. Pour donner à notre tableau de bord un aspect et une sensation réalistes, commençons par une jauge radiale. une jauge linéaire et l'omniprésent DataGrid – le monde est à vous pour fournir au tableau de bord toute la visualisation que votre application exige. Voici le balisage dans notre MainPage.xaml :

Ce qu'il faut noter, ce sont les espaces de noms qui amènent les assemblages Telerik – avec les références correctes, nous pouvons rendre nos jauges et la grille. Nous utilisons également un DummyViewModel local comme DataContext pour l'interface utilisateur des jauges et les données liant les pointeurs / indicateurs de la jauge à une variable GaugeValue.

Préparation de la liaison de données

Nous aimerions que la grille / jauges du tableau de bord soit liée aux données. Cela rend l'interface utilisateur dynamique et les données du tableau de bord doivent être définies de l'extérieur, comme à partir de notre backend SignalR. Voici le code-behind:

 using System;
using System.Collections.Generic;
en utilisant System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
en utilisant Windows.Foundation;
en utilisant Windows.Foundation.Collections;
en utilisant Microsoft.UI.Xaml;
en utilisant Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
en utilisant Microsoft.UI.Xaml.Data;
en utilisant Microsoft.UI.Xaml.Input;
en utilisant Microsoft.UI.Xaml.Media;
en utilisant Microsoft.UI.Xaml.Navigation;
en utilisant Microsoft.AspNetCore.SignalR.Client;
using System.Threading.Tasks;
en utilisant Telerik.UI.Xaml.Controls.DataVisualization;

espace de noms WinUIDashboard
{
    classe partielle scellée publique MainPage: Page
    {
        DummyViewModel vm = nouveau DummyViewModel ();

        MainPage publique ()
        {
            this.InitializeComponent ();
            this.DataGrid.ItemsSource = vm.GridValues;
        }
    }

    classe publique DummyViewModel
    {
        public int GaugeValue {get; ensemble; }
        Liste publique  GridValues {get; ensemble; }

        public DummyViewModel ()
        {
            this.GaugeValue = 0;

            this.GridValues = nouvelle liste  {
                            new GridData {Category = "A", Value = 20},
                            new GridData {Category = "B", Value = 30}
                            };
        }
    }

    classe publique GridData
    {
        chaîne publique Category {get; ensemble; }
        public int Value {get; ensemble; }
    }
}

Comme évident, la classe GridData est la même que la classe ChartData avec laquelle le backend SignalR sait comment travailler – ceci étant lié au DataGrid en utilisant le DummyViewModel . Et la propriété GaugeValue pilote les pointeurs utilisés dans les jauges radiales et linéaires. Une fois les valeurs de données par défaut initialisées, nous pouvons lancer notre application WinUI – et voilà, nous voyons un tableau de bord prêt pour les mises à jour en temps réel.

WinUIDashboard "title =" WinUIDashboard "/><h3 id= Apporter en temps réel avec SignalR

Il ne reste plus qu'à faire en sorte que l'application WinUI se connecte au hub principal de SignalR. Ajoutons quelques communications en temps réel dans notre MainPage.xaml.cs :

 namespace WinUIDashboard
{
    classe partielle scellée publique MainPage: Page
    {
        DummyViewModel vm = nouveau DummyViewModel ();
        HubConnection hubConnection;

        MainPage publique ()
        {
            this.InitializeComponent ();
            this.DataGrid.ItemsSource = vm.GridValues;
            DoRealTimeSuff ();
        }

        async private void DoRealTimeSuff ()
        {
            SignalRDashSyncSetup ();
            attendre SignalRConnect ();
        }

        privé void SignalRDashSyncSetup ()
        {
            hubConnection = new HubConnectionBuilder (). WithUrl ($ "https: // LocalHost ou URL hébergée / dashboardHub"). Build ();

            hubConnection.On  ("ReceiveDashUpdate", (dashupdate) =>
            {
                var recuDashUpdate = dashupdate;
                ((ArrowGaugeIndicator) this.RadialGauge.Indicators [0]). Value = Int32.Parse (dashupdate);
                ((LinearBarGaugeIndicator) this.LinearGauge.Indicators [0]). Value = Int32.Parse (dashupdate);
            });

            hubConnection.On  ("ReceiveObjUpdate", (gridUpdate) =>
            {
                var recuChartUpdate = gridUpdate;
                this.DataGrid.ItemsSource = gridUpdate;
            });
        }

        Tâche asynchrone privée SignalRConnect ()
        {
            essayer
            {
                attendre hubConnection.StartAsync ();
            }
            catch (Exception ex)
            {
                // La connexion a échoué.
            }
        }
    }
}

Comme évident, nous utilisons le HubConnection pour pointer notre application vers le Dashboard Hub du serveur SignalR – cela peut être Localhost, une URL NGrok si vous testez sur Localhost en dehors du domaine de la machine ou sur une URL distante si l'application Web principale SignalR est hébergée dans le cloud. Une fois la connexion démarrée, nous écoutons avec deux gestionnaires d'événements côté client que SignalR Hub peut appeler – ReceiveDashUpdate () met à jour les pointeurs / indicateurs sur les deux jauges et ReceiveObjUpdate () reçoit la collection d'objets mise à jour avant de se relier au DataGrid. Le résultat: un tableau de bord WinUI en temps réel alimenté par le backend SignalR. Hallelujah!