Applications de chat Web en temps réel

Nous explorons les technologies serveur / client SignalR pour créer des applications de chat pour le Web.

De nos jours, les systèmes logiciels ont un besoin indéniable de communications en temps réel. Heureusement, malgré les obstacles, il existe plusieurs techniques pour permettre des communications en temps réel et des cadres raffinés qui font beaucoup de travail pour les développeurs. Cependant, nous sommes en 2020 et les logiciels ne sont pas cloisonnés sur des plateformes spécifiques. Alors que les développeurs essaient de mettre en place de nouvelles plates-formes / appareils pour se connecter en temps réel, la flexibilité est essentielle pour les piles technologiques.

Choisissons l'un des cadres de communication en temps réel les plus populaires pour creuser – le bien-aimé SignalR en plus d'ASP. NET Core. Et comme tous les humains depuis un million d'années, utilisons les applications de chat comme terrain de jeu. D'une certaine manière, les applications de chat sont les exemples de "Hello world" pour prouver que le temps réel fonctionne réellement. Mais utilisons des API amusantes et essayons de créer la même application sur diverses plates-formes pour voir comment SignalR répond aux besoins multiplateformes modernes, à commencer par les clients Web. Et une petite pincée d'interface utilisateur polie n'a jamais blessé de bonnes applications de chat.

SignalR

SignalR facilite l'ajout de communications en temps réel aux applications Web fonctionnant sur ASP.NET et aux clients connectés sur une grande variété de plates-formes. Alors que SignalR a commencé il y a des années avec ASP.NET MVC, le dernier redémarrage s'appelle SignalR Core, qui s'exécute sur ASP.NET Core et apporte une tonne de maturité. Les développeurs bénéficient de SignalR qui fournit un canevas d'API uniforme pour la connexion et la gestion des clients, ainsi qu'une mise à l'échelle pour gérer un trafic accru.

SignalR fournit des API pour les appels de procédure distante (RPC) bidirectionnels entre le serveur et le client et les résumés. loin les complexités de la communication en temps réel. C'est, de loin, le plus grand avantage de l'introduction de SignalR pour faciliter les communications en temps réel – empêcher les développeurs d'avoir à gérer les implémentations de la couche réseau. É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. Les techniques les plus couramment utilisées sont les suivantes: WebSockets, événements envoyés par le serveur et interrogation longue, dans l'ordre des plans de secours gracieux.

SignalR Back End

SignalR utilise le concept de concentrateurs côté serveur – un concentrateur littéral dans un modèle à rayons concentrateurs. Le SignalR Hub fonctionne comme un objet en mémoire côté serveur auquel tous les clients se connectent pour des communications en temps réel. Le concentrateur permet à SignalR d'envoyer et de recevoir des messages au-delà des 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éthodes à travers les paradigmes de programmation, les concentrateurs permettent le transport de paramètres nommés et fortement typés. SignalR fournit automatiquement la sérialisation / désérialisation des objets pour faciliter le processus.

Construisons une application de discussion de démonstration rapide avec un backend SignalR. Oui, encore une autre application de chat – mais montrant des astuces de développement rapides et prenant l'application de chat multiplateforme. Tout d'abord, nous devons commencer par notre concentrateur SignalR côté serveur. Nous allons commencer avec une nouvelle application Web ASP.NET Core exécutée sur .NET Core 3.0 – vous pouvez le faire dans VS sur Windows, VS Code, VS pour Mac ou de vieilles commandes CLI simples. Nous allons définir notre ChatHub côté serveur comme ci-dessous. Si vous envisagez d'avoir plusieurs concentrateurs, il peut être judicieux de les organiser dans un dossier de concentrateurs:

 using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

espace de noms SignalRChat.Hubs
{
    public class ChatHub: Hub
    {
        tâche asynchrone publique SendMessage (utilisateur de chaîne, message de chaîne)
        {
            attendre Clients.All.SendAsync ("ReceiveMessage", utilisateur, message);
        }
    }
} 

Essentiellement, nous définissons une méthode appelée SendMessage () sur le serveur que tous les clients connectés peuvent appeler et envoyer des valeurs de paramètres. Lorsqu'elle est invoquée, cette méthode côté serveur se retourne et tente d'appeler la méthode ReceiveMessage () sur les clients – en particulier, chaque client connecté via Clients.All.SendAsync () . Les méthodes côté client devraient être définies dans chaque client sur toutes les plateformes. La prochaine étape est un peu de configuration dans le fichier Startup.cs de l'application ASP.NET Core – ajoutant essentiellement un middleware pour acheminer les requêtes appropriées vers le concentrateur SignalR, comme ceci:

 utilisant SignalRChat.Hubs;

espace de noms SignalRChat
{
    démarrage de classe publique
    {
        ...

        void ConfigureServices (services IServiceCollection)
        {
            ...
            services.AddSignalR ();
        }

        public void Configure (application IApplicationBuilder, env IWebHostEnvironment)
        {
              ...

            app.UseEndpoints (endpoints =>
            {
                ...
                endpoints.MapHub  ("/ chatHub");
            });
        }
    }
} 

Client Web

Le backend côté serveur de SignalR étant parfaitement adapté, nous commencerons par les clients sur différentes plates-formes, en commençant par le Web. Alors que les bits SignalR pour alimenter les concentrateurs côté serveur sont inclus dans le cadre partagé ASP.NET Core 3.0, les packages côté client doivent être introduits manuellement. Bien sûr, les packages NuGet peuvent être intégrés dans des projets, mais une façon plus intelligente consiste à utiliser Library Manager pour obtenir les dépendances côté client via Unpkg . Cela garantit que les fichiers SignalR JS sont distribués via le réseau de distribution de contenu Unpkg (CDN) – près de n'importe où dans le monde où vos utilisateurs peuvent se trouver. Deux commandes CLI font l'affaire, ajoutant les dépendances et les déplaçant dans le référentiel de fichiers statiques:

 dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @ microsoft / signalr @ latest -p unpkg -d wwwroot / js / signalr --files dist / browser / signalr.js --files dist / browser / signalr.min.js 

Une fois terminé, vous devriez voir le des dépendances statiques apportées, ainsi qu'un fichier libman.json qui fournit des détails sur le fournisseur, les packages et la destination, comme ceci:

 {
  "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"
      ]
    }
  ]
} 

Maintenant, écrivons du code standard, comme dans les documents SignalR pour avoir une interface utilisateur pour notre interface de discussion alimentée par SignalR. Nous avons essentiellement besoin de quelques contrôles d'entrée pour le chat et d'une liste à afficher pour afficher les messages de chat. Cela va dans le fichier Index.cshtml du site ASP.NET dans le répertoire Pages Pages:

 @page
    

        
 & nbsp; 
        

            
 Utilisateur 
            
  
        
        

            
 Message 
            

        
        
 & nbsp; 
        

            

                
            
        
    
    

        

            

        
    
    

        

            
 
        
    
   

Et maintenant, nous allons ajouter le code JavaScript pour permettre aux clients Web de parler à notre SignalR Hub. Cela pourrait aller dans un fichier chat.js :

 "use strict";

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

document.getElementById ("sendButton"). disabled = true;

connection.on ("ReceiveMessage", fonction (utilisateur, message) {
    var msg = message.replace (/ & / g, "& amp;"). replace (/  / g, "& gt;");
    var encodedMsg = utilisateur + "dit" + msg;
    var li = document.createElement ("li");
    li.textContent = encodedMsg;
    document.getElementById ("messagesList"). appendChild (li);
});

connection.start (). then (function () {
    document.getElementById ("sendButton"). disabled = false;
}). catch (fonction (err) {
    return console.error (err.toString ());
});

document.getElementById ("sendButton"). addEventListener ("clic", fonction (événement) {
    var user = document.getElementById ("userInput"). value;
    var message = document.getElementById ("messageInput"). value;
    connection.invoke ("SendMessage", utilisateur, message) .catch (fonction (err) {
        return console.error (err.toString ());
    });
    event.preventDefault ();
}); 

Le code ci-dessus fait essentiellement trois choses de base:

1. Demander au client Web d'ouvrir une connexion au SignalR Hub sur le serveur et de faire une poignée de main invisible pour comprendre notre transport réseau.
2. Certes, nous avons une connexion , au clic de l'utilisateur, nous capturons les entrées et invoquons la méthode SendMessage () sur SignalR Hub avec les paramètres appropriés.
3. Définissez la méthode ReceiveMessage () que le serveur SignalR utiliserait. faire demi-tour pour appeler – cela capture essentiellement les messages de discussion du serveur et les affiche dans une liste.

C'est tout pour une application de discussion de base alimentée par SignalR côté serveur et côté client. Lançons deux instances de navigateur de notre application locale – le chat en temps réel fonctionne.

Gestion des connexions

Les concentrateurs SignalR côté serveur offrent une pléthore d'API pour la gestion des connexions. Certaines sont vraiment utiles:

• Les concentrateurs exposent une propriété de contexte qui contient une multitude d'informations sur la connexion avec les clients, y compris des identifiants uniques pour chaque connexion / utilisateur [19659028] Une propriété clients contient la collection de tous les clients connectés et permet une gestion affinée
• Les concentrateurs SignalR peuvent être fortement typés via le concentrateur où les méthodes client doivent implémenter des interfaces
• Les concentrateurs SignalR déclenchent des événements lorsque les clients connexion / déconnexion, ainsi que la fonctionnalité de reconnexion pour certaines plates-formes clientes

Depuis que nous avons commencé avec une application de chat, un scénario commercial courant consiste à créer un salon de discussion. Heureusement, SignalR Hubs offe r un contrôle granulaire sur la façon dont les messages sont distribués aux clients connectés. Au fur et à mesure que les clients se connectent au concentrateur, ils peuvent être placés dans des groupes et les messages peuvent être transmis à l'appelant / à tous les groupes connectés / nommés, etc. Voici un exemple de code dans notre concentrateur SignalR:

 tâche publique SendMessageToCaller (message de chaîne)
{
    renvoie Clients.Caller.SendAsync ("ReceiveMessage", message);
}

Tâche asynchrone de remplacement public OnConnectedAsync ()
{
    attendre Groups.AddToGroupAsync (Context.ConnectionId, "ChatRoom");
    attendre base.OnConnectedAsync ();
}

tâche prioritaire asynchrone OnDisconnectedAsync (exception d'exception)
{
    attendre Groups.RemoveFromGroupAsync (Context.ConnectionId, "ChatRoom");
    attendre base.OnDisconnectedAsync (exception);
}

tâche publique SendMessageToGroup (message de chaîne)
{
    renvoyer Clients.Group ("ChatRoom"). SendAsync ("ReceiveMessage", message);
} 

Le code ci-dessus devrait être explicite; nous regroupons simplement les clients et envoyons des messages de manière sélective. Voici le résultat, après un nettoyage de l'interface utilisateur:

Configuration du transport

Un autre aspect intéressant de SignalR moderne est configurabilité de la pile réseau. Comme mentionné précédemment, SignalR choisit le meilleur ajustement possible pour le transport réseau compte tenu de la paire serveur-client, basculant avec élégance entre WebSockets, événements envoyés par le serveur et interrogation longue. Pour la plupart des clients Web modernes utilisant des navigateurs à feuilles persistantes, le transport évident le choix est WebSockets. Vous obtenez une communication bidirectionnelle fiable entre le client / serveur. Les développeurs ne devraient jamais avoir de doute quant à ce que SignalR fait sous les couvertures avec le transport réseau. Alors que la plupart des outils de développement de navigateur afficheront les modèles de trafic et le contenu, des mandataires réseau sophistiqués comme Fiddler fournit aux développeurs encore plus de munitions pour manipuler / tester / enregistrer les communications SignalR.

SignalR également h en tant que sérialisation / désérialisation intégrée, afin que les développeurs n'aient pas à être contraints de passer des chaînes dans les deux sens. Les objets entiers peuvent être transportés et aplatis / hydratés à travers les barrières de la plate-forme. Le moyen le plus courant de contourner les données sérialisées est JSON et SignalR est préconfiguré pour utiliser JSON – la valeur par défaut est la sérialisation / désérialisation JSON intégrée à .NET, mais on peut également passer à l'utilisation de NewtonSoft.Json. Même avec le réseau WebSockets, on peut regarder sous les couvertures pour voir le JSON lisible par l'homme envoyé à travers le fil, comme on le voit dans Chromium DevTools ici:

Avoir des performances et des problèmes de bande passante pour transmettre trop de données à votre application SignalR? MessagePack est un format de sérialisation binaire populaire qui est beaucoup plus compact que JSON, et SignalR prend en charge MessagePack avec un tout petit peu de configuration sur le serveur et le client. La sérialisation binaire, cependant, signifie que le contenu des messages SignalR n'est plus lisible, à moins que les octets ne soient transmis via un analyseur MessagePack. Les développeurs perdent donc un peu de transparence, mais l'application gagne en efficacité et en performances.

Pour configurer l'utilisation de MessagePack dans SignalR communications, les développeurs doivent extraire le Microsoft.AspNetCore.SignalR.Protocols.MessagePack NuGet package côté serveur et mentionner explicitement le protocole MessagePack lorsque ajout du middleware SignalR, comme ceci:

 services.AddSignalR (). AddMessagePackProtocol (); 

On peut également personnaliser la façon dont MessagePack formate les données et des attributs simples peuvent définir la manière dont les objets sont sérialisés. Côté client Web, la prise en charge de MessagePack avec SignalR est fournie par le package @ microsoft / signalr-protocol-msgpack npm, qui peut être ajouté comme suit:

 npm install @ microsoft / signalr-protocol -msgpack 

Nous référençons essentiellement certains modules Node, qui peuvent être liés ou les fichiers JS correspondants directement intégrés dans le projet Web, comme ci-dessous:

Une fois que nos dépendances sont en place, nous pouvons initialiser l'utilisation de MessagePack lorsque notre client Web monte pour se connecter au SignalR Hub sur le serveur, comme ceci:

 var connection = new signalR.HubConnectionBuilder ()
                .withUrl ("/ chatHub")
                .withHubProtocol (nouveau signalR.protocols.msgpack.MessagePackHubProtocol ())
                .build (); 

Avec le protocole MessagePack utilisé, nous devrions voir le trafic réseau sérialisé au format binaire – de meilleures performances grâce à des paquets d'octets plus petits pour la victoire!

Les applications de discussion en ligne Hello World sont des premières étapes amusantes pour les applications en temps réel. Des applications en temps réel plus réalistes peuvent aider à automatiser des flux de travail d'entreprise complexes et le backend de discussion pourrait être un chatbot intelligent. cadres pour connecter vos applications de chat à – tous avec des outils riches et des SDK pour la plupart des plates-formes. Et SignalR est heureux d'être les développeurs d'abstraction adorent les complexités du réseau.

Une autre chose dont les développeurs peuvent avoir besoin lors de la création d'applications de chat du monde réel – oui, une interface utilisateur soignée et performante. Lorsque votre objectif est d'automatiser intelligemment les flux de travail et d'offrir de la valeur, la création d'une interface utilisateur de chat à la main est trop laborieuse et prend du temps. Entrez Interface conversationnelle – composants d'interface utilisateur modernes pour les chatbots à travers les technologies d'interface utilisateur Telerik / Kendo. Avec une large compatibilité de framework, une interface utilisateur de chat raffinée avec une documentation détaillée et des API flexibles, les développeurs peuvent être sur le point d'implémenter rapidement un flux conversationnel naturel.

Pour les clients Web alimentés par SignalR, l'interface utilisateur conversationnelle peut être intégrée pour une grande variété de plates-formes : via Telerik UI pour ASP.NET Ajax / MVC / Core ou Kendo UI pour jQuery / Angular / React / Vue . Et comme il s'agit d'applications Web, elles n'ont pas besoin d'être limitées aux navigateurs de bureau. Les développeurs peuvent absolument créer des applications PWA conçues pour les mobiles avec une interface utilisateur de chat raffinée. Alléluia. Découvrez quelques-unes des démonstrations rapides de ce qui est possible avec les applications de chat en temps réel qui peuvent automatiser les flux de travail:

Conclusion

La vie se déroule en temps réel et l'échange d'informations devrait être le même. Il s'avère que d'innombrables applications modernes ne bénéficient pas seulement, mais dépendent activement des communications en temps réel pour être fonctionnelles. SignalR est extrêmement prometteur en tant que cadre qui facilite la création d'applications en temps réel. Avec une tonne de configurabilité, les concentrateurs SignalR sont faciles à configurer côté serveur. Et la création de clients Web connectés à SignalR Hubs est tout aussi simple, avec des API flexibles et une merveilleuse abstraction des complexités du réseau. Les applications Web propulsées par SignalR sont donc chose faite – rien de plus simple.

Mais pourrions-nous étendre les applications en temps réel à d'autres plateformes, comme le bureau ou le mobile? Oui absolument. Alors que nous utilisons d'autres plates-formes pour prendre en charge SignalR dans les articles suivants, le Web continue de profiter de l'ubiquité et les applications en temps réel deviennent chaque jour plus utiles. Les développeurs et les consommateurs se réjouissent.