Communication client et serveur en temps réel avec SignalR

Dans cet article, nous allons voir comment utiliser SignalR Core dans une application Web Asp.net Core 2.0. pour envoyer des messages en temps réel à tous les clients connectés.

Vous trouverez le code complet de l’application sur le repo git.

Présentation de SignalR

SignalR est une bibliothèque client/serveur permettant d’ajouter les fonctionnalités nécessaires pour activer la communication en temps réel à une application asp.net Web.

SignalR peut être utilisé pour ajouter n’importe quelle fonctionnalité Web « temps réel » (tel qu’un système de chat, la notification des messages, etc.)  à votre application. Cela permet également la communication entre le client et le serveur à travers des WebSokets.

Installation de SignalR avec Nuget

On va tout d’abord créer une nouvelle application web asp.net core (Web.SignalR.Demo)

Vous pouvez sélectionner le modèle Application web (Model-View-Cotroller), cela afin d’avoir l’architecture MVC par défaut. Ensuite, nous allons récupérer le package Microsoft.AspNetCore.SignalR et Microsoft.AspNetCore.ALL via le gestionnaire d’extension Nuget.

Une fois fait, installez la bibliothèque de client SignalR JavaScript via npm avec la console du gestionnaire de package Visual Studio :

1. npm init -y :  Pour créer et initialiser le fichier package.json.
2. npm install @aspnet/signalr : Pour installer le package SignalR.

Un fois l’installation effectuée, déplacez le fichier signalr.min.js contenu dans l’emplacement ci-après :
(node_modules\@aspnet\signalr\dist\browser\) vers (wwwroot\js). Et référencez le fichier dans la liste des Scripts JavaScripts dans le Layout de l’application :

Création d’un Hub

Un Hub est une classe de l’API SignalR côté serveur, il permet au client d’appeler facilement les méthodes du serveur, et inversement. Dans notre exemple, nous allons créer un nouveau projet Web.SignalR.Demo.Serveur où nous définissons la classe et les méthodes du Hub.

Ces méthodes vont être déclenchées par un utilisateur pour notifier tous les clients connectés sur le site.

Ajoutez les packages Nuget SignalR et Microsoft.AspNetCore.ALL dans le nouveau projet via le gestionnaire d’extension Nuget.

Dans le projet Web.SignalR.Demo.Serveur, ajoutez une nouvelle classe InfosPublisher qui héritera de la classe Hub.

Dans cette classe, on va définir une nouvelle méthode publique PublishInfo, qui va être invoquée par le client.

Définissons maintenant une classe Startup qui va contenir la configuration de notre Hub SignalR, En précisant les informations suivantes :

• • L’url du client qui va communiquer avec notre serveur,
  • La déclaration de la classe InfosPublisher comme Hub.

Puis il faut appeler cette configuration dans la méthode main de la classe Program.

Coté client

Dans le projet Web.SignalR.Demo, ajouter l’action SendMessage dans le Controller HomeController et créez la vue qui correspond à l’action (SendMessage.cshtml).

Dans la vue SendMessage.cshtml nous allons définir le script qui permet d’invoquer la méthode
PublishInfo du Hub InfoPublisher.

connection.invoke(‘PublishInfo’, MessageInfo);

Pour afficher la notification à tous les clients , nous allons ajouter côté  Javascript la méthode que le serveur va invoquer.

connection.on(‘OnInfoPublished’, data => {$(‘#reports’).append($(‘<li>’).html(‘<b> ‘ + data.userName + ‘ </b> : ‘ + data.userMessage));            });

Remplacez le contenu de la vue par le code suivant :

Lancez les deux applications client/serveur.

Conclusion

Comme nous venons de le voir ensemble, mettre en place SignalR avec une application Asp.net Core 2.0 qui contient des notifications push n’est pas compliqué.

La solution SignalR offre d’autres fonctionnalités, elle permet la communication bidirectionnelle (et en particulier les notifications push serveur-client). Je vous invite d’ailleurs vivement à creuser sur le sujet pour mieux découvrir l’API.