Używanie ASP.NET Core SignalR z hostowaną Blazor WebAssembly aplikacjąUse ASP.NET Core SignalR with a hosted Blazor WebAssembly app

Autorzy Daniel Roth i Luke LathamBy Daniel Roth and Luke Latham

Ten samouczek uczy się podstaw tworzenia aplikacji w czasie rzeczywistym przy użyciu SignalR programu z usługą Blazor WebAssembly .This tutorial teaches the basics of building a real-time app using SignalR with Blazor WebAssembly. Omawiane kwestie:You learn how to:

  • Tworzenie Blazor WebAssembly projektu hostowanej aplikacjiCreate a Blazor WebAssembly Hosted app project
  • Dodawanie SignalR biblioteki klientaAdd the SignalR client library
  • Dodawanie SignalR centrumAdd a SignalR hub
  • Dodaj SignalR usługi i punkt końcowy SignalR centrumAdd SignalR services and an endpoint for the SignalR hub
  • Dodawanie Razor kodu składnika dla rozmowyAdd Razor component code for chat

Na końcu tego samouczka będziesz mieć działającą aplikację czatu.At the end of this tutorial, you'll have a working chat app.

Wyświetl lub pobierz przykładowy kod (jak pobrać)View or download sample code (how to download)

Wymagania wstępnePrerequisites

Tworzenie projektu hostowanej Blazor WebAssembly aplikacjiCreate a hosted Blazor WebAssembly app project

Postępuj zgodnie ze wskazówkami dotyczącymi wybranego narzędzia:Follow the guidance for your choice of tooling:

Uwaga

Wymagany jest program Visual Studio 16,8 lub nowszy oraz zestaw .NET Core SDK 5.0.0 lub nowszy.Visual Studio 16.8 or later and .NET Core SDK 5.0.0 or later are required.

Uwaga

Wymagany jest program Visual Studio 16,6 lub nowszy oraz zestaw .NET Core SDK 3.1.300 lub nowszy.Visual Studio 16.6 or later and .NET Core SDK 3.1.300 or later are required.

  1. Tworzenie nowego projektu.Create a new project.

  2. Wybierz pozycję Blazor aplikacja i wybierz pozycję dalej.Select Blazor App and select Next.

  3. Wpisz BlazorSignalRApp wartość w polu Nazwa projektu .Type BlazorSignalRApp in the Project name field. Potwierdź, że wpis lokalizacji jest poprawny lub podaj lokalizację dla projektu.Confirm the Location entry is correct or provide a location for the project. Wybierz pozycję Utwórz.Select Create.

  4. Wybierz szablon Blazor WebAssembly aplikacji .Choose the Blazor WebAssembly App template.

  5. W obszarze Zaawansowane zaznacz pole wyboru hostowane ASP.NET Core .Under Advanced, select the ASP.NET Core hosted check box.

  6. Wybierz pozycję Utwórz.Select Create.

Dodawanie SignalR biblioteki klientaAdd the SignalR client library

  1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy BlazorSignalRApp.Client projekt i wybierz polecenie Zarządzaj pakietami NuGet.In Solution Explorer, right-click the BlazorSignalRApp.Client project and select Manage NuGet Packages.

  2. W oknie dialogowym Zarządzanie pakietami NuGet upewnij się, że Źródło pakietów jest ustawione na wartość nuget.org .In the Manage NuGet Packages dialog, confirm that the Package source is set to nuget.org.

  3. Po wybraniu przycisku Przeglądaj wpisz Microsoft.AspNetCore.SignalR.Client w polu wyszukiwania.With Browse selected, type Microsoft.AspNetCore.SignalR.Client in the search box.

  4. W wynikach wyszukiwania wybierz Microsoft.AspNetCore.SignalR.Client pakiet i wybierz pozycję Zainstaluj.In the search results, select the Microsoft.AspNetCore.SignalR.Client package and select Install.

  5. Jeśli zostanie wyświetlone okno dialogowe Podgląd zmian , wybierz przycisk OK.If the Preview Changes dialog appears, select OK.

  6. Jeśli zostanie wyświetlone okno dialogowe Akceptacja licencji , wybierz pozycję Akceptuję , jeśli akceptujesz postanowienia licencyjne.If the License Acceptance dialog appears, select I Accept if you agree with the license terms.

Dodawanie SignalR centrumAdd a SignalR hub

W BlazorSignalRApp.Server projekcie Utwórz Hubs folder (plural) i Dodaj następującą ChatHub klasę ( Hubs/ChatHub.cs ):In the BlazorSignalRApp.Server project, create a Hubs (plural) folder and add the following ChatHub class (Hubs/ChatHub.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

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

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

Dodaj usługi i punkt końcowy SignalR centrumAdd services and an endpoint for the SignalR hub

  1. W BlazorSignalRApp.Server projekcie Otwórz Startup.cs plik.In the BlazorSignalRApp.Server project, open the Startup.cs file.

  2. Dodaj przestrzeń nazw dla ChatHub klasy na początku pliku:Add the namespace for the ChatHub class to the top of the file:

    using BlazorSignalRApp.Server.Hubs;
    
  3. Dodaj SignalR i Odpowiedz usługi pośredniczące kompresji w programie Startup.ConfigureServices :Add SignalR and Response Compression Middleware services to 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" });
    });
}
public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    services.AddControllersWithViews();
    services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
}
  1. W pliku Startup.Configure:In Startup.Configure:

    • Użyj oprogramowania pośredniczącego kompresji odpowiedzi w górnej części konfiguracji potoku przetwarzania.Use Response Compression Middleware at the top of the processing pipeline's configuration.
    • Między punktami końcowymi kontrolerów i powrotu po stronie klienta należy dodać punkt końcowy centrum.Between the endpoints for controllers and the client-side fallback, add an endpoint for the 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");
    });
}
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");
    });
}

Dodawanie Razor kodu składnika dla rozmowyAdd Razor component code for chat

  1. W BlazorSignalRApp.Client projekcie Otwórz Pages/Index.razor plik.In the BlazorSignalRApp.Client project, open the Pages/Index.razor file.

  2. Zastąp znacznik następującym kodem:Replace the markup with the following code:

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

    Task Send() =>
        hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;
        
    public async ValueTask DisposeAsync()
    {
        await hubConnection.DisposeAsync();
    }
}
@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();
    }

    Task Send() =>
        hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;
        
    public void Dispose()
    {
        _ = hubConnection.DisposeAsync();
    }
}

Uruchamianie aplikacjiRun the app

  1. Postępuj zgodnie ze wskazówkami dotyczącymi narzędzi:Follow the guidance for your tooling:
  1. W Eksplorator rozwiązań wybierz BlazorSignalRApp.Server projekt.In Solution Explorer, select the BlazorSignalRApp.Server project. Naciśnij klawisz F5 , aby uruchomić aplikację z debugowaniem lub klawiszem Ctrl + F5 , aby uruchomić aplikację bez debugowania.Press F5 to run the app with debugging or Ctrl+F5 to run the app without debugging.

  2. Skopiuj adres URL z paska adresu, Otwórz inne wystąpienie przeglądarki lub kartę, a następnie wklej adres URL na pasku adresu.Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  3. Wybierz opcję przeglądarka, wprowadź nazwę i komunikat, a następnie wybierz przycisk, aby wysłać wiadomość.Choose either browser, enter a name and message, and select the button to send the message. Nazwa i komunikat są wyświetlane na obu stronach natychmiast:The name and message are displayed on both pages instantly:

    ::: No-Loc (Sygnalizującer):::.:: No-Loc (Blazor webassembly)::: przykładowa aplikacja otwarta w dwóch oknach przeglądarki pokazująca komunikaty wymieniane.

    Cudzysłowy: gwiazdka Trek VI: niewykrywalny kraj © 1991 ParamountQuotes: Star Trek VI: The Undiscovered Country ©1991 Paramount

Następne krokiNext steps

W niniejszym samouczku zawarto informacje na temat wykonywania następujących czynności:In this tutorial, you learned how to:

  • Tworzenie Blazor WebAssembly projektu hostowanej aplikacjiCreate a Blazor WebAssembly Hosted app project
  • Dodawanie SignalR biblioteki klientaAdd the SignalR client library
  • Dodawanie SignalR centrumAdd a SignalR hub
  • Dodaj SignalR usługi i punkt końcowy SignalR centrumAdd SignalR services and an endpoint for the SignalR hub
  • Dodawanie Razor kodu składnika dla rozmowyAdd Razor component code for chat

Aby dowiedzieć się więcej na temat tworzenia Blazor aplikacji, zapoznaj się z Blazor dokumentacją:To learn more about building Blazor apps, see the Blazor documentation:

Zasoby dodatkoweAdditional resources