Oggi utilizzeremo la libreria SignalR per creare una semplice pagina web (html!) che permetterà di "scambiare messaggi" tra due utenti diversi utilizzando un semplice input. SignalR è una libreria fornita da Microsoft, composta sia da codice da eseguire lato server sia codice da eseguire lato client. La libreria aggiunge delle funzionalità "real-time" alle pagine web e ci permetterà di eseguire codice javascript sul client con delle richieste che "partono" lato server. Per maggiori dettagli si può vedere qui

Per cominciare creiamo un nuovo progetto in visual studio, un semplice sito web sarà sufficiente. In seguito aggiungiamo tramite NuGet la libreria SignalR. 
Successivamente aggiungiamo al progetto una classe "owin startup" e modifichiamo il codice come segue:
public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888
        app.MapSignalR();
    }
}

Aggiungiamo una pagina html, facendo attenzione a linkare le librerie javascript necessarie al funzionamento di SignalR

<script src="Scripts/jquery-1.9.0.js"></script>
<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src="signalr/hubs"></script>

Adesso aggiungiamo una classe c# al progetto "CopyPasteHub.cs" e inseriamo il seguente codice

public class CopyPasteHub : Hub
{
    public void Send(string message)
    {
        Clients.All.broadcastMessage(message);
    }
}
Questo codice definisce nel nostro Hub un metodo "Send" che potremo chiamare via javascript dalle pagine web e che a sua volta chiamerà il metodo javascript broadcastMessage su tutti i client che attualmente stanno visitando la nostra pagina. L'ultimo passo è aggiungere il codice seguente alla pagina web
<input id="text" type="text" />
<button id="bottone">Salva</button>
<script type="text/javascript">
    $(function () {
        var chat = $.connection.copyPasteHub;
        chat.client.broadcastMessage = function (message) {
            console.log("broadcast");
            $('#text').val(message);
        };
 
        $.connection.hub.start().done(function () {
            $('#bottone').click(function () {
                chat.server.send($('#text').val());
            });
        });
    });
</script>

Queste righe di codice ci permettono di fare due cose:

  1. Definire il metodo client broadcastMessage su tutti i client del nostro Hub che prende il messaggio e lo mette nell'input.
  2. Al caricamento dell'hub agganciamo all'evento click del pulsante chiama il metodo server "send" che si occuperà di notificare tutti gli altri client del nuovo messaggio.
Con pochissimo codice e poca fatica abbiamo creato una pagina che permette la comunicazione di due utenti. Per testarlo basta aprire l'applicazione su due tab o finestre diverse del browser, scrivere qualcosa nella textbot e cliccare sul pulsante salva. Si potrà osservare che in tutte le finestre in cui è aperta la pagina viene visualizzato il messaggio. Ovviamente abbiamo solamente scalfito la superficie della libreria SignalR ma abbiamo iniziato ad usarla e capire i suoi meccanismi.
comments powered by Disqus