Esercitazione: Introduzione a SignalR 1.x e MVC 4

  • Articolo

di Patrick Fletcher, Tim Teebken

Avviso

Questa documentazione non è per la versione più recente di SignalR. Esaminare ASP.NET Core SignalR.

Questa esercitazione illustra come usare ASP.NET SignalR per creare un'applicazione chat in tempo reale. Si aggiunge SignalR a un'applicazione MVC 4 e si crea una visualizzazione chat per inviare e visualizzare messaggi.

Panoramica

Questa esercitazione illustra lo sviluppo di applicazioni Web in tempo reale con ASP.NET SignalR e ASP.NET MVC 4. L'esercitazione usa lo stesso codice dell'applicazione chat dell'esercitazione di SignalR Introduzione, ma illustra come aggiungerlo a un'applicazione MVC 4 basata sul modello Internet.

In questo argomento verranno illustrate le attività di sviluppo SignalR seguenti:

  • Aggiunta della libreria SignalR a un'applicazione MVC 4.
  • Creazione di una classe hub per eseguire il push del contenuto nei client.
  • Uso della libreria jQuery SignalR in una pagina Web per inviare messaggi e visualizzare gli aggiornamenti dall'hub.

La schermata seguente mostra l'applicazione chat completata in esecuzione in un browser.

Istanze di chat

Sezioni:

Configurare il progetto

Prerequisiti:

  • Visual Studio 2010 SP1, Visual Studio 2012 o Visual Studio 2012 Express. Se Visual Studio non è disponibile, vedere ASP.NET Download per ottenere lo strumento di sviluppo Express di Visual Studio 2012 gratuito.
  • Per Visual Studio 2010, installare ASP.NET MVC 4.

Questa sezione illustra come creare un'applicazione ASP.NET MVC 4, aggiungere la libreria SignalR e creare l'applicazione chat.

    1. In Visual Studio creare un'applicazione ASP.NET MVC 4, denominarla SignalRChat e fare clic su OK.

      Nota

      In VS 2010 selezionare .NET Framework 4 nel controllo a discesa Versione di Framework. Il codice SignalR viene eseguito in .NET Framework versioni 4 e 4.5.

      Creare il web mvc 2. Selezionare il modello applicazione Internet, deselezionare l'opzione Per creare un progetto di unit test e fare clic su OK.

      Creare un sito Internet mvc 3. Aprire la console di Gestione pacchetti > NuGet Degli strumenti > ed eseguire il comando seguente. Questo passaggio aggiunge al progetto un set di file di script e riferimenti all'assembly che abilitano la funzionalità SignalR.

      install-package Microsoft.AspNet.SignalR -Version 1.1.34. In Esplora soluzioni espandere la cartella Script. Si noti che le librerie di script per SignalR sono state aggiunte al progetto.

      Riferimenti alla libreria 5. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto, selezionare Aggiungi | Nuova cartella e aggiungere una nuova cartella denominata Hub. 6. Fare clic con il pulsante destro del mouse sulla cartella Hubs , scegliere Aggiungi | Classe e creare una nuova classe C# denominata ChatHub.cs. Questa classe verrà usata come hub server SignalR che invia messaggi a tutti i client.

Nota

Se si usa Visual Studio 2012 e si è installato l'aggiornamento ASP.NET and Web Tools 2012.2, è possibile usare il nuovo modello di elemento SignalR per creare la classe hub. A tale scopo, fare clic con il pulsante destro del mouse sulla cartella Hubs , scegliere Aggiungi | Nuovo elemento, selezionare Classe hub SignalR (v1) e assegnare un nome alla classe ChatHub.cs.

  1. Sostituire il codice nella classe ChatHub con il codice seguente.

    using System;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

  2. Aprire il file Global.asax per il progetto e aggiungere una chiamata al metodo come prima riga di codice nel Application_Start metodoRouteTable.Routes.MapHubs();. Questo codice registra la route predefinita per gli hub SignalR e deve essere chiamato prima di registrare qualsiasi altra route. Il metodo completato Application_Start è simile all'esempio seguente.

    protected void Application_Start()
{
    RouteTable.Routes.MapHubs();
    AreaRegistration.RegisterAllAreas();

    WebApiConfig.Register(GlobalConfiguration.Configuration);
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
    AuthConfig.RegisterAuth();
}

  3. Modificare la HomeController classe trovata in Controller/HomeController.cs e aggiungere il metodo seguente alla classe. Questo metodo restituisce la visualizzazione Chat creata in un passaggio successivo.

    public ActionResult Chat()
{
    return View();
}

  4. Fare clic con il pulsante destro del Chat mouse sul metodo appena creato e scegliere Aggiungi visualizzazione per creare un nuovo file di visualizzazione.

  5. Nella finestra di dialogo Aggiungi visualizzazione assicurarsi che la casella di controllo sia selezionata per Usare un layout o una pagina master (deselezionare le altre caselle di controllo) e quindi fare clic su Aggiungi.

    Aggiungere una vista

  6. Modificare il nuovo file di visualizzazione denominato Chat.cshtml. Dopo il <tag h2>, incollare la sezione div> seguente <e @section scripts il blocco di codice nella pagina. Questo script consente alla pagina di inviare messaggi di chat e visualizzare messaggi dal server. Il codice completo per la visualizzazione chat viene visualizzato nel blocco di codice seguente.

    Importante

    Quando si aggiungono SignalR e altre librerie di script al progetto di Visual Studio, Gestione pacchetti potrebbe installare versioni degli script più recenti rispetto alle versioni visualizzate in questo argomento. Assicurarsi che i riferimenti allo script nel codice corrispondano alle versioni delle librerie di script installate nel progetto.

    @{
    ViewBag.Title = "Chat";
}

<h2>Chat</h2>

<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion">
    </ul>
</div>

@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-1.0.1.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.--> 
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.  
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

  7. Salvare tutto per il progetto.

Eseguire l'esempio

  1. Premere F5 per eseguire il progetto in modalità di debug.

  2. Nella riga dell'indirizzo del browser aggiungere /home/chat all'URL della pagina predefinita per il progetto. La pagina Chat carica in un'istanza del browser e richiede un nome utente.

    Immettere il nome utente

  3. Immettere un nome utente.

  4. Copiare l'URL dalla riga di indirizzo del browser e usarlo per aprire due altre istanze del browser. In ogni istanza del browser immettere un nome utente univoco.

  5. In ogni istanza del browser aggiungere un commento e fare clic su Invia. I commenti devono essere visualizzati in tutte le istanze del browser.

    Nota

    Questa semplice applicazione chat non gestisce il contesto di discussione nel server. L'hub trasmette commenti a tutti gli utenti correnti. Gli utenti che accedono alla chat in un secondo momento visualizzeranno i messaggi aggiunti al momento dell'aggiunta.

  6. La schermata seguente mostra l'applicazione chat in esecuzione in un browser.

    Browser di chat

  7. In Esplora soluzioni esaminare il nodo Documenti script per l'applicazione in esecuzione. Questo nodo è visibile in modalità di debug se si usa Internet Explorer come browser. È presente un file di script denominato hub che la libreria SignalR genera dinamicamente in fase di esecuzione. Questo file gestisce la comunicazione tra lo script jQuery e il codice lato server. Se si usa un browser diverso da Internet Explorer, è anche possibile accedere al file hub dinamico passando direttamente a esso, ad esempio http://mywebsite/signalr/hubs.

    Script hub generato

Esaminare il codice

L'applicazione chat SignalR illustra due attività di sviluppo di SignalR di base: la creazione di un hub come oggetto di coordinamento principale nel server e l'uso della libreria jQuery SignalR per inviare e ricevere messaggi.

Hub SignalR

Nell'esempio di codice la classe ChatHub deriva dalla classe Microsoft.AspNet.SignalR.Hub . La derivazione dalla classe Hub è un modo utile per creare un'applicazione SignalR. È possibile creare metodi pubblici nella classe hub e quindi accedere a tali metodi chiamandoli dagli script jQuery in una pagina Web.

Nel codice chat i client chiamano il metodo ChatHub.Send per inviare un nuovo messaggio. L'hub a sua volta invia il messaggio a tutti i client chiamando Client.All.addNewMessageToPage.

Il metodo Send illustra diversi concetti dell'hub:

  • Dichiarare i metodi pubblici in un hub in modo che i client possano chiamarli.

  • Usare la proprietà Microsoft.AspNet.SignalR.Hub.Clients per accedere a tutti i client connessi a questo hub.

  • Chiamare una funzione jQuery nel client (ad esempio la addNewMessageToPage funzione) per aggiornare i client.

    public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        Clients.All.addNewMessageToPage(name, message);
    }
}

SignalR e jQuery

Il file di visualizzazione Chat.cshtml nell'esempio di codice illustra come usare la libreria jQuery SignalR per comunicare con un hub SignalR. Le attività essenziali nel codice creano un riferimento al proxy generato automaticamente per l'hub, dichiarando una funzione che il server può chiamare per eseguire il push del contenuto ai client e avviando una connessione per inviare messaggi all'hub.

Il codice seguente dichiara un proxy per un hub.

var chat = $.connection.chatHub;

Nota

In jQuery il riferimento alla classe server e i relativi membri sono in caso di cammello. L'esempio di codice fa riferimento alla classe ChatHub C# in jQuery come chatHub. Se si vuole fare riferimento alla ChatHub classe in jQuery con maiuscole e minuscole pascal convenzionali come si farebbe in C#, modificare il file di classe ChatHub.cs. Aggiungere un'istruzione using per fare riferimento allo Microsoft.AspNet.SignalR.Hubs spazio dei nomi. Aggiungere quindi l'attributo HubName alla ChatHub classe, ad esempio [HubName("ChatHub")]. Infine, aggiornare il riferimento jQuery alla ChatHub classe.

Il codice seguente illustra come creare una funzione di callback nello script. La classe hub nel server chiama questa funzione per eseguire il push degli aggiornamenti del contenuto a ogni client. La chiamata facoltativa alla htmlEncode funzione mostra un modo per codificare HTML il contenuto del messaggio prima di visualizzarlo nella pagina, come modo per impedire l'inserimento di script.

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

Il codice seguente illustra come aprire una connessione con l'hub. Il codice avvia la connessione e quindi passa una funzione per gestire l'evento click nel pulsante Invia nella pagina Chat.

Nota

Questo approccio garantisce che la connessione venga stabilita prima dell'esecuzione del gestore eventi.

$.connection.hub.start().done(function () {
    $('#sendmessage').click(function () {
        // Call the Send method on the hub. 
        chat.server.send($('#displayname').val(), $('#message').val());
        // Clear text box and reset focus for next comment. 
        $('#message').val('').focus();
    });
});

Passaggi successivi

Si è appreso che SignalR è un framework per la creazione di applicazioni Web in tempo reale. Sono state apprese anche diverse attività di sviluppo di SignalR: come aggiungere SignalR a un'applicazione ASP.NET, come creare una classe hub e come inviare e ricevere messaggi dall'hub.

Per altre informazioni sui concetti di sviluppo di SignalR avanzati, visitare i siti seguenti per il codice sorgente e le risorse di SignalR: