Usare ASP.NET Core SignalR conBlazor

Questa esercitazione illustra le nozioni di base sulla creazione di un'app in tempo reale usando SignalR con Blazor . Si apprenderà come:

  • Creare un Blazor progetto
  • Aggiungere la SignalR libreria client
  • Aggiungere un SignalR hub
  • Aggiungere SignalR servizi e un endpoint per l'hub SignalR
  • Aggiungere Razor il codice del componente per la chat

Al termine di questa esercitazione sarà presente un'app di chat funzionante.

Visualizzare o scaricare il codice di esempio ( comescaricare)

Prerequisiti

Creare Blazor WebAssembly un'app ospitata

Seguire le indicazioni per la scelta degli strumenti:

Nota

Visual Studio 16.10 o versione successiva e .NET Core SDK 5.0.0 o versione successiva.

  1. Creare un nuovo progetto.

  2. Scegliere il Blazor WebAssembly modello App. Selezionare Avanti.

  3. Digitare BlazorWebAssemblySignalRApp il nome Project campo. Verificare che la voce Posizione sia corretta o specificare un percorso per il progetto. Selezionare Avanti.

  4. Nella finestra di dialogo Informazioni aggiuntive selezionare la casella ASP.NET Core hosted.

  5. Selezionare Crea.

Aggiungere la SignalR libreria client

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e BlazorWebAssemblySignalRApp.Client scegliere Gestisci NuGet pacchetti.

  2. Nella finestra di dialogo Gestisci NuGet pacchetti verificare che l'origine del pacchetto sia impostata su nuget.org .

  3. Con l'opzione Sfoglia selezionata, Microsoft.AspNetCore.SignalR.Client digitare nella casella di ricerca.

  4. Nei risultati della ricerca selezionare il Microsoft.AspNetCore.SignalR.Client pacchetto. Impostare la versione in modo che corrisponda al framework condiviso dell'app. Selezionare Installa.

  5. Se viene visualizzata la finestra di dialogo Anteprima modifiche, selezionare OK.

  6. Se viene visualizzata la finestra di dialogo Accettazione licenza, selezionare Accetto se si accettano le condizioni di licenza.

Aggiungere un SignalR hub

Nel progetto BlazorWebAssemblySignalRApp.Server creare una Hubs cartella (plurale) e aggiungere la classe ChatHub seguente ( Hubs/ChatHub.cs ):

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorWebAssemblySignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Aggiungere servizi e un endpoint per SignalR l'hub

  1. Nel progetto BlazorWebAssemblySignalRApp.Server aprire il file Startup.cs.

  2. Aggiungere lo spazio dei nomi ChatHub per la classe all'inizio del file:

    using BlazorWebAssemblySignalRApp.Server.Hubs;
    
  3. Aggiungere SignalR e rispondere ai servizi middleware di compressione a Startup.ConfigureServices :

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
        services.AddControllersWithViews();
        services.AddRazorPages();
        services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });
    }
    
  4. In Startup.Configure:

    • Usare il middleware di compressione delle risposte nella parte superiore della configurazione della pipeline di elaborazione.
    • Tra gli endpoint per i controller e il fallback sul lato client, aggiungere un endpoint per l'hub.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseResponseCompression();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebAssemblyDebugging();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }
    
        app.UseHttpsRedirection();
        app.UseBlazorFrameworkFiles();
        app.UseStaticFiles();
    
        app.UseRouting();
    
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
            endpoints.MapControllers();
            endpoints.MapHub<ChatHub>("/chathub");
            endpoints.MapFallbackToFile("index.html");
        });
    }
    

Aggiungere Razor il codice del componente per la chat

  1. Nel progetto BlazorWebAssemblySignalRApp.Client aprire il file Pages/Index.razor.

  2. Sostituire il markup con il codice seguente:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <div class="form-group">
        <label>
            User:
            <input @bind="userInput" />
        </label>
    </div>
    <div class="form-group">
        <label>
            Message:
            <input @bind="messageInput" size="50" />
        </label>
    </div>
    <button @onclick="Send" disabled="@(!IsConnected)">Send</button>
    
    <hr>
    
    <ul id="messagesList">
        @foreach (var message in messages)
        {
            <li>@message</li>
        }
    </ul>
    
    @code {
        private HubConnection hubConnection;
        private List<string> messages = new List<string>();
        private string userInput;
        private string messageInput;
    
        protected override async Task OnInitializedAsync()
        {
            hubConnection = new HubConnectionBuilder()
                .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
                .Build();
    
            hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
            {
                var encodedMsg = $"{user}: {message}";
                messages.Add(encodedMsg);
                StateHasChanged();
            });
    
            await hubConnection.StartAsync();
        }
    
        async Task Send() =>
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected =>
            hubConnection.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            if (hubConnection is not null)
            {
                await hubConnection.DisposeAsync();
            }
        }
    }
    

Eseguire l'app

Seguire le indicazioni per gli strumenti:

  1. In Esplora soluzioni selezionare il BlazorWebAssemblySignalRApp.Server progetto. Premere F5 per eseguire l'app con debug o CTRL + F5 per eseguire l'app senza eseguire il debug.

  2. Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.

  3. Scegliere uno dei browser, immettere un nome e un messaggio e selezionare il pulsante per inviare il messaggio. Il nome e il messaggio vengono visualizzati immediatamente in entrambe le pagine:

    SignalR Blazor app di esempio aperta in due finestre del browser che mostra i messaggi s scambiati.

    Quotes: Star Vi: The Undiscovered Country © 1991 Undiscovered Country 1991 Country

Creare Blazor Server un'app

Seguire le indicazioni per la scelta degli strumenti:

Nota

Visual Studio 16.10 o versione successiva e .NET Core SDK 5.0.0 o versione successiva.

  1. Creare un nuovo progetto.

  2. Selezionare il Blazor Server modello App. Selezionare Avanti.

  3. Digitare BlazorServerSignalRApp il nome Project campo. Verificare che la voce Percorso sia corretta o specificare un percorso per il progetto. Selezionare Avanti.

  4. Selezionare Crea.

Aggiungere la SignalR libreria client

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e BlazorServerSignalRApp scegliere Gestisci NuGet pacchetti.

  2. Nella finestra di dialogo NuGet pacchetti di distribuzione verificare che l'opzione Origine pacchetto sia impostata su nuget.org .

  3. Con l'opzione Sfoglia selezionata, Microsoft.AspNetCore.SignalR.Client digitare nella casella di ricerca.

  4. Nei risultati della ricerca selezionare il Microsoft.AspNetCore.SignalR.Client pacchetto. Impostare la versione in modo che corrisponda al framework condiviso dell'app. Selezionare Installa.

  5. Se viene visualizzata la finestra di dialogo Anteprima modifiche, selezionare OK.

  6. Se viene visualizzata la finestra di dialogo Accettazione della licenza, selezionare Accetto se si accettano le condizioni di licenza.

Aggiungere un SignalR hub

Creare una Hubs cartella (plurale) e aggiungere la classe ChatHub seguente ( Hubs/ChatHub.cs ):

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorServerSignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Aggiungere servizi e un endpoint per SignalR l'hub

  1. Aprire il file Startup.cs .

  2. Aggiungere gli spazi dei Microsoft.AspNetCore.ResponseCompression nomi per e la classe ChatHub all'inizio del file:

    using Microsoft.AspNetCore.ResponseCompression;
    using BlazorServerSignalRApp.Server.Hubs;
    
  3. Aggiungere i servizi del middleware di compressione delle risposte a Startup.ConfigureServices :

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSingleton<WeatherForecastService>();
        services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });
    }
    
  4. In Startup.Configure:

    • Usare il middleware di compressione delle risposte nella parte superiore della configurazione della pipeline di elaborazione.
    • Tra gli endpoint per il mapping Blazor dell'hub e il fallback lato client, aggiungere un endpoint per l'hub.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseResponseCompression();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }
    
        app.UseHttpsRedirection();
        app.UseStaticFiles();
    
        app.UseRouting();
    
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapHub<ChatHub>("/chathub");
            endpoints.MapFallbackToPage("/_Host");
        });
    }
    

Aggiungere il Razor codice del componente per la chat

  1. Aprire il file Pages/Index.razor .

  2. Sostituire il markup con il codice seguente:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <div class="form-group">
        <label>
            User:
            <input @bind="userInput" />
        </label>
    </div>
    <div class="form-group">
        <label>
            Message:
            <input @bind="messageInput" size="50" />
        </label>
    </div>
    <button @onclick="Send" disabled="@(!IsConnected)">Send</button>
    
    <hr>
    
    <ul id="messagesList">
        @foreach (var message in messages)
        {
            <li>@message</li>
        }
    </ul>
    
    @code {
        private HubConnection hubConnection;
        private List<string> messages = new List<string>();
        private string userInput;
        private string messageInput;
    
        protected override async Task OnInitializedAsync()
        {
            hubConnection = new HubConnectionBuilder()
                .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
                .Build();
    
            hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
            {
                var encodedMsg = $"{user}: {message}";
                messages.Add(encodedMsg);
                StateHasChanged();
            });
    
            await hubConnection.StartAsync();
        }
    
        async Task Send() =>
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected =>
            hubConnection.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            if (hubConnection is not null)
            {
                await hubConnection.DisposeAsync();
            }
        }
    }
    

Eseguire l'app

Seguire le indicazioni per gli strumenti:

  1. Premere F5 per eseguire l'app con debug o CTRL + F5 per eseguire l'app senza eseguire il debug.

  2. Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.

  3. Scegliere uno dei browser, immettere un nome e un messaggio e selezionare il pulsante per inviare il messaggio. Il nome e il messaggio vengono visualizzati immediatamente in entrambe le pagine:

    SignalR Blazor app di esempio aperta in due finestre del browser che mostra i messaggi s scambiati.

    Citazioni: Star Trek VI: The Undiscovered Country © 1991 Paramount

Passaggi successivi

In questa esercitazione sono state illustrate le procedure per:

  • Creare un Blazor progetto
  • Aggiungere la SignalR libreria client
  • Aggiungere un SignalR hub
  • Aggiungere SignalR servizi e un endpoint per l'hub SignalR
  • Aggiungere Razor il codice del componente per la chat

Per altre informazioni sulla creazione Blazor di app, vedere la Blazor documentazione:

Risorse aggiuntive

Questa esercitazione illustra le nozioni di base sulla creazione di un'app in tempo reale usando SignalR con Blazor . Si apprenderà come:

  • Creare un Blazor progetto
  • Aggiungere la SignalR libreria client
  • Aggiungere un SignalR hub
  • Aggiungere SignalR servizi e un endpoint per l'hub SignalR
  • Aggiungere Razor il codice del componente per la chat

Al termine di questa esercitazione sarà presente un'app di chat funzionante.

Visualizzare o scaricare il codice di esempio ( comescaricare)

Prerequisiti

Creare Blazor WebAssembly un'app ospitata

Seguire le indicazioni per la scelta degli strumenti:

Nota

Visual Studio 16.10 o versione successiva e .NET Core SDK 5.0.0 o versione successiva.

  1. Creare un nuovo progetto.

  2. Scegliere il Blazor WebAssembly modello App. Selezionare Avanti.

  3. Digitare BlazorWebAssemblySignalRApp il nome Project campo. Verificare che la voce Posizione sia corretta o specificare un percorso per il progetto. Selezionare Avanti.

  4. Nella finestra di dialogo Informazioni aggiuntive selezionare la ASP.NET Core casella di controllo ospitata.

  5. Selezionare Crea.

Aggiungere la SignalR libreria client

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e BlazorWebAssemblySignalRApp.Client scegliere Gestisci NuGet pacchetti.

  2. Nella finestra di dialogo Gestisci NuGet pacchetti verificare che l'origine del pacchetto sia impostata su nuget.org .

  3. Con l'opzione Sfoglia selezionata, Microsoft.AspNetCore.SignalR.Client digitare nella casella di ricerca.

  4. Nei risultati della ricerca selezionare il Microsoft.AspNetCore.SignalR.Client pacchetto. Impostare la versione in modo che corrisponda al framework condiviso dell'app. Selezionare Installa.

  5. Se viene visualizzata la finestra di dialogo Anteprima modifiche, selezionare OK.

  6. Se viene visualizzata la finestra di dialogo Accettazione licenza, selezionare Accetto se si accettano le condizioni di licenza.

Aggiungere un SignalR hub

Nel progetto BlazorWebAssemblySignalRApp.Server creare una Hubs cartella (plurale) e aggiungere la classe ChatHub seguente ( Hubs/ChatHub.cs ):

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorWebAssemblySignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Aggiungere servizi e un endpoint per SignalR l'hub

  1. Nel progetto BlazorWebAssemblySignalRApp.Server aprire il file Startup.cs.

  2. Aggiungere lo spazio dei nomi ChatHub per la classe all'inizio del file:

    using BlazorWebAssemblySignalRApp.Server.Hubs;
    
  3. Aggiungere SignalR e rispondere ai servizi middleware di compressione a Startup.ConfigureServices :

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
        services.AddControllersWithViews();
        services.AddRazorPages();
        services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });
    }
    
  4. In Startup.Configure:

    • Usare il middleware di compressione delle risposte nella parte superiore della configurazione della pipeline di elaborazione.
    • Tra gli endpoint per i controller e il fallback sul lato client, aggiungere un endpoint per l'hub.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseResponseCompression();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebAssemblyDebugging();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }
    
        app.UseHttpsRedirection();
        app.UseBlazorFrameworkFiles();
        app.UseStaticFiles();
    
        app.UseRouting();
    
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
            endpoints.MapControllers();
            endpoints.MapHub<ChatHub>("/chathub");
            endpoints.MapFallbackToFile("index.html");
        });
    }
    

Aggiungere Razor il codice del componente per la chat

  1. Nel progetto BlazorWebAssemblySignalRApp.Client aprire il file Pages/Index.razor.

  2. Sostituire il markup con il codice seguente:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <div class="form-group">
        <label>
            User:
            <input @bind="userInput" />
        </label>
    </div>
    <div class="form-group">
        <label>
            Message:
            <input @bind="messageInput" size="50" />
        </label>
    </div>
    <button @onclick="Send" disabled="@(!IsConnected)">Send</button>
    
    <hr>
    
    <ul id="messagesList">
        @foreach (var message in messages)
        {
            <li>@message</li>
        }
    </ul>
    
    @code {
        private HubConnection hubConnection;
        private List<string> messages = new List<string>();
        private string userInput;
        private string messageInput;
    
        protected override async Task OnInitializedAsync()
        {
            hubConnection = new HubConnectionBuilder()
                .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
                .Build();
    
            hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
            {
                var encodedMsg = $"{user}: {message}";
                messages.Add(encodedMsg);
                StateHasChanged();
            });
    
            await hubConnection.StartAsync();
        }
    
        async Task Send() =>
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected =>
            hubConnection.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            if (hubConnection is not null)
            {
                await hubConnection.DisposeAsync();
            }
        }
    }
    

Eseguire l'app

Seguire le indicazioni per gli strumenti:

  1. In Esplora soluzioni selezionare il BlazorWebAssemblySignalRApp.Server progetto. Premere F5 per eseguire l'app con debug o CTRL + F5 per eseguire l'app senza eseguire il debug.

  2. Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.

  3. Scegliere uno dei browser, immettere un nome e un messaggio e selezionare il pulsante per inviare il messaggio. Il nome e il messaggio vengono visualizzati immediatamente in entrambe le pagine:

    SignalR Blazor app di esempio aperta in due finestre del browser che mostra i messaggi s scambiati.

    Citazioni: Star Trek VI: The Undiscovered Country © 1991 Paramount

Creare Blazor Server un'app

Seguire le indicazioni per la scelta degli strumenti:

Nota

Visual Studio 16.10 o versione successiva e .NET Core SDK 5.0.0 o versione successiva.

  1. Creare un nuovo progetto.

  2. Selezionare il Blazor Server modello App. Selezionare Avanti.

  3. Digitare BlazorServerSignalRApp il nome Project campo. Verificare che la voce Posizione sia corretta o specificare un percorso per il progetto. Selezionare Avanti.

  4. Selezionare Crea.

Aggiungere la SignalR libreria client

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e BlazorServerSignalRApp scegliere Gestisci NuGet pacchetti.

  2. Nella finestra di dialogo NuGet pacchetti di distribuzione verificare che l'opzione Origine pacchetto sia impostata su nuget.org .

  3. Con l'opzione Sfoglia selezionata, Microsoft.AspNetCore.SignalR.Client digitare nella casella di ricerca.

  4. Nei risultati della ricerca selezionare il Microsoft.AspNetCore.SignalR.Client pacchetto. Impostare la versione in modo che corrisponda al framework condiviso dell'app. Selezionare Installa.

  5. Se viene visualizzata la finestra di dialogo Anteprima modifiche, selezionare OK.

  6. Se viene visualizzata la finestra di dialogo Accettazione della licenza, selezionare Accetto se si accettano le condizioni di licenza.

Aggiungere un SignalR hub

Creare una Hubs cartella (plurale) e aggiungere la classe ChatHub seguente ( Hubs/ChatHub.cs ):

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorServerSignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Aggiungere servizi e un endpoint per SignalR l'hub

  1. Aprire il file Startup.cs .

  2. Aggiungere gli spazi dei Microsoft.AspNetCore.ResponseCompression nomi per e la classe ChatHub all'inizio del file:

    using Microsoft.AspNetCore.ResponseCompression;
    using BlazorServerSignalRApp.Server.Hubs;
    
  3. Aggiungere i servizi del middleware di compressione delle risposte a Startup.ConfigureServices :

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSingleton<WeatherForecastService>();
        services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });
    }
    
  4. In Startup.Configure:

    • Usare il middleware di compressione delle risposte nella parte superiore della configurazione della pipeline di elaborazione.
    • Tra gli endpoint per il mapping Blazor dell'hub e il fallback lato client, aggiungere un endpoint per l'hub.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseResponseCompression();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }
    
        app.UseHttpsRedirection();
        app.UseStaticFiles();
    
        app.UseRouting();
    
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapHub<ChatHub>("/chathub");
            endpoints.MapFallbackToPage("/_Host");
        });
    }
    

Aggiungere il Razor codice del componente per la chat

  1. Aprire il file Pages/Index.razor .

  2. Sostituire il markup con il codice seguente:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <div class="form-group">
        <label>
            User:
            <input @bind="userInput" />
        </label>
    </div>
    <div class="form-group">
        <label>
            Message:
            <input @bind="messageInput" size="50" />
        </label>
    </div>
    <button @onclick="Send" disabled="@(!IsConnected)">Send</button>
    
    <hr>
    
    <ul id="messagesList">
        @foreach (var message in messages)
        {
            <li>@message</li>
        }
    </ul>
    
    @code {
        private HubConnection hubConnection;
        private List<string> messages = new List<string>();
        private string userInput;
        private string messageInput;
    
        protected override async Task OnInitializedAsync()
        {
            hubConnection = new HubConnectionBuilder()
                .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
                .Build();
    
            hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
            {
                var encodedMsg = $"{user}: {message}";
                messages.Add(encodedMsg);
                StateHasChanged();
            });
    
            await hubConnection.StartAsync();
        }
    
        async Task Send() =>
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected =>
            hubConnection.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            if (hubConnection is not null)
            {
                await hubConnection.DisposeAsync();
            }
        }
    }
    

Eseguire l'app

Seguire le indicazioni per gli strumenti:

  1. Premere F5 per eseguire l'app con debug o CTRL + F5 per eseguire l'app senza eseguire il debug.

  2. Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.

  3. Scegliere uno dei browser, immettere un nome e un messaggio e selezionare il pulsante per inviare il messaggio. Il nome e il messaggio vengono visualizzati immediatamente in entrambe le pagine:

    SignalR Blazor app di esempio aperta in due finestre del browser che mostra i messaggi s scambiati.

    Quotes: Star Vi: The Undiscovered Country © 1991 Undiscovered Country 1991 Country

Passaggi successivi

In questa esercitazione sono state illustrate le procedure per:

  • Creare un Blazor progetto
  • Aggiungere la SignalR libreria client
  • Aggiungere un SignalR hub
  • Aggiungere SignalR servizi e un endpoint per l'hub SignalR
  • Aggiungere il Razor codice del componente per la chat

Per altre informazioni sulla creazione Blazor di app, vedere la Blazor documentazione:

Risorse aggiuntive

Questa esercitazione illustra le nozioni di base per la creazione di un'app in tempo reale usando SignalR con Blazor . Si apprenderà come:

  • Creare un Blazor progetto
  • Aggiungere la SignalR libreria client
  • Aggiungere un SignalR hub
  • Aggiungere SignalR servizi e un endpoint per l'hub SignalR
  • Aggiungere il Razor codice del componente per la chat

Al termine di questa esercitazione si dirà che sarà presente un'app di chat funzionante.

Visualizzare o scaricare il codice di esempio (come scaricare)

Prerequisiti

Creare Blazor WebAssembly un'app ospitata

Seguire le indicazioni per la scelta degli strumenti:

Nota

Visual Studio 16.6 o versione successiva e .NET Core SDK 3.1.300 o versione successiva.

  1. Creare un nuovo progetto.

  2. Scegliere il Blazor WebAssembly modello App. Selezionare Avanti.

  3. Digitare BlazorWebAssemblySignalRApp il nome Project campo. Verificare che la voce Percorso sia corretta o specificare un percorso per il progetto. Selezionare Avanti.

  4. Nella finestra di dialogo Informazioni aggiuntive selezionare la casella ASP.NET Core hosted.

  5. Selezionare Crea.

Aggiungere la SignalR libreria client

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e BlazorWebAssemblySignalRApp.Client scegliere Gestisci NuGet pacchetti.

  2. Nella finestra di dialogo NuGet pacchetti verificare che Origine pacchetto sia impostato su nuget.org .

  3. Con l'opzione Sfoglia selezionata, Microsoft.AspNetCore.SignalR.Client digitare nella casella di ricerca.

  4. Nei risultati della ricerca selezionare il Microsoft.AspNetCore.SignalR.Client pacchetto. Impostare la versione in modo che corrisponda al framework condiviso dell'app. Selezionare Installa.

  5. Se viene visualizzata la finestra di dialogo Anteprima modifiche, selezionare OK.

  6. Se viene visualizzata la finestra di dialogo Accettazione della licenza, selezionare Accetto se si accettano le condizioni di licenza.

Aggiungere un SignalR hub

Nel progetto BlazorWebAssemblySignalRApp.Server creare una cartella Hubs (plurale) e aggiungere la classe ChatHub seguente ( Hubs/ChatHub.cs ):

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorWebAssemblySignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Aggiungere servizi e un endpoint per SignalR l'hub

  1. Nel progetto BlazorWebAssemblySignalRApp.Server aprire il file Startup.cs.

  2. Aggiungere lo spazio dei nomi ChatHub per la classe all'inizio del file:

    using BlazorWebAssemblySignalRApp.Server.Hubs;
    
  3. Aggiungere SignalR e i servizi middleware di compressione delle risposte a Startup.ConfigureServices :

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
        services.AddControllersWithViews();
        services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });
    }
    
  4. In Startup.Configure:

    • Usare il middleware di compressione delle risposte nella parte superiore della configurazione della pipeline di elaborazione.
    • Tra gli endpoint per i controller e il fallback lato client, aggiungere un endpoint per l'hub.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseResponseCompression();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebAssemblyDebugging();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }
    
        app.UseHttpsRedirection();
        app.UseBlazorFrameworkFiles();
        app.UseStaticFiles();
    
        app.UseRouting();
    
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapHub<ChatHub>("/chathub");
            endpoints.MapFallbackToFile("index.html");
        });
    }
    

Aggiungere il Razor codice del componente per la chat

  1. Nel progetto BlazorWebAssemblySignalRApp.Client aprire il file Pages/Index.razor.

  2. Sostituire il markup con il codice seguente:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IDisposable
    
    <div class="form-group">
        <label>
            User:
            <input @bind="userInput" />
        </label>
    </div>
    <div class="form-group">
        <label>
            Message:
            <input @bind="messageInput" size="50" />
        </label>
    </div>
    <button @onclick="Send" disabled="@(!IsConnected)">Send</button>
    
    <hr>
    
    <ul id="messagesList">
        @foreach (var message in messages)
        {
            <li>@message</li>
        }
    </ul>
    
    @code {
        private HubConnection hubConnection;
        private List<string> messages = new List<string>();
        private string userInput;
        private string messageInput;
    
        protected override async Task OnInitializedAsync()
        {
            hubConnection = new HubConnectionBuilder()
                .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
                .Build();
    
            hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
            {
                var encodedMsg = $"{user}: {message}";
                messages.Add(encodedMsg);
                StateHasChanged();
            });
    
            await hubConnection.StartAsync();
        }
    
        async Task Send() =>
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected =>
            hubConnection.State == HubConnectionState.Connected;
    
        public void Dispose()
        {
            _ = hubConnection?.DisposeAsync();
        }
    }
    

Eseguire l'app

Seguire le indicazioni per gli strumenti:

  1. In Esplora soluzioni selezionare il BlazorWebAssemblySignalRApp.Server progetto. Premere F5 per eseguire l'app con debug o CTRL + F5 per eseguire l'app senza eseguire il debug.

  2. Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.

  3. Scegliere uno dei browser, immettere un nome e un messaggio e selezionare il pulsante per inviare il messaggio. Il nome e il messaggio vengono visualizzati immediatamente in entrambe le pagine:

    SignalR Blazor app di esempio aperta in due finestre del browser che mostra i messaggi s scambiati.

    Quotes: Star Vi: The Undiscovered Country © 1991 Undiscovered Country 1991 Country

Creare Blazor Server un'app

Seguire le indicazioni per la scelta degli strumenti:

Nota

Visual Studio 16.6 o versione successiva e .NET Core SDK 3.1.300 o versione successiva.

  1. Creare un nuovo progetto.

  2. Selezionare il Blazor Server modello App. Selezionare Avanti.

  3. Digitare BlazorServerSignalRApp il nome Project campo. Verificare che la voce Percorso sia corretta o specificare un percorso per il progetto. Selezionare Avanti.

  4. Selezionare Crea.

Aggiungere la SignalR libreria client

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e BlazorServerSignalRApp scegliere Gestisci NuGet pacchetti.

  2. Nella finestra di dialogo NuGet pacchetti verificare che Origine pacchetto sia impostato su nuget.org .

  3. Con l'opzione Sfoglia selezionata, Microsoft.AspNetCore.SignalR.Client digitare nella casella di ricerca.

  4. Nei risultati della ricerca selezionare il Microsoft.AspNetCore.SignalR.Client pacchetto. Impostare la versione in modo che corrisponda al framework condiviso dell'app. Selezionare Installa.

  5. Se viene visualizzata la finestra di dialogo Anteprima modifiche, selezionare OK.

  6. Se viene visualizzata la finestra di dialogo Accettazione della licenza, selezionare Accetto se si accettano le condizioni di licenza.

Aggiungere il pacchetto System.Text.Encodings.Web

Questa sezione si applica solo alle app per ASP.NET Core versione 3.x.

A causa di un problema di risoluzione dei pacchetti quando si usa System.Text.Json la versione 5.x in un'app ASP.NET Core 3.x, il progetto richiede un riferimento al pacchetto per System.Text.Encodings.Web . Il problema sottostante verrà risolto in una versione futura della patch di .NET 5. Per altre informazioni, vedereSystem.Text.Jssu definisce netcoreapp3.0 senza dipendenze (dotnet/runtime #45560).

Per aggiungere System.Text.Encodings.Web al progetto, seguire le indicazioni per la scelta degli strumenti:

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e BlazorServerSignalRApp scegliere Gestisci NuGet pacchetti.

  2. Nella finestra di dialogo NuGet pacchetti verificare che Origine pacchetto sia impostato su nuget.org .

  3. Con l'opzione Sfoglia selezionata, System.Text.Encodings.Web digitare nella casella di ricerca.

  4. Nei risultati della ricerca selezionare il System.Text.Encodings.Web pacchetto. Selezionare la versione del pacchetto che corrisponde al framework condiviso in uso. Selezionare Installa.

  5. Se viene visualizzata la finestra di dialogo Anteprima modifiche, selezionare OK.

  6. Se viene visualizzata la finestra di dialogo Accettazione della licenza, selezionare Accetto se si accettano le condizioni di licenza.

Aggiungere un SignalR hub

Creare una Hubs cartella (plurale) e aggiungere la classe ChatHub seguente ( Hubs/ChatHub.cs ):

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorServerSignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Aggiungere servizi e un endpoint per SignalR l'hub

  1. Aprire il file Startup.cs .

  2. Aggiungere gli spazi dei Microsoft.AspNetCore.ResponseCompression nomi per e la classe ChatHub all'inizio del file:

    using Microsoft.AspNetCore.ResponseCompression;
    using BlazorServerSignalRApp.Server.Hubs;
    
  3. Aggiungere i servizi del middleware di compressione delle risposte a Startup.ConfigureServices :

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSingleton<WeatherForecastService>();
        services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });
    }
    
  4. In Startup.Configure:

    • Usare il middleware di compressione delle risposte nella parte superiore della configurazione della pipeline di elaborazione.
    • Tra gli endpoint per il mapping Blazor dell'hub e il fallback lato client, aggiungere un endpoint per l'hub.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseResponseCompression();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }
    
        app.UseHttpsRedirection();
        app.UseStaticFiles();
    
        app.UseRouting();
    
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapHub<ChatHub>("/chathub");
            endpoints.MapFallbackToPage("/_Host");
        });
    }
    

Aggiungere il Razor codice del componente per la chat

  1. Aprire il file Pages/Index.razor .

  2. Sostituire il markup con il codice seguente:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <div class="form-group">
        <label>
            User:
            <input @bind="userInput" />
        </label>
    </div>
    <div class="form-group">
        <label>
            Message:
            <input @bind="messageInput" size="50" />
        </label>
    </div>
    <button @onclick="Send" disabled="@(!IsConnected)">Send</button>
    
    <hr>
    
    <ul id="messagesList">
        @foreach (var message in messages)
        {
            <li>@message</li>
        }
    </ul>
    
    @code {
        private HubConnection hubConnection;
        private List<string> messages = new List<string>();
        private string userInput;
        private string messageInput;
    
        protected override async Task OnInitializedAsync()
        {
            hubConnection = new HubConnectionBuilder()
                .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
                .Build();
    
            hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
            {
                var encodedMsg = $"{user}: {message}";
                messages.Add(encodedMsg);
                StateHasChanged();
            });
    
            await hubConnection.StartAsync();
        }
    
        async Task Send() =>
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected =>
            hubConnection.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            await hubConnection?.DisposeAsync();
        }
    }
    

Eseguire l'app

Seguire le indicazioni per gli strumenti:

  1. Premere F5 per eseguire l'app con debug o CTRL + F5 per eseguire l'app senza eseguire il debug.

  2. Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.

  3. Scegliere uno dei browser, immettere un nome e un messaggio e selezionare il pulsante per inviare il messaggio. Il nome e il messaggio vengono visualizzati immediatamente in entrambe le pagine:

    SignalR Blazor app di esempio aperta in due finestre del browser che mostra i messaggi s scambiati.

    Quotes: Star Vi: The Undiscovered Country © 1991 Undiscovered Country 1991 Country

Passaggi successivi

In questa esercitazione sono state illustrate le procedure per:

  • Creare un Blazor progetto
  • Aggiungere la SignalR libreria client
  • Aggiungere un SignalR hub
  • Aggiungere SignalR servizi e un endpoint per l'hub SignalR
  • Aggiungere il Razor codice del componente per la chat

Per altre informazioni sulla creazione Blazor di app, vedere la Blazor documentazione:

Risorse aggiuntive