Esercitazione: Introduzione a ASP.NET Core SignalRTutorial: Get started with ASP.NET Core SignalR

Questa esercitazione illustra le nozioni di base per la creazione di un'app in tempo reale con SignalR.This tutorial teaches the basics of building a real-time app using SignalR. Vengono illustrate le seguenti procedure:You learn how to:

  • Creare un progetto Web.Create a web project.
  • Aggiungere la libreria client di SignalR.Add the SignalR client library.
  • Creare un hub SignalR.Create a SignalR hub.
  • Configurare il progetto per l'utilizzo di SignalR.Configure the project to use SignalR.
  • Aggiungere codice che invia messaggi da qualsiasi client a tutti i client connessi.Add code that sends messages from any client to all connected clients.

Al termine, si disporrà di un'app di chat funzionante:At the end, you'll have a working chat app:

[! OP. App di esempio NO-LOC (SignalR)]

PrerequisitesPrerequisites

Creare un progetto di app WebCreate a web app project

  • Nel menu selezionare File > Nuovo progetto.From the menu, select File > New Project.

  • Nella finestra di dialogo Crea un nuovo progetto selezionare Applicazione Web ASP.NET Core, quindi selezionare Avanti.In the Create a new project dialog, select ASP.NET Core Web Application, and then select Next.

  • Nella finestra di dialogo Configura il nuovo progetto, denominare il progetto SignalRChat, quindi selezionare Crea.In the Configure your new project dialog, name the project SignalRChat, and then select Create.

  • Nella finestra di dialogo Crea una nuova applicazione web ASP.NET Core selezionare .net Core e ASP.NET Core 3,0.In the Create a new ASP.NET Core web Application dialog, select .NET Core and ASP.NET Core 3.0.

  • Selezionare Applicazione Web per creare un progetto che usa Razor Pages, quindi selezionare Crea.Select Web Application to create a project that uses Razor Pages, and then select Create.

    Finestra di dialogo Nuovo progetto di Visual Studio

Aggiungere la libreria client di SignalRAdd the SignalR client library

La libreria del server SignalR è inclusa nel Framework condiviso ASP.NET Core 3,0.The SignalR server library is included in the ASP.NET Core 3.0 shared framework. La libreria client JavaScript non viene inclusa automaticamente nel progetto.The JavaScript client library isn't automatically included in the project. Per questa esercitazione, usare Gestione librerie (LibMan) per ottenere la libreria client da unpkg.For this tutorial, you use Library Manager (LibMan) to get the client library from unpkg. Unpkg è una rete per la distribuzione di contenuti (CDN, Content Delivery Network) che può offrire qualsiasi contenuto disponibile in npm, la gestione pacchetti di Node.js.unpkg is a content delivery network (CDN)) that can deliver anything found in npm, the Node.js package manager.

  • In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e selezionare Aggiungi > Libreria lato client.In Solution Explorer, right-click the project, and select Add > Client-Side Library.

  • Nella finestra di dialogo Add Client-Side Library (Aggiungi libreria lato client) selezionare unpkg in Provider.In the Add Client-Side Library dialog, for Provider select unpkg.

  • Per la Library, immettere @microsoft/signalr@latest.For Library, enter @microsoft/signalr@latest.

  • Selezionare Choose specific files (Scegli file specifici), espandere la cartella dist/browser e selezionare signalr.js e signalr.min.js.Select Choose specific files, expand the dist/browser folder, and select signalr.js and signalr.min.js.

  • Impostare percorso di destinazione su wwwroot/JS/SignalR/ e selezionare Installa.Set Target Location to wwwroot/js/signalr/, and select Install.

    Finestra di dialogo Add Client-Side Library (Aggiungi libreria lato client) - selezione della libreria

    LibMan crea una cartella wwwroot/JS/SignalR e ne copia i file selezionati.LibMan creates a wwwroot/js/signalr folder and copies the selected files to it.

Creare un hub SignalRCreate a SignalR hub

Un hub è una classe usata come pipeline di alto livello che gestisce le comunicazioni client-server.A hub is a class that serves as a high-level pipeline that handles client-server communication.

  • Nella cartella del progetto SignalRChat creare una cartella Hubs.In the SignalRChat project folder, create a Hubs folder.

  • Nella cartella Hubs creare un file ChatHub.cs contenente il codice seguente:In the Hubs folder, create a ChatHub.cs file with the following code:

    using Microsoft.AspNetCore.SignalR;
    using System.Threading.Tasks;
    
    namespace SignalRChat.Hubs
    {
        public class ChatHub : Hub
        {
            public async Task SendMessage(string user, string message)
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
        }
    }
    

    La classe ChatHub eredita dalla classe di Hub SignalR.The ChatHub class inherits from the SignalR Hub class. La classe Hub gestisce connessioni, gruppi e messaggistica.The Hub class manages connections, groups, and messaging.

    Il metodo SendMessage può essere chiamato da un client connesso per inviare un messaggio a tutti i client.The SendMessage method can be called by a connected client to send a message to all clients. Il codice client JavaScript che chiama il metodo è illustrato più avanti nell'esercitazione.JavaScript client code that calls the method is shown later in the tutorial. SignalR codice è asincrono per garantire la massima scalabilità. code is asynchronous to provide maximum scalability.

Configurare SignalRConfigure SignalR

Il server di SignalR deve essere configurato in modo da passare SignalR richieste al SignalR.The SignalR server must be configured to pass SignalR requests to SignalR.

  • Aggiungere il codice evidenziato seguente al file Startup.cs.Add the following highlighted code to the Startup.cs file.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.HttpsPolicy;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.Hosting;
    using SignalRChat.Hubs;
    
    namespace SignalRChat
    {
        public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddRazorPages();
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
    
                app.UseRouting();
    
                app.UseAuthorization();
    
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapRazorPages();
                    endpoints.MapHub<ChatHub>("/chatHub");
                });
            }
        }
    }
    

    Queste modifiche aggiungono SignalR ai sistemi di routing e inserimento delle dipendenze di ASP.NET Core.These changes add SignalR to the ASP.NET Core dependency injection and routing systems.

Aggiungere SignalR codice clientAdd SignalR client code

  • Sostituire il codice in Pages\Index.cshtml con il codice seguente:Replace the content in Pages\Index.cshtml with the following code:

    @page
        <div class="container">
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-2">User</div>
                <div class="col-4"><input type="text" id="userInput" /></div>
            </div>
            <div class="row">
                <div class="col-2">Message</div>
                <div class="col-4"><input type="text" id="messageInput" /></div>
            </div>
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-6">
                    <input type="button" id="sendButton" value="Send Message" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    <script src="~/js/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    Il codice precedente:The preceding code:

    • Crea le caselle di testo per il nome e il messaggio di testo, nonché un pulsante di invio.Creates text boxes for name and message text, and a submit button.
    • Crea un elenco con id="messagesList" per la visualizzazione dei messaggi ricevuti dall'hub SignalR.Creates a list with id="messagesList" for displaying messages that are received from the SignalR hub.
    • Include i riferimenti agli script per SignalR e il codice dell'applicazione chat. js creato nel passaggio successivo.Includes script references to SignalR and the chat.js application code that you create in the next step.
  • Nella cartella wwwroot/js creare un file chat.js con il codice seguente:In the wwwroot/js folder, create a chat.js file with the following code:

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });
    
    connection.start().then(function () {
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    Il codice precedente:The preceding code:

    • Crea e avvia una connessione.Creates and starts a connection.
    • Aggiunge al pulsante di invio un gestore che invia messaggi all'hub.Adds to the submit button a handler that sends messages to the hub.
    • Aggiunge all'oggetto connessione un gestore che riceve i messaggi dall'hub e li aggiunge all'elenco.Adds to the connection object a handler that receives messages from the hub and adds them to the list.

Eseguire l'appRun the app

  • Premere CTRL+F5 per eseguire l'app senza debug.Press CTRL+F5 to run the app without debugging.
  • Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  • Scegliere un browser, immettere un nome e un messaggio e fare clic sul pulsante Invia messaggio.Choose either browser, enter a name and message, and select the Send Message button.

    Nome e messaggio vengono visualizzati immediatamente in entrambe le pagine.The name and message are displayed on both pages instantly.

    [! OP. App di esempio NO-LOC (SignalR)]

Suggerimento

  • Se l'app non funziona, aprire gli strumenti di sviluppo (F12) del browser e passare alla console.If the app doesn't work, open your browser developer tools (F12) and go to the console. È possibile che vengano visualizzati errori correlati al codice HTML e JavaScript.You might see errors related to your HTML and JavaScript code. Ad esempio, si supponga di aver inserito signalr.js in una cartella diversa da quella indicata nelle istruzioni.For example, suppose you put signalr.js in a different folder than directed. In questo caso il riferimento a tale file non funzionerà e verrà visualizzato un errore 404 nella console.In that case the reference to that file won't work and you'll see a 404 error in the console. Errore di signalr.js non trovatosignalr.js not found error

  • Se si riceve l'errore ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY in Chrome, eseguire questi comandi per aggiornare il certificato di sviluppo:If you get the error ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY in Chrome, run these commands to update your development certificate:

    dotnet dev-certs https --clean
    dotnet dev-certs https --trust
    

Questa esercitazione illustra le nozioni di base per la creazione di un'app in tempo reale con SignalR.This tutorial teaches the basics of building a real-time app using SignalR. Vengono illustrate le seguenti procedure:You learn how to:

  • Creare un progetto Web.Create a web project.
  • Aggiungere la libreria client di SignalR.Add the SignalR client library.
  • Creare un hub SignalR.Create a SignalR hub.
  • Configurare il progetto per l'utilizzo di SignalR.Configure the project to use SignalR.
  • Aggiungere codice che invia messaggi da qualsiasi client a tutti i client connessi.Add code that sends messages from any client to all connected clients.
    Alla fine, sarà presente un'app di chat funzionante: [! OP. NO-LOC (SignalR)] app di esempioAt the end, you'll have a working chat app: SignalR sample app

PrerequisitesPrerequisites

Avviso

Se si usa Visual Studio 2017, vedere dotnet/sdk issue #3124 per informazioni sulle versioni di .NET Core SDK che non funzionano con Visual Studio.If you use Visual Studio 2017, see dotnet/sdk issue #3124 for information about .NET Core SDK versions that don't work with Visual Studio.

Creare un progetto WebCreate a web project

  • Nel menu selezionare File > Nuovo progetto.From the menu, select File > New Project.

  • Nella finestra di dialogo Nuovo progetto selezionare Installate > Visual C# > Web > Applicazione Web ASP.NET Core.In the New Project dialog, select Installed > Visual C# > Web > ASP.NET Core Web Application. Denominare il progetto SignalRChat.Name the project SignalRChat.

    Finestra di dialogo Nuovo progetto di Visual Studio

  • Selezionare Applicazione Web per creare un progetto che usa Razor Pages.Select Web Application to create a project that uses Razor Pages.

  • Selezionare un framework di destinazione di .NET Core, selezionare ASP.NET Core 2.2 e fare clic su OK.Select a target framework of .NET Core, select ASP.NET Core 2.2, and click OK.

    Finestra di dialogo Nuovo progetto di Visual Studio

Aggiungere la libreria client di SignalRAdd the SignalR client library

La libreria del server SignalR è inclusa nel metapacchetto di Microsoft.AspNetCore.App.The SignalR server library is included in the Microsoft.AspNetCore.App metapackage. La libreria client JavaScript non viene inclusa automaticamente nel progetto.The JavaScript client library isn't automatically included in the project. Per questa esercitazione, usare Gestione librerie (LibMan) per ottenere la libreria client da unpkg.For this tutorial, you use Library Manager (LibMan) to get the client library from unpkg. Unpkg è una rete per la distribuzione di contenuti (CDN, Content Delivery Network) che può offrire qualsiasi contenuto disponibile in npm, la gestione pacchetti di Node.js.unpkg is a content delivery network (CDN)) that can deliver anything found in npm, the Node.js package manager.

  • In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e selezionare Aggiungi > Libreria lato client.In Solution Explorer, right-click the project, and select Add > Client-Side Library.

  • Nella finestra di dialogo Add Client-Side Library (Aggiungi libreria lato client) selezionare unpkg in Provider.In the Add Client-Side Library dialog, for Provider select unpkg.

  • In Libreria immettere @aspnet/signalr@1 e selezionare la versione più recente che non sia di anteprima.For Library, enter @aspnet/signalr@1, and select the latest version that isn't preview.

    Finestra di dialogo Add Client-Side Library (Aggiungi libreria lato client) - selezione della libreria

  • Selezionare Choose specific files (Scegli file specifici), espandere la cartella dist/browser e selezionare signalr.js e signalr.min.js.Select Choose specific files, expand the dist/browser folder, and select signalr.js and signalr.min.js.

  • Impostare Percorso di destinazione su wwwroot/lib/signalr/ e selezionare Installa.Set Target Location to wwwroot/lib/signalr/, and select Install.

    Finestra di dialogo Add Client-Side Library (Aggiungi libreria lato client) - selezione di file e destinazione

    LibMan crea una cartella wwwroot/lib/signalr e copia i file selezionati in tale cartella.LibMan creates a wwwroot/lib/signalr folder and copies the selected files to it.

Creare un hub SignalRCreate a SignalR hub

Un hub è una classe usata come pipeline di alto livello che gestisce le comunicazioni client-server.A hub is a class that serves as a high-level pipeline that handles client-server communication.

  • Nella cartella del progetto SignalRChat creare una cartella Hubs.In the SignalRChat project folder, create a Hubs folder.

  • Nella cartella Hubs creare un file ChatHub.cs contenente il codice seguente:In the Hubs folder, create a ChatHub.cs file with the following code:

    using Microsoft.AspNetCore.SignalR;
    using System.Threading.Tasks;
    
    namespace SignalRChat.Hubs
    {
        public class ChatHub : Hub
        {
            public async Task SendMessage(string user, string message)
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
        }
    }
    

    La classe ChatHub eredita dalla classe di Hub SignalR.The ChatHub class inherits from the SignalR Hub class. La classe Hub gestisce connessioni, gruppi e messaggistica.The Hub class manages connections, groups, and messaging.

    Il metodo SendMessage può essere chiamato da un client connesso per inviare un messaggio a tutti i client.The SendMessage method can be called by a connected client to send a message to all clients. Il codice client JavaScript che chiama il metodo è illustrato più avanti nell'esercitazione.JavaScript client code that calls the method is shown later in the tutorial. SignalR codice è asincrono per garantire la massima scalabilità. code is asynchronous to provide maximum scalability.

Configurare SignalRConfigure SignalR

Il server di SignalR deve essere configurato in modo da passare SignalR richieste al SignalR.The SignalR server must be configured to pass SignalR requests to SignalR.

  • Aggiungere il codice evidenziato seguente al file Startup.cs.Add the following highlighted code to the Startup.cs file.

    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using SignalRChat.Hubs;
    
    namespace SignalRChat
    {
        public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.Configure<CookiePolicyOptions>(options =>
                {
                    // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                    options.CheckConsentNeeded = context => true;
                    options.MinimumSameSitePolicy = SameSiteMode.None;
                });
    
    
                services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
                app.UseCookiePolicy();
                app.UseSignalR(routes =>
                {
                    routes.MapHub<ChatHub>("/chatHub");
                });
                app.UseMvc();
            }
        }
    }
    

    Queste modifiche aggiungono SignalR al sistema di inserimento delle dipendenze ASP.NET Core e alla pipeline middleware.These changes add SignalR to the ASP.NET Core dependency injection system and the middleware pipeline.

Aggiungere SignalR codice clientAdd SignalR client code

  • Sostituire il codice in Pages\Index.cshtml con il codice seguente:Replace the content in Pages\Index.cshtml with the following code:

    @page
    <div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">&nbsp;</div>
            <div class="col-6">
                User..........<input type="text" id="userInput" />
                <br />
                Message...<input type="text" id="messageInput" />
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">&nbsp;</div>
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    </div>
    <script src="~/lib/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    Il codice precedente:The preceding code:

    • Crea le caselle di testo per il nome e il messaggio di testo, nonché un pulsante di invio.Creates text boxes for name and message text, and a submit button.
    • Crea un elenco con id="messagesList" per la visualizzazione dei messaggi ricevuti dall'hub SignalR.Creates a list with id="messagesList" for displaying messages that are received from the SignalR hub.
    • Include i riferimenti agli script per SignalR e il codice dell'applicazione chat. js creato nel passaggio successivo.Includes script references to SignalR and the chat.js application code that you create in the next step.
  • Nella cartella wwwroot/js creare un file chat.js con il codice seguente:In the wwwroot/js folder, create a chat.js file with the following code:

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });
    
    connection.start().then(function(){
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    Il codice precedente:The preceding code:

    • Crea e avvia una connessione.Creates and starts a connection.
    • Aggiunge al pulsante di invio un gestore che invia messaggi all'hub.Adds to the submit button a handler that sends messages to the hub.
    • Aggiunge all'oggetto connessione un gestore che riceve i messaggi dall'hub e li aggiunge all'elenco.Adds to the connection object a handler that receives messages from the hub and adds them to the list.

Eseguire l'appRun the app

  • Premere CTRL+F5 per eseguire l'app senza debug.Press CTRL+F5 to run the app without debugging.
  • Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  • Scegliere un browser, immettere un nome e un messaggio e fare clic sul pulsante Invia messaggio.Choose either browser, enter a name and message, and select the Send Message button.

    Nome e messaggio vengono visualizzati immediatamente in entrambe le pagine.The name and message are displayed on both pages instantly.

    [! OP. App di esempio NO-LOC (SignalR)]

Suggerimento

Se l'app non funziona, aprire gli strumenti di sviluppo (F12) del browser e passare alla console.If the app doesn't work, open your browser developer tools (F12) and go to the console. È possibile che vengano visualizzati errori correlati al codice HTML e JavaScript.You might see errors related to your HTML and JavaScript code. Ad esempio, si supponga di aver inserito signalr.js in una cartella diversa da quella indicata nelle istruzioni.For example, suppose you put signalr.js in a different folder than directed. In questo caso il riferimento a tale file non funzionerà e verrà visualizzato un errore 404 nella console.In that case the reference to that file won't work and you'll see a 404 error in the console.
Errore di signalr.js non trovatosignalr.js not found error

Risorse aggiuntiveAdditional resources