SignalR, un semplice esempio.
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.
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:
- Definire il metodo client broadcastMessage su tutti i client del nostro Hub che prende il messaggio e lo mette nell'input.
- 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.