Lab pratico: Applicazioni Web in tempo reale con SignalR

per il team di Campi Web

Scaricare Web Camps Training Kit, versione di ottobre 2015

Le applicazioni Web in tempo reale consentono di eseguire il push del contenuto lato server ai client connessi in tempo reale. Per gli sviluppatori ASP.NET, ASP.NET SignalR è una libreria per aggiungere funzionalità Web in tempo reale alle applicazioni. Sfrutta diversi trasporti, selezionando automaticamente il trasporto più disponibile, dato il trasporto client e server migliore disponibile. Sfrutta WebSocket, un'API HTML5 che consente la comunicazione bidirezionale tra il browser e il server.

SignalR offre anche un'API semplice e di alto livello per eseguire il server a RPC client (chiamare funzioni JavaScript nei browser dei client dal codice .NET sul lato server) nell'applicazione ASP.NET, oltre ad aggiungere hook utili per la gestione delle connessioni, ad esempio eventi di connessione e disconnessione, connessioni di raggruppamento e autorizzazione.

SignalR è un'astrazione su alcuni dei trasporti necessari per eseguire operazioni in tempo reale tra client e server. Una connessione SignalR viene avviata come HTTP e viene quindi promossa a una connessione WebSocket se disponibile. WebSocket è il trasporto ideale per SignalR, poiché rende l'uso più efficiente della memoria server, ha la latenza più bassa e ha le funzionalità più sottostanti (ad esempio la comunicazione full duplex tra client e server), ma ha anche i requisiti più rigorosi: WebSocket richiede che il server usi Windows Server 2012 o Windows 8, insieme a .NET Framework 4.5. Se questi requisiti non sono soddisfatti, SignalR tenterà di usare altri trasporti per rendere le connessioni (ad esempio Ajax long polling).

L'API SignalR contiene due modelli per la comunicazione tra client e server: Connessioni persistenti e hub. Una connessione rappresenta un endpoint semplice per l'invio di messaggi a destinatari singoli, raggruppati o trasmessi. Un hub è una pipeline di livello più elevato basata sull'API connessione che consente al client e al server di chiamare i metodi direttamente.

Tutti i frammenti di codice e codice di esempio sono inclusi nel Web Camps Training Kit, versione di ottobre 2015, disponibile all'indirizzo https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b. Si noti che il collegamento Programma di installazione in tale pagina non funziona più; usare uno dei collegamenti nella sezione Asset.

Panoramica

Obiettivi

In questo lab pratico si apprenderà come:

• Inviare notifiche dal server al client usando SignalR.
• Scale Out'applicazione SignalR usando SQL Server.

Prerequisiti

Di seguito è necessario completare questo lab pratico:

• Visual Studio Express 2013 per Web o versione successiva

Installazione

Per eseguire gli esercizi in questo lab pratico, è necessario configurare prima l'ambiente.

1. Aprire una finestra di Esplora risorse di Windows e passare alla cartella Origine del lab.
2. Fare clic con il pulsante destro del mouse su Setup.cmd e selezionare Esegui come amministratore per avviare il processo di installazione che configurerà l'ambiente e installare i frammenti di codice di Visual Studio per questo lab.
3. Se viene visualizzata la finestra di dialogo Controllo account utente, confermare l'azione da procedere.

Uso dei frammenti di codice

In tutto il documento del lab verrà indicato di inserire blocchi di codice. Per praticità, la maggior parte di questo codice viene fornita come frammenti di codice di Visual Studio, che è possibile accedere da Visual Studio 2013 per evitare di dover aggiungerlo manualmente.

Esercizi

Questo lab pratico include gli esercizi seguenti:

1. Uso dei dati Real-Time tramite SignalR
2. Scalabilità orizzontale tramite SQL Server

Tempo stimato per completare questo lab: 60 minuti

Esercizio 1: Uso dei dati Real-Time tramite SignalR

Anche se la chat viene spesso usata come esempio, è possibile eseguire un'intera operazione con funzionalità Web in tempo reale. Ogni volta che un utente aggiorna una pagina Web per visualizzare nuovi dati o la pagina implementa il polling long Ajax per recuperare nuovi dati, è possibile usare SignalR.

SignalR supporta la funzionalità push o trasmissione delserver; gestisce automaticamente la gestione delle connessioni. Nelle connessioni HTTP classiche per la comunicazione client-server, la connessione viene riabilitata per ogni richiesta, ma SignalR fornisce una connessione persistente tra il client e il server. In SignalR il codice del server chiama un codice client nel browser usando chiamate di procedura remota (RPC), anziché il modello di risposta alla richiesta che sappiamo oggi.

In questo esercizio si configurerà l'applicazione Geek Quiz per usare SignalR per visualizzare il dashboard Statistiche con le metriche aggiornate senza la necessità di aggiornare l'intera pagina.

Attività 1 : Esplorazione della pagina statistiche del quiz geek

In questa attività si passerà attraverso l'applicazione e si verificherà come viene visualizzata la pagina delle statistiche e come è possibile migliorare il modo in cui vengono aggiornate le informazioni.

1. Aprire Visual Studio Express 2013 per Web e aprire la soluzione GeekQuiz.sln disponibile nella cartella Source\Ex1-WorkingWithRealTimeData\Begin.

2. Premere F5 per eseguire la soluzione. La pagina Log in deve essere visualizzata nel browser.

   

   Esecuzione della soluzione

3. Fare clic su Registra nell'angolo superiore destro della pagina per creare un nuovo utente nell'applicazione.

   

   Registrare il collegamento

4. Nella pagina Registra immettere un nome utente e una password e quindi fare clic su Registra.

   

   Registrazione di un utente

5. L'applicazione registra il nuovo account e l'utente viene autenticato e reindirizzato alla home page che mostra la prima domanda del quiz.

6. Aprire la pagina Statistiche in una nuova finestra e inserire la pagina Home page and Statistics side-by-side.

   Finestre affiancate

   Finestre affiancate

7. Nella home page rispondere alla domanda facendo clic su una delle opzioni.

   

   Risposta a una domanda

8. Dopo aver fatto clic su uno dei pulsanti, verrà visualizzata la risposta.

   

   Domanda risolta correttamente

9. Si noti che le informazioni fornite nella pagina Statistiche non sono aggiornate. Aggiornare la pagina per visualizzare i risultati aggiornati.

   

   Pagina Statistiche

10. Indietro a Visual Studio e arrestare il debug.

Attività 2 : Aggiunta di SignalR a Geek Quiz per visualizzare grafici online

In questa attività si aggiungerà SignalR alla soluzione e si inviano automaticamente aggiornamenti ai client quando viene inviata una nuova risposta al server.

1. Dal menu Strumenti in Visual Studio selezionare Gestione pacchetti NuGet e quindi fare clic su Console di Gestione pacchetti.

2. Nella finestra Console di Gestione pacchetti eseguire il comando seguente:

   Install-Package Microsoft.AspNet.SignalR
   

   

   Installazione del pacchetto SignalR

   Nota

   Quando si installano pacchetti NuGet SignalR versione 2.0.2 da una nuova applicazione MVC 5, è necessario aggiornare manualmente i pacchetti OWIN alla versione 2.0.1 (o successiva) prima di installare SignalR. A tale scopo, è possibile eseguire lo script seguente nella console di Gestione pacchetti:

   get-package | where-object { $_.Id -like "Microsoft.Owin*"} | Update-Package
   

   In una versione futura di SignalR, le dipendenze OWIN verranno aggiornate automaticamente.

3. In Esplora soluzioni espandere la cartella Script e notare che i file js SignalR sono stati aggiunti alla soluzione.

   a

   Riferimenti JavaScript signalR

4. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto GeekQuiz, selezionare Aggiungi | nuova cartella e denominarlo Hub.

5. Fare clic con il pulsante destro del mouse sulla cartella Hubs e scegliere Aggiungi | Nuovo elemento.

   

   Aggiungere un nuovo elemento

6. Nella finestra di dialogo Aggiungi nuovo elemento selezionare Visual C# | Web | Nodo SignalR nel riquadro sinistro, selezionare Classe hub SignalR (v2) nel riquadro centrale, assegnare al file StatisticsHub.cs e fare clic su Aggiungi.

   

   Finestra di dialogo Aggiungi nuovo elemento

7. Sostituire il codice nella classe StatisticsHub con il codice seguente.

   (Frammento di codice - RealTimeSignalR - Ex1 - StatisticsHubClass)

   namespace GeekQuiz.Hubs
   {
       using Microsoft.AspNet.SignalR;
   
       public class StatisticsHub : Hub
       {
       }
   }
   

8. Aprire Startup.cs e aggiungere la riga seguente alla fine del metodo Configuration .

   (Frammento di codice - RealTimeSignalR - Ex1 - MapSignalR)

   public void Configuration(IAppBuilder app)
   {
       this.ConfigureAuth(app);
       app.MapSignalR();
   }
   

9. Aprire la pagina StatisticsService.cs all'interno della cartella Services e aggiungere le direttive seguenti usando.

   (Frammento di codice - RealTimeSignalR - Ex1 - UsingDirectives)

   using Microsoft.AspNet.SignalR;
   using GeekQuiz.Hubs;
   

10. Per informare i client connessi degli aggiornamenti, è prima di tutto possibile recuperare un oggetto Context per la connessione corrente. L'oggetto Hub contiene metodi per inviare messaggi a un singolo client o trasmettere a tutti i client connessi. Aggiungere il metodo seguente alla classe StatisticsService per trasmettere i dati delle statistiche.

    ( Frammento di codice - RealTimeSignalR - Ex1 - NotifyUpdatesMethod)

    public async Task NotifyUpdates()
    {
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<StatisticsHub>();
        if (hubContext != null)
        {
             var stats = await this.GenerateStatistics();
             hubContext.Clients.All.updateStatistics(stats);
        }
    }
    

    Nota

    Nel codice precedente si usa un nome di metodo arbitrario per chiamare una funzione nel client ,ad esempio updateStatistics. Il nome del metodo specificato viene interpretato come oggetto dinamico, il che significa che non esiste alcuna convalida IntelliSense o in fase di compilazione. L'espressione viene valutata in fase di esecuzione. Quando la chiamata al metodo viene eseguita, SignalR invia il nome del metodo e i valori dei parametri al client. Se il client ha un metodo che corrisponde al nome, tale metodo viene chiamato e i valori dei parametri vengono passati a esso. Se non viene trovato alcun metodo corrispondente nel client, non viene generato alcun errore. Per altre informazioni, vedere ASP.NET Guida api hub SignalR.

11. Aprire la pagina TriviaController.cs all'interno della cartella Controller e aggiungere le direttive seguenti usando.

    using GeekQuiz.Services;
    

12. Aggiungere il codice evidenziato seguente al metodo Post action.

    (Frammento di codice - RealTimeSignalR - Ex1 - NotifyUpdatesCall)

    public async Task<IHttpActionResult> Post(TriviaAnswer answer)
    {
        if (!ModelState.IsValid)
        {
             return this.BadRequest(this.ModelState);
        }
    
        answer.UserId = User.Identity.Name;
    
        var isCorrect = await this.StoreAsync(answer);
    
        var statisticsService = new StatisticsService(this.db);
        await statisticsService.NotifyUpdates();
    
        return this.Ok<bool>(isCorrect);
    }
    

13. Aprire la pagina Statistics.cshtml all'interno delle visualizzazioni | Home folder. Individuare la sezione Script e aggiungere i riferimenti di script seguenti all'inizio della sezione.

    (Frammento di codice - RealTimeSignalR - Ex1 - SignalRScriptReferences)

    @section Scripts {
        @Scripts.Render("~/Scripts/jquery.signalR-2.0.2.min.js");
        @Scripts.Render("~/signalr/hubs");
        ...
    }
    

    Nota

    Quando si aggiungono SignalR e altre librerie di script al progetto di Visual Studio, Gestione pacchetti potrebbe installare una versione del file di script SignalR più recente della versione illustrata in questo argomento. Assicurarsi che il riferimento allo script nel codice corrisponda alla versione della libreria di script installata nel progetto.

14. Aggiungere il codice evidenziato seguente per connettere il client all'hub SignalR e aggiornare i dati delle statistiche quando viene ricevuto un nuovo messaggio dall'hub.

    (Frammento di codice - RealTimeSignalR - Ex1 - SignalRClientCode)

    @section Scripts {
        ...
        <script>
            ...
    
            var connection = $.hubConnection();
            var hub = connection.createHubProxy("StatisticsHub");
            hub.on("updateStatistics", function (statistics) {
                    statisticsData = statistics;
                    $("#correctAnswersCounter").text(statistics.CorrectAnswers);
                    $("#incorrectAnswersCounter").text(statistics.IncorrectAnswers);
    
                    showCharts(statisticsData);
              });
    
            connection.start();
        </script>
    }
    

    In questo codice si sta creando un proxy hub e si registra un gestore eventi per ascoltare i messaggi inviati dal server. In questo caso, si ascoltano i messaggi inviati tramite il metodo updateStatistics .

Attività 3: esecuzione della soluzione

In questa attività si eseguirà la soluzione per verificare che la visualizzazione statistiche venga aggiornata automaticamente usando SignalR dopo aver risposto a una nuova domanda.

1. Premere F5 per eseguire la soluzione.

   Nota

   Se non è già stato eseguito l'accesso all'applicazione, accedere con l'utente creato nell'attività 1.

2. Aprire la pagina Statistiche in una nuova finestra e inserire la pagina Home page e Statistiche affiancata come fatto nell'attività 1.

3. Nella home page rispondere alla domanda facendo clic su una delle opzioni.

   

   Risposta a un'altra domanda

4. Dopo aver fatto clic su uno dei pulsanti, verrà visualizzata la risposta. Si noti che le informazioni statistiche nella pagina vengono aggiornate automaticamente dopo aver risposto alla domanda con le informazioni aggiornate senza la necessità di aggiornare l'intera pagina.

   della

   Pagina statistiche aggiornata dopo la risposta

Esercizio 2: Scalabilità orizzontale usando SQL Server

Quando si ridimensiona un'applicazione Web, è in genere possibile scegliere tra scalabilità orizzontalee scalabilità orizzontale. Aumentare le prestazioni significa usare un server più grande, con più risorse (CPU, RAM e così via) mentre la scalabilità orizzontale significa aggiungere altri server per gestire il carico. Il problema di quest'ultimo è che i client possono essere indirizzati a server diversi. Un client connesso a un server non riceverà messaggi inviati da un altro server.

È possibile risolvere questi problemi usando un componente denominato backplane, per inoltrare messaggi tra server. Con un backplane abilitato, ogni istanza dell'applicazione invia messaggi al backplane e il backplane li inoltra alle altre istanze dell'applicazione.

Attualmente sono disponibili tre tipi di backplanes per SignalR:

• Windows bus di servizio di Azure. Il bus di servizio è un'infrastruttura di messaggistica che consente ai componenti di inviare messaggi in modo libero.
• SQL Server. Il backplane SQL Server scrive i messaggi nelle tabelle SQL. Il backplane usa Service Broker per la messaggistica efficiente. Tuttavia, funziona anche se Service Broker non è abilitato.
• Redis. Redis è un archivio chiave-valore in memoria. Redis supporta un modello di pubblicazione/sottoscrizione ("pub/sub") per l'invio di messaggi.

Ogni messaggio viene inviato tramite un bus di messaggi. Un bus di messaggi implementa l'interfaccia IMessageBus , che fornisce un'astrazione di pubblicazione/sottoscrizione. Il backplanes funziona sostituendo IMessageBus predefinito con un bus progettato per il backplane.

Ogni istanza del server si connette al backplane tramite il bus. Quando viene inviato un messaggio, passa al backplane e il backplane lo invia a ogni server. Quando un server riceve un messaggio dal backplane, archivia il messaggio nella cache locale. Il server recapita quindi messaggi ai client dalla cache locale.

Per altre informazioni sul funzionamento del backplane SignalR, vedere questo articolo.

In questo esercizio si userà SQL Server per distribuire i messaggi nell'applicazione Geek Quiz. Queste attività verranno eseguite in un singolo computer di test per informazioni su come configurare la configurazione, ma per ottenere l'effetto completo, sarà necessario distribuire l'applicazione SignalR in due o più server. È anche necessario installare SQL Server in uno dei server o in un server dedicato separato.

Attività 1 - Informazioni sullo scenario

In questa attività verranno eseguite 2 istanze di Geek Quiz simulando più istanze IIS nel computer locale. In questo scenario, quando si rispondono a domande trivia su un'applicazione, l'aggiornamento non verrà notificato nella pagina statistiche della seconda istanza. Questa simulazione è simile a un ambiente in cui l'applicazione viene distribuita in più istanze e usa un servizio di bilanciamento del carico per comunicare con loro.

1. Aprire la soluzione Begin.sln situata nella cartella Source/Ex2-ScalingOutWithSQLServer/Begin . Dopo il caricamento, si noterà in Esplora server che la soluzione ha due progetti con strutture identiche ma nomi diversi. Verrà simulato l'esecuzione di due istanze della stessa applicazione nel computer locale.

   

   Iniziare la simulazione di 2 istanze di Geek Quiz

2. Aprire la pagina delle proprietà della soluzione facendo clic con il pulsante destro del mouse sul nodo della soluzione e scegliendo Proprietà. In Progetto di avvio selezionare Più progetti di avvio e modificare il valore azione per entrambi i progetti in Avvia.

   

   Avvio di più progetti

3. Premere F5 per eseguire la soluzione. L'applicazione avvierà due istanze di Geek Quiz in porte diverse, simulando più istanze della stessa applicazione. Aggiungere uno dei browser a sinistra e l'altro a destra dello schermo. Accedere con le credenziali o registrare un nuovo utente. Una volta effettuato l'accesso, mantenere la pagina Trivia a sinistra e passare alla pagina Statistiche nel browser a destra.

   

   Quiz geek side-by-side

   

   Quiz geek in porte diverse

4. Iniziare a rispondere alle domande nel browser sinistro e si noterà che la pagina Statistiche nel browser destro non viene aggiornata. Ciò è dovuto al fatto che SignalR usa una cache locale per distribuire i messaggi tra i client e questo scenario simula più istanze, pertanto la cache non viene condivisa tra di esse. È possibile verificare che SignalR funzioni testando gli stessi passaggi, ma usando una singola app. Nelle attività seguenti verrà configurato un backplane per replicare i messaggi tra istanze.

5. Indietro a Visual Studio e arrestare il debug.

Attività 2: creazione del backplane SQL Server

In questa attività verrà creato un database che fungerà da backplane per l'applicazione Geek Quiz . Si userà SQL Server Esplora oggetti per esplorare il server e inizializzare il database. Inoltre, si abiliterà Service Broker.

1. In Visual Studio aprire il menu Visualizza e selezionare SQL Server Esplora oggetti.

2. Connettersi all'istanza di LocalDB facendo clic con il pulsante destro del mouse sul nodo SQL Server e scegliendo Aggiungi SQL Server... opzione.

   

   Aggiunta di un'istanza di SQL Server a SQL Server Esplora oggetti

3. Impostare il nome del server su (localdb)\v11.0 e lasciare Autenticazione di Windows come modalità di autenticazione. Fare clic su Connetti per continuare.

   

   Connessione a LocalDB

4. Ora che si è connessi all'istanza di LocalDB, sarà necessario creare un database che rappresenterà il backplane SQL Server per SignalR. A tale scopo, fare clic con il pulsante destro del mouse sul nodo Database e scegliere Aggiungi nuovo database.

   

   Aggiunta di un nuovo database

5. Impostare il nome del database su SignalR e fare clic su OK per crearlo.

   

   Creazione del database SignalR

   Nota

   È possibile scegliere qualsiasi nome per il database.

6. Per ricevere gli aggiornamenti in modo più efficiente dal backplane, è consigliabile abilitare Service Broker per il database. Service Broker offre supporto nativo per la messaggistica e l'accodamento in SQL Server. Il backplane funziona anche senza Service Broker. Aprire una nuova query facendo clic con il pulsante destro del mouse sul database e scegliendo Nuova query.

   

   Apertura di una nuova query

7. Per verificare se Service Broker è abilitato, eseguire una query sulla colonna is_broker_enabled nella vista del catalogo sys.databases . Eseguire lo script seguente nella finestra di query aperta di recente.

   SELECT [name], [service_broker_guid], [is_broker_enabled] FROM [master].[sys].[databases]
   

   

   Esecuzione di query sullo stato di Service Broker

8. Se il valore della colonna is_broker_enabled nel database è "0", usare il comando seguente per abilitarlo. Sostituire <YOUR-DATABASE> con il nome impostato durante la creazione del database,ad esempio SignalR.

   ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
   

   

   Abilitazione di Service Broker

   Nota

   Se questa query sembra deadlock, assicurarsi che non siano presenti applicazioni connesse al database.

Attività 3: Configurazione dell'applicazione SignalR

In questa attività si configurerà Geek Quiz per connettersi al backplane SQL Server. Si aggiungerà innanzitutto il pacchetto NuGet SignalR.SqlServer e si imposterà la stringa di connessione sul database backplane.

1. Aprire la console di Gestione pacchetti da Strumenti>Gestione pacchetti NuGet. Assicurarsi che il progetto GeekQuiz sia selezionato nell'elenco a discesa Progetto predefinito . Digitare il comando seguente per installare il pacchetto NuGet Microsoft.AspNet.SignalR.SqlServer .

   Install-Package Microsoft.AspNet.SignalR.SqlServer
   

2. Ripetere il passaggio precedente, ma questa volta per il progetto GeekQuiz2.

3. Per configurare il backplane SQL Server, aprire il file Startup.cs del progetto GeekQuiz e aggiungere il codice seguente al metodo Configure. Sostituire <YOUR-DATABASE> con il nome del database usato durante la creazione del backplane SQL Server. Ripetere questo passaggio per il progetto GeekQuiz2 .

   (Frammento di codice - RealTimeSignalR - Ex2 - StartupConfiguration)

   public class Startup 
   {   
       public void Configuration(IAppBuilder app) 
       {           
           var sqlConnectionString = @"Server=(localdb)\v11.0;Database=<YOUR-DATABASE>;Integrated Security=True;";
           GlobalHost.DependencyResolver.UseSqlServer(sqlConnectionString); 
           this.ConfigureAuth(app);
           app.MapSignalR();
       }
   }
   

4. Ora che entrambi i progetti sono configurati per l'uso del backplane SQL Server, premere F5 per eseguirli contemporaneamente.

5. Anche in questo caso , Visual Studio avvierà due istanze di Geek Quiz in porte diverse. Aggiungere uno dei browser a sinistra e l'altro a destra della schermata e accedere con le credenziali. Mantenere la pagina Trivia a sinistra e passare alla pagina Statistiche nel browser destro.

6. Iniziare a rispondere alle domande nel browser a sinistra. Questa volta, la pagina Statistiche viene aggiornata grazie al backplane. Passare da un'applicazione all'altra (statistiche è ora a sinistra e Trivia è a destra) e ripetere il test per verificare che funzioni per entrambe le istanze. Il backplane funge da cache condivisa di messaggi per ogni server connesso e ogni server archivierà i messaggi nella propria cache locale per la distribuzione ai client connessi.

7. Indietro a Visual Studio e arrestare il debug.

8. Il componente backplane SQL Server genera automaticamente le tabelle necessarie nel database specificato. Nel pannello SQL Server Esplora oggetti aprire il database creato per il backplane (ad esempio SignalR) ed espanderne le tabelle. Verranno visualizzate le tabelle seguenti:

   

   Tabelle generate dal backplane

9. Fare clic con il pulsante destro del mouse sulla tabella SignalR.Messages_0 e scegliere Visualizza dati.

   

   Visualizzare la tabella backplane messages di SignalR

10. È possibile visualizzare i diversi messaggi inviati all'hub quando si rispondono alle domande semplici. Il backplane distribuisce questi messaggi a qualsiasi istanza connessa.

    

    Tabella Dei messaggi backplane

Riepilogo

In questo lab pratico si è appreso come aggiungere SignalR all'applicazione e inviare notifiche dal server ai client connessi usando Hub. Si è inoltre appreso come aumentare il numero di istanze dell'applicazione usando un componente backplane quando l'applicazione viene distribuita in più istanze di IIS.