Esercitazione: Introduzione a SignalR 1.x

Articolo
07/13/2023

Avviso

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

In questa esercitazione viene illustrato come usare SignalR per creare un'applicazione di chat in tempo reale. Si aggiungeRà SignalR a un'applicazione Web ASP.NET vuota e si creerà una pagina HTML per inviare e visualizzare messaggi.

Panoramica

Questa esercitazione presenta lo sviluppo di SignalR illustrando come creare una semplice applicazione chat basata su browser. Si aggiungerà la libreria SignalR a un'applicazione Web ASP.NET vuota, si creerà una classe hub per l'invio di messaggi ai client e si creerà una pagina HTML che consente agli utenti di inviare e ricevere messaggi di chat. Per un'esercitazione simile che illustra come creare un'applicazione chat in MVC 4 usando una visualizzazione MVC, vedere Introduzione con SignalR e MVC 4.

Nota

Questa esercitazione usa la versione (1.x) di SignalR. Per informazioni dettagliate sulle modifiche tra SignalR 1.x e 2.0, vedere Aggiornamento di Progetti SignalR 1.x.

SignalR è una libreria .NET open source per la creazione di applicazioni Web che richiedono l'interazione dell'utente live o gli aggiornamenti dei dati in tempo reale. Gli esempi includono applicazioni social, giochi multiutente, collaborazione aziendale e notizie, meteo o applicazioni di aggiornamento finanziario. Queste sono spesso chiamate applicazioni in tempo reale.

SignalR semplifica il processo di creazione di applicazioni in tempo reale. Include una libreria server ASP.NET e una libreria client JavaScript per semplificare la gestione delle connessioni client-server e il push degli aggiornamenti del contenuto ai client. È possibile aggiungere la libreria SignalR a un'applicazione ASP.NET esistente per ottenere funzionalità in tempo reale.

L'esercitazione illustra le attività di sviluppo signalR seguenti:

Aggiunta della libreria SignalR a un'applicazione Web ASP.NET.
Creazione di una classe hub per eseguire il push del contenuto ai 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 di chat in esecuzione in un browser. Ogni nuovo utente può pubblicare commenti e visualizzare i commenti aggiunti dopo che l'utente partecipa alla chat.

Istanze di Chat

Sezioni:

Configurare il progetto
Eseguire l'esempio
Esaminare il codice
Passaggi successivi

Configurare il progetto

Questa sezione illustra come creare un'applicazione Web ASP.NET vuota, aggiungere SignalR e creare l'applicazione di chat.

Prerequisiti:

Visual Studio 2010 SP1 o 2012. Se Visual Studio non è disponibile, vedere ASP.NET Download per ottenere lo strumento di sviluppo di Visual Studio 2012 Express gratuito.
Microsoft ASP.NET and Web Tools 2012.2. Per Visual Studio 2012, questo programma di installazione aggiunge nuove funzionalità ASP.NET, inclusi i modelli SignalR in Visual Studio. Per Visual Studio 2010 SP1, un programma di installazione non è disponibile, ma è possibile completare l'esercitazione installando il pacchetto NuGet SignalR come descritto nei passaggi di installazione.

La procedura seguente usa Visual Studio 2012 per creare un'applicazione Web vuota ASP.NET e aggiungere la libreria SignalR:

In Visual Studio creare un'applicazione Web vuota ASP.NET.
Aprire la console di Gestione pacchetti selezionando Strumenti | Gestione pacchetti NuGet | Console di Gestione pacchetti. Immettere il comando seguente nella finestra della console:

Install-Package Microsoft.AspNet.SignalR -Version 1.1.3

Questo comando installa la versione più recente di SignalR 1.x.
In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto, scegliere Aggiungi | Classe. Assegnare alla nuova classe il nome ChatHub.
In Esplora soluzioni espandere il nodo Script. Le librerie di script per jQuery e SignalR sono visibili nel progetto.

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 broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto, quindi scegliere Aggiungi | Nuovo elemento. Nella finestra di dialogo Aggiungi nuovo elemento selezionare Classe applicazione globale e fare clic su Aggiungi.
Aggiungere le istruzioni seguenti using dopo le istruzioni fornite using nella classe Global.asax.cs.
```
using System.Web.Routing;
using Microsoft.AspNet.SignalR;
```
Aggiungere la riga di codice seguente nel Application_Start metodo della classe Global per registrare la route predefinita per gli hub SignalR.
```
// Register the default hubs route: ~/signalr/hubs
RouteTable.Routes.MapHubs();
```
In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto, quindi scegliere Aggiungi | Nuovo elemento. Nella finestra di dialogo Aggiungi nuovo elemento selezionare Pagina HTML e fare clic su Aggiungi.
In Esplora soluzioni fare clic con il pulsante destro del mouse sulla pagina HTML appena creata e scegliere Imposta come pagina iniziale.

Sostituire il codice predefinito nella pagina HTML con il codice seguente.

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <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>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="/Scripts/jquery-1.6.4.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="/Scripts/jquery.signalR-1.1.4.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="/signalr/hubs"></script>
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub. 
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message. 
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</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();
                });
            });
        });
    </script>
</body>
</html>

Salva tutto per il progetto.

Eseguire l'esempio

Premere F5 per eseguire il progetto in modalità di debug. La pagina HTML viene caricata in un'istanza del browser e richiede un nome utente.
Immettere un nome utente.
Copiare l'URL dalla riga dell'indirizzo del browser e usarlo per aprire altre due istanze del browser. In ogni istanza del browser immettere un nome utente univoco.
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 di chat non gestisce il contesto di discussione nel server. L'hub trasmette i commenti a tutti gli utenti correnti. Gli utenti che accedono alla chat in un secondo momento vedranno i messaggi aggiunti dal momento in cui accedono.

La schermata seguente mostra l'applicazione chat in esecuzione in tre istanze del browser, tutte aggiornate quando un'istanza invia un messaggio:
In Esplora soluzioni esaminare il nodo Documenti script per l'applicazione in esecuzione. È 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.

Esaminare il codice

L'applicazione di chat SignalR illustra due attività di sviluppo 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 compilare un'applicazione SignalR. È possibile creare metodi pubblici nella classe hub e quindi accedervi chiamandoli da script jQuery in una pagina Web.

Nel codice di 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 Clients.All.broadcastMessage.

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à dinamica Microsoft.AspNet.SignalR.Hub.Clients per accedere a tutti i client connessi a questo hub.

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

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

SignalR e jQuery

La pagina HTML nell'esempio di codice illustra come usare la libreria jQuery SignalR per comunicare con un hub SignalR. Le attività essenziali nel codice dichiarano un proxy per fare riferimento all'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.

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. Le due righe che codificano il contenuto HTML prima di visualizzarla sono facoltative e mostrano un modo semplice per impedire l'inserimento di script.

chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message. 
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page. 
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</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 HTML.

Nota

Questo approccio assicura 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.

È possibile rendere disponibile l'applicazione di esempio in questa esercitazione o in altre applicazioni SignalR tramite Internet distribuendole a un provider di hosting. Microsoft offre l'hosting Web gratuito per un massimo di 10 siti Web in un account di valutazione di Windows Azure gratuito. Per una procedura dettagliata su come distribuire l'applicazione SignalR di esempio, vedere Pubblicare l'esempio di SignalR Introduzione come sito Web di Windows Azure. Per informazioni dettagliate su come distribuire un progetto Web di Visual Studio in un sito Web di Windows Azure, vedere Distribuzione di un'applicazione ASP.NET in un sito Web di Windows Azure. Nota: il trasporto WebSocket non è attualmente supportato per Siti Web di Windows Azure. Quando il trasporto WebSocket non è disponibile, SignalR usa gli altri trasporti disponibili come descritto nella sezione Trasporti dell'argomento Introduzione a SignalR.

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

Share via

Esercitazione: Introduzione a SignalR 1.x

Panoramica

Configurare il progetto

Eseguire l'esempio

Esaminare il codice

Hub SignalR

SignalR e jQuery

Passaggi successivi

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive