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.
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;
"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.
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.