`Les Dieux du ${Code}`

La semaine dernière, les Jedis d’Expaceo avaient pour sujet SignalR. Pour tous ceux qui n’ont pas pu venir, et ceux qui ont déjà oublié, voilà en quelques mots ce qu’est cette technologie !

SignalR, donc, est une librairie pour ASP.NET qui permet d’ajouter facilement du temps réel à votre application Web. Basée sur le protocole WebSockets introduit avec HTML5 (mais pouvant élégamment exploiter d’autres méthodes, comme le Long Polling, en l’absence de WebSockets), elle met en place une connexion bi-directionnelle entre le client et le serveur.

Vous pourrez donc invoquer une méthode C# définie dans votre application serveur depuis un script Javascript, mais également appeler une fonction Javascript, exécutée sur le client, depuis le serveur.

Et tout cela est très simple à mettre en place !

Après avoir ajouté le paquet NuGet à votre projet Install-Package Microsoft.AspNet.SignalR, il vous suffit d’y ajouter un hub contenant toutes les méthodes accessibles depuis le client, de cette manière :

using Microsoft.AspNet.SignalR;

public class SignalRServer:Hub

{

  public void Send(string command)

  {

    Clients.All.echoCommand(command);

  }

}

Dans le cas présent, la méthode Send appelle chez tous les clients connectés la fonction echoCommand avec le paramètre passé en argument de Send. On peut difficilement faire plus simple !

Du côté client, c’est également très facile :

<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>

<script src="~/signalr/hubs"></script>

<script>

var signalR = $.connection.signalRServer;

signalR.client.echoCommand = function (command) {

  $("#cmdEcho").html(command);

}

$.connection.hub.start().done(function () {

  $("#butTestSignalR").click(function () {

    signalR.server.send($(this).val());

  });

});

</script>

<div id="cmdEcho"></div>

<button type="button" id="butTestSignalR" value="Test"></button>

Après avoir appelé les scripts d’initialisation, on se connecte au hub, on définit la fonction echoCommand qui est appelée via le hub puis, si la connexion s’est bien passée, on associe au clic sur le bouton l’appel de la méthode Send du hub avec en argument la valeur du bouton.

Au moment du clic, la méthode Send sera donc invoquée et, en retour, elle appellera la méthode echoCommand du client, ce qui aura pour effet de remplir la div cmdEcho avec le contenu du bouton cliqué.

Evidemment, cet exemple n’a aucun intérêt en soi et il serait beaucoup plus simple de faire 

$("#butTestSignalR").click(function () {

  $("#cmdEcho").html($(this).val());

});

Mais l’idée est de vous présenter SignalR, pas de vous expliquer le Javascript ;)

Vous pouvez télécharger la démonstration qui a servi de support lors de la présentation pour des exemples un peu plus intéressants.