Esercitazione: Chat in tempo reale con SignalR 2 e MVC 5

Articolo
07/13/2023

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

In questa esercitazione:

Configurare il progetto
Eseguire l'esempio
Esaminare il codice

Avviso

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

Prerequisiti

Visual Studio 2017 con il carico di lavoro Sviluppo ASP.NET e Web.

Configurare il progetto

Questa sezione illustra come usare Visual Studio 2017 e SignalR 2 per creare un'applicazione ASP.NET MVC 5 vuota, aggiungere la libreria SignalR e creare l'applicazione chat.

In Visual Studio creare un'applicazione C# ASP.NET destinata a .NET Framework 4.5, denominarla SignalRChat e fare clic su OK.
In Nuova ASP.NET applicazione Web - SignalRMvcChat selezionare MVC e quindi selezionare Modifica autenticazione.
In Modifica autenticazione selezionare Nessuna autenticazione e fare clic su OK.
In Nuova applicazione Web ASP.NET - SignalRMvcChat selezionare OK.
In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e scegliere Aggiungi>nuovo elemento.
In Aggiungi nuovo elemento - SignalRChat selezionare Installazione>di Visual C#>Web>SignalR e quindi selezionare Classe hub SignalR (v2).
Assegnare un nome alla classe ChatHub e aggiungerlo al progetto.

Questo passaggio crea il file di classe ChatHub.cs e aggiunge un set di file di script e riferimenti all'assembly che supportano SignalR al progetto.

Sostituire il codice nel nuovo file di classe ChatHub.cs con questo codice:

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);
        }
    }
}

In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e scegliere Aggiungi>classe.
Assegnare un nome alla nuova classe Startup e aggiungerlo al progetto.

Sostituire il codice nel file di classe Startup.cs con questo codice:

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

In Esplora soluzioni selezionare Controller>HomeController.cs.
Aggiungere questo metodo all'oggetto HomeController.cs.
```
public ActionResult Chat()
{
    return View();
}
```
Questo metodo restituisce la visualizzazione Chat creata in un passaggio successivo.
In Esplora soluzioni fare clic con il pulsante destro del mouse su Visualizza>home e scegliere Aggiungi>visualizzazione.
In Aggiungi visualizzazione assegnare un nome alla nuova visualizzazione Chat e selezionare Aggiungi.

Sostituire il contenuto di Chat.cshtml con questo codice:

@{
    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-2.1.0.min.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>
}

In Esplora soluzioni espandere Script.

Le librerie di script per jQuery e SignalR sono visibili nel progetto.

Importante

La gestione pacchetti potrebbe aver installato una versione successiva degli script SignalR.

Verificare che i riferimenti allo script nel blocco di codice corrispondano alle versioni dei file di script nel progetto.

Riferimenti allo script dal blocco di codice originale:

<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>

Se non corrispondono, aggiornare il file cshtml .
Nella barra dei menu selezionare Salva>tutto.

Eseguire l'esempio

Nella barra degli strumenti attivare Debug script e quindi selezionare il pulsante Play per eseguire l'esempio in modalità Debug.
Quando viene aperto il browser, immettere un nome per l'identità della chat.
Copiare l'URL dal browser, aprire due altri browser e incollare gli URL nelle barre degli indirizzi.
In ogni browser immettere un nome univoco.
Aggiungere ora un commento e selezionare Invia. Ripetere che negli altri browser. I commenti vengono visualizzati in tempo reale.

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.

Vedere come viene eseguita l'applicazione chat in tre browser diversi. Quando Tom, Anand e Susan inviano messaggi, tutti i browser vengono aggiornati in tempo reale:
In Esplora soluzioni esaminare il nodo Documenti script per l'applicazione in esecuzione. È disponibile un file di script denominato hub che la libreria SignalR genera in fase di esecuzione. Questo file gestisce la comunicazione tra lo script jQuery e il codice lato server.

Esaminare il codice

L'applicazione chat SignalR illustra due attività di sviluppo SignalR di base. Illustra come creare un hub. Il server usa tale hub come oggetto di coordinamento principale. L'hub usa la libreria jQuery SignalR per inviare e ricevere messaggi.

Hub SignalR in ChatHub.cs

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

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

Il metodo illustra diversi concetti dell'hub Send :

Dichiarare i metodi pubblici in un hub in modo che i client possano chiamarli.
Usare la Microsoft.AspNet.SignalR.Hub.Clients proprietà dinamica per comunicare con tutti i client connessi a questo hub.

Chiamare una funzione sul 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 Chat.cshtml

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

var chat = $.connection.chatHub;

Nota

In JavaScript, il riferimento alla classe server e ai relativi membri è in camelCase. L'esempio di codice fa riferimento alla classe C# ChatHub in JavaScript come chatHub.

In questo blocco di codice si crea una funzione di callback nello script.

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

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. È un modo per impedire l'inserimento di script.

Questo codice apre una connessione con l'hub.

$.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();
    });
});

Nota

Questo approccio garantisce di stabilire una connessione prima dell'esecuzione del gestore eventi.

Il codice avvia la connessione e quindi passa una funzione per gestire l'evento click nel pulsante Invia nella pagina Chat.

Ottenere il codice

Scaricare il progetto completato

Risorse aggiuntive

Per altre informazioni su SignalR, vedere le risorse seguenti:

Passaggi successivi

In questa esercitazione:

Configurare il progetto
Esecuzione dell'esempio
Esaminato il codice

Passare all'articolo successivo per informazioni su come creare un'applicazione Web che usa ASP.NET SignalR 2 per fornire funzionalità di messaggistica ad alta frequenza.

App Web con messaggistica ad alta frequenza

Share via

Esercitazione: Chat in tempo reale con SignalR 2 e MVC 5

Prerequisiti

Configurare il progetto

Eseguire l'esempio

Esaminare il codice

Hub SignalR in ChatHub.cs

SignalR e jQuery Chat.cshtml

Ottenere il codice

Risorse aggiuntive

Passaggi successivi

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive