použít ASP.NET Core SignalR sBlazor

  • Článek
  • 20 min ke čtení

V tomto kurzu se naučíte základy vytváření aplikací v reálném čase pomocí nástroje SignalR Blazor . Získáte informace o těchto tématech:

  • Vytvořit Blazor projekt
  • Přidat SignalR klientskou knihovnu
  • Přidání SignalR centra
  • Přidání SignalR služeb a koncového bodu pro SignalR centrum
  • Přidat Razor kód komponenty pro chat

Na konci tohoto kurzu budete mít funkční chatovací aplikaci.

Zobrazit nebo stáhnout ukázkový kód (Jak stáhnout)

Požadavky

Vytvoření hostované Blazor WebAssembly aplikace

Postupujte podle pokynů pro výběr nástrojů:

Poznámka

vyžaduje se Visual Studio 2022 nebo novější a .NET Core SDK 6.0.0 nebo novější.

  1. Vytvoření nového projektu

  2. Vyberte šablonu Blazor WebAssembly aplikace . Vyberte Další.

  3. BlazorWebAssemblySignalRAppdo pole Project název zadejte. Potvrďte správnost záznamu umístění nebo zadejte umístění projektu. Vyberte Další.

  4. v dialogovém okně další informace zaškrtněte políčko ASP.NET Core hostované .

  5. Vyberte Vytvořit.

Přidat SignalR klientskou knihovnu

  1. v Průzkumník řešení klikněte pravým tlačítkem myši na BlazorWebAssemblySignalRApp.Client projekt a vyberte spravovat balíčky NuGet.

  2. v dialogovém okně spravovat NuGet balíčky potvrďte, že je zdroj balíčku nastavený na nuget.org .

  3. Když je vybraná možnost Procházet , Microsoft.AspNetCore.SignalR.Client do vyhledávacího pole zadejte.

  4. Ve výsledcích hledání vyberte Microsoft.AspNetCore.SignalR.Client balíček. Nastavte verzi tak, aby odpovídala sdílené architektuře aplikace. Vyberte Nainstalovat.

  5. Pokud se zobrazí dialogové okno Náhled změn , vyberte OK.

  6. Pokud se zobrazí dialogové okno pro přijetí licence , Vyberte možnost Souhlasím , pokud souhlasíte s licenčními podmínkami.

Přidání SignalR centra

V BlazorWebAssemblySignalRApp.Server projektu vytvořte Hubs složku (plural) a přidejte následující ChatHub třídu ( 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);
        }
    }
}

Přidání služeb a koncového bodu pro SignalR centrum

  1. V BlazorWebAssemblySignalRApp.Server projektu otevřete Program.cs soubor.

  2. Přidejte do ChatHub horní části souboru obor názvů pro třídu:

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. Přidejte SignalR služby middlewaru pro komprimaci a odezvu do Program.cs :

    builder.Services.AddSignalR();
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. V Program.cs:

    • V horní části Konfigurace kanálu zpracování použijte middleware pro kompresi odpovědí.
    • Mezi koncovými body řadičů a Fallback na straně klienta přidejte koncový bod pro centrum.
    app.UseResponseCompression();

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
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.UseBlazorFrameworkFiles();
app.UseStaticFiles();

app.UseRouting();

app.MapRazorPages();
app.MapControllers();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToFile("index.html");

app.Run();

Přidat Razor kód komponenty pro chat

  1. V BlazorWebAssemblySignalRApp.Client projektu otevřete Pages/Index.razor soubor.

  2. Nahraďte kód následujícím kódem:

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<PageTitle>Index</PageTitle>

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

    private async Task Send()
    {
        if (hubConnection is not null)
        {
            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();
        }
    }
}

Spuštění aplikace

Postupujte podle pokynů pro vaše nástroje:

  1. V Průzkumník řešení vyberte BlazorWebAssemblySignalRApp.Server projekt. Stisknutím klávesy F5 spusťte aplikaci s laděním nebo stisknutím Klávesy Ctrl + F5 spusťte aplikaci bez ladění.

  2. Zkopírujte adresu URL z adresního řádku, otevřete jinou instanci nebo kartu prohlížeče a vložte ji do adresního řádku.

  3. Zvolte některý z prohlížečů, zadejte název a zprávu a vyberte tlačítko pro odeslání zprávy. Název a zpráva se okamžitě zobrazí na obou stránkách:

    SignalR Blazor Ukázková aplikace otevřená ve dvou oknech prohlížeče zobrazující vyměněné zprávy.

    Uvozovky: StarÍr VI: The Undiscovered Country © 1991 Paramount

Vytvoření Blazor Server aplikace

Postupujte podle pokynů pro výběr nástrojů:

Poznámka

Visual Studio 2022 nebo novější a .NET Core SDK 6.0.0 nebo novější.

  1. Vytvoření nového projektu

  2. Vyberte Blazor Server šablonu Aplikace. Vyberte Další.

  3. Do BlazorServerSignalRApp pole Project zadejte . Ověřte správnost položky Location (Umístění) nebo zadejte umístění projektu. Vyberte Další.

  4. Vyberte Vytvořit.

Přidání SignalR klientské knihovny

  1. V Průzkumník řešení klikněte pravým tlačítkem na projekt a BlazorServerSignalRApp vyberte Spravovat NuGet balíčky.

  2. V dialogovém okně NuGet balíčků ověřte, že zdroj balíčku je nastavený na nuget.org .

  3. Vyberte Procházet a do Microsoft.AspNetCore.SignalR.Client vyhledávacího pole zadejte .

  4. Ve výsledcích hledání vyberte Microsoft.AspNetCore.SignalR.Client balíček . Nastavte verzi tak, aby odpovídala sdílenému rozhraní aplikace. Vyberte Nainstalovat.

  5. Pokud se zobrazí dialogové okno Náhled změn, vyberte OK.

  6. Pokud se zobrazí dialogové okno Souhlas s podmínkami licence, vyberte Souhlasím, pokud souhlasíte s licenčními podmínkami.

Přidání SignalR centra

Vytvořte složku Hubs (v množném čísle) a přidejte následující ChatHub třídu ( 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);
        }
    }
}

Přidání služeb a koncového bodu SignalR pro centrum

  1. Otevřete soubor Program.cs.

  2. Na začátek souboru Microsoft.AspNetCore.ResponseCompression přidejte obory názvů pro a ChatHub třídu :

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. Přidejte služby middlewaru pro kompresi odpovědí do Program.cs :

    builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. V Program.cs:

    • V horní části konfigurace kanálu zpracování použijte middleware pro kompresi odpovědí.
    • Mezi koncové body pro mapování centra a záložní bod na straně klienta Blazor přidejte koncový bod pro centrum.
    app.UseResponseCompression();

if (!app.Environment.IsDevelopment())
{
    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.MapBlazorHub();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToPage("/_Host");

app.Run();

Přidat Razor kód komponenty pro chat

  1. Otevřete soubor Pages/Index.razor.

  2. Nahraďte kód následujícím kódem:

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<PageTitle>Index</PageTitle>

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

    private async Task Send()
    {
        if (hubConnection is not null)
        {
            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();
        }
    }
}

Spuštění aplikace

Postupujte podle pokynů pro vaše nástroje:

  1. Stiskněte klávesu F5 ke spuštění aplikace s laděním nebo stisknutím klávesy CTRL + F5 pro spuštění aplikace bez ladění.

  2. Zkopírujte adresu URL z panelu Adresa, otevřete jinou instanci nebo kartu prohlížeče a vložte adresu URL do panelu Adresa.

  3. Zvolte buď prohlížeč, zadejte jméno a zprávu a vyberte tlačítko pro odeslání zprávy. Název a zpráva se okamžitě zobrazí na obou stránkách:

    ::: No-Loc (Signal):::::: No-Loc (Blazor)::: Ukázková aplikace je otevřená ve dvou oknech prohlížeče, ve kterých se zobrazují vyměňované zprávy.

    Quotes: Star Trek VI: nezjištěná země 1991 – nezjištěná ©

Další kroky

V tomto kurzu jste se naučili:

  • Vytvořit Blazor projekt
  • Přidat SignalR klientskou knihovnu
  • Přidání SignalR centra
  • Přidání SignalR služeb a koncového bodu pro SignalR centrum
  • Přidat Razor kód komponenty pro chat

Další informace o vytváření Blazor aplikací najdete v Blazor dokumentaci:

Úvod do ASP.NET Core Blazor Ověřování nosných tokenů s Identity událostmi serveru, WebSockets a Server-Sent

Další zdroje informací

V tomto kurzu se naučíte základy vytváření aplikací v reálném čase pomocí nástroje SignalR Blazor . Získáte informace o těchto tématech:

  • Vytvořit Blazor projekt
  • Přidat SignalR klientskou knihovnu
  • Přidání SignalR centra
  • Přidání SignalR služeb a koncového bodu pro SignalR centrum
  • Přidat Razor kód komponenty pro chat

Na konci tohoto kurzu budete mít funkční chatovací aplikaci.

Zobrazit nebo stáhnout ukázkový kód (Jak stáhnout)

Požadavky

Vytvoření hostované Blazor WebAssembly aplikace

Postupujte podle pokynů pro výběr nástrojů:

Poznámka

vyžaduje se Visual Studio 16,10 nebo novější a .NET Core SDK 5.0.0 nebo novější.

  1. Vytvoření nového projektu

  2. Vyberte šablonu Blazor WebAssembly aplikace . Vyberte Další.

  3. BlazorWebAssemblySignalRAppdo pole Project název zadejte. Potvrďte správnost záznamu umístění nebo zadejte umístění projektu. Vyberte Další.

  4. v dialogovém okně další informace zaškrtněte políčko ASP.NET Core hostované .

  5. Vyberte Vytvořit.

Přidání SignalR klientské knihovny

  1. V Průzkumník řešení klikněte pravým tlačítkem na projekt a BlazorWebAssemblySignalRApp.Client vyberte Spravovat NuGet balíčky.

  2. V dialogovém okně NuGet balíčků ověřte, že zdroj balíčku je nastavený na nuget.org .

  3. Vyberte Procházet a do Microsoft.AspNetCore.SignalR.Client vyhledávacího pole zadejte .

  4. Ve výsledcích hledání vyberte Microsoft.AspNetCore.SignalR.Client balíček . Nastavte verzi tak, aby odpovídala sdílenému rozhraní aplikace. Vyberte Nainstalovat.

  5. Pokud se zobrazí dialogové okno Náhled změn, vyberte OK.

  6. Pokud se zobrazí dialogové okno Souhlas s podmínkami licence, vyberte Souhlasím, pokud souhlasíte s licenčními podmínkami.

Přidání SignalR centra

V BlazorWebAssemblySignalRApp.Server projektu vytvořte složku Hubs (v množném čísle) a přidejte následující ChatHub třídu ( 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);
        }
    }
}

Přidání služeb a koncového bodu SignalR pro centrum

  1. V BlazorWebAssemblySignalRApp.Server projektu otevřete Startup.cs soubor .

  2. Na začátek souboru ChatHub přidejte obor názvů pro třídu :

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. Přidejte SignalR middlewarové služby komprese odpovědí a přidejte je do 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. V Startup.Configure:

    • V horní části konfigurace kanálu zpracování použijte middleware pro kompresi odpovědí.
    • Mezi koncové body pro kontrolery a záložní bod na straně klienta přidejte koncový bod pro centrum.
    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");
    });
}

Přidání Razor kódu komponenty pro chat

  1. V BlazorWebAssemblySignalRApp.Client projektu otevřete Pages/Index.razor soubor .

  2. Nahraďte kód následujícím kódem:

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

Spuštění aplikace

Postupujte podle pokynů pro vaše nástroje:

  1. V Průzkumník řešení vyberte BlazorWebAssemblySignalRApp.Server projekt. Stisknutím klávesy F5 spusťte aplikaci s laděním nebo stisknutím Klávesy Ctrl + F5 spusťte aplikaci bez ladění.

  2. Zkopírujte adresu URL z adresního řádku, otevřete jinou instanci nebo kartu prohlížeče a vložte tuto adresu URL do adresního řádku.

  3. Zvolte některý z prohlížečů, zadejte název a zprávu a vyberte tlačítko pro odeslání zprávy. Název a zpráva se okamžitě zobrazí na obou stránkách:

    SignalR Blazor Ukázková aplikace otevřená ve dvou oknech prohlížeče zobrazující vyměňované zprávy.

    Uvozovky: StarÍr VI: The Undiscovered Country © 1991 Paramount

Vytvoření Blazor Server aplikace

Postupujte podle pokynů pro výběr nástrojů:

Poznámka

Visual Studio 16.10 nebo novější a .NET Core SDK 5.0.0 nebo novější.

  1. Vytvoření nového projektu

  2. Vyberte Blazor Server šablonu Aplikace. Vyberte Další.

  3. Do BlazorServerSignalRApp pole Project zadejte . Ověřte správnost položky Location (Umístění) nebo zadejte umístění projektu. Vyberte Další.

  4. Vyberte Vytvořit.

Přidání SignalR klientské knihovny

  1. V Průzkumník řešení klikněte pravým tlačítkem na projekt a BlazorServerSignalRApp vyberte Spravovat NuGet balíčky.

  2. V dialogovém okně NuGet balíčků ověřte, že zdroj balíčku je nastavený na nuget.org .

  3. Vyberte Procházet a do Microsoft.AspNetCore.SignalR.Client vyhledávacího pole zadejte .

  4. Ve výsledcích hledání vyberte Microsoft.AspNetCore.SignalR.Client balíček . Nastavte verzi tak, aby odpovídala sdílenému rozhraní aplikace. Vyberte Nainstalovat.

  5. Pokud se zobrazí dialogové okno Náhled změn, vyberte OK.

  6. Pokud se zobrazí dialogové okno Souhlas s podmínkami licence, vyberte Souhlasím, pokud souhlasíte s licenčními podmínkami.

Přidání SignalR centra

Vytvořte složku Hubs (v množném čísle) a přidejte následující ChatHub třídu ( 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);
        }
    }
}

Přidání služeb a koncového bodu SignalR pro centrum

  1. Otevřete soubor Startup.cs.

  2. Na začátek souboru Microsoft.AspNetCore.ResponseCompression přidejte obory názvů pro a ChatHub třídu :

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. Přidejte middlewarové služby komprese odpovědí do 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. V Startup.Configure:

    • V horní části konfigurace kanálu zpracování použijte middleware pro kompresi odpovědí.
    • Mezi koncové body pro mapování centra a záložní bod na straně klienta přidejte koncový Blazor bod pro centrum.
    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");
    });
}

Přidání Razor kódu komponenty pro chat

  1. Otevřete soubor Pages/Index.razor.

  2. Nahraďte kód následujícím kódem:

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

Spuštění aplikace

Postupujte podle pokynů pro vaše nástroje:

  1. Stisknutím klávesy F5 spusťte aplikaci s laděním nebo stisknutím Klávesy Ctrl + F5 spusťte aplikaci bez ladění.

  2. Zkopírujte adresu URL z adresního řádku, otevřete jinou instanci nebo kartu prohlížeče a vložte ji do adresního řádku.

  3. Zvolte některý z prohlížečů, zadejte název a zprávu a vyberte tlačítko pro odeslání zprávy. Název a zpráva se okamžitě zobrazí na obou stránkách:

    SignalR Blazor Ukázková aplikace otevřená ve dvou oknech prohlížeče zobrazující vyměněné zprávy.

    Uvozovky: StarÍr VI: The Undiscovered Country © 1991 Paramount

Další kroky

V tomto kurzu jste se naučili:

  • Vytvoření Blazor projektu
  • Přidání SignalR klientské knihovny
  • Přidání SignalR centra
  • Přidání SignalR služeb a koncového bodu pro SignalR centrum
  • Přidání Razor kódu komponenty pro chat

Další informace o vytváření Blazor aplikací najdete v Blazor dokumentaci:

Úvod do ASP.NET Core Blazor Ověřování pomocí tokenu Bearer Identity pomocí serveru, protokolu WebSocket a Server-Sent událostí

Další zdroje informací

V tomto kurzu se naučíte základy vytváření aplikací v reálném čase s SignalR využitím Blazor . Získáte informace o těchto tématech:

  • Vytvoření Blazor projektu
  • Přidání SignalR klientské knihovny
  • Přidání SignalR centra
  • Přidání SignalR služeb a koncového bodu pro SignalR centrum
  • Přidání Razor kódu komponenty pro chat

Na konci tohoto kurzu budete mít funkční chatovací aplikaci.

Zobrazení nebo stažení ukázkového kódu (stažení)

Požadavky

Vytvoření hostované Blazor WebAssembly aplikace

Postupujte podle pokynů pro výběr nástrojů:

Poznámka

vyžaduje se Visual Studio 16,6 nebo novější a .NET Core SDK 3.1.300 nebo novější.

  1. Vytvoření nového projektu

  2. Vyberte šablonu Blazor WebAssembly aplikace . Vyberte Další.

  3. BlazorWebAssemblySignalRAppdo pole Project název zadejte. Potvrďte správnost záznamu umístění nebo zadejte umístění projektu. Vyberte Další.

  4. v dialogovém okně další informace zaškrtněte políčko ASP.NET Core hostované .

  5. Vyberte Vytvořit.

Přidat SignalR klientskou knihovnu

  1. v Průzkumník řešení klikněte pravým tlačítkem myši na BlazorWebAssemblySignalRApp.Client projekt a vyberte spravovat balíčky NuGet.

  2. v dialogovém okně spravovat NuGet balíčky potvrďte, že je zdroj balíčku nastavený na nuget.org .

  3. Když je vybraná možnost Procházet , Microsoft.AspNetCore.SignalR.Client do vyhledávacího pole zadejte.

  4. Ve výsledcích hledání vyberte Microsoft.AspNetCore.SignalR.Client balíček. Nastavte verzi tak, aby odpovídala sdílené architektuře aplikace. Vyberte Nainstalovat.

  5. Pokud se zobrazí dialogové okno Náhled změn , vyberte OK.

  6. Pokud se zobrazí dialogové okno pro přijetí licence , Vyberte možnost Souhlasím , pokud souhlasíte s licenčními podmínkami.

Přidání SignalR centra

V BlazorWebAssemblySignalRApp.Server projektu vytvořte Hubs složku (plural) a přidejte následující ChatHub třídu ( 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);
        }
    }
}

Přidání služeb a koncového bodu pro SignalR centrum

  1. V BlazorWebAssemblySignalRApp.Server projektu otevřete Startup.cs soubor.

  2. Přidejte do ChatHub horní části souboru obor názvů pro třídu:

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. Přidejte SignalR služby middlewaru pro komprimaci a odezvu do Startup.ConfigureServices :

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

  4. V Startup.Configure:

    • V horní části Konfigurace kanálu zpracování použijte middleware pro kompresi odpovědí.
    • Mezi koncovými body řadičů a Fallback na straně klienta přidejte koncový bod pro centrum.
    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");
    });
}

Přidat Razor kód komponenty pro chat

  1. V BlazorWebAssemblySignalRApp.Client projektu otevřete Pages/Index.razor soubor.

  2. Nahraďte kód následujícím kódem:

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

Spuštění aplikace

Postupujte podle pokynů pro vaše nástroje:

  1. V Průzkumník řešení vyberte BlazorWebAssemblySignalRApp.Server projekt. Stiskněte klávesu F5 ke spuštění aplikace s laděním nebo stisknutím klávesy CTRL + F5 pro spuštění aplikace bez ladění.

  2. Zkopírujte adresu URL z panelu Adresa, otevřete jinou instanci nebo kartu prohlížeče a vložte adresu URL do panelu Adresa.

  3. Zvolte buď prohlížeč, zadejte jméno a zprávu a vyberte tlačítko pro odeslání zprávy. Název a zpráva se okamžitě zobrazí na obou stránkách:

    ::: No-Loc (Signal):::::: No-Loc (Blazor)::: Ukázková aplikace je otevřená ve dvou oknech prohlížeče, ve kterých se zobrazují vyměňované zprávy.

    Quotes: Star Trek VI: nezjištěná země 1991 – nezjištěná ©

Vytvoření Blazor Server aplikace

Postupujte podle pokynů pro výběr nástrojů:

Poznámka

vyžaduje se Visual Studio 16,6 nebo novější a .NET Core SDK 3.1.300 nebo novější.

  1. Vytvoření nového projektu

  2. Vyberte šablonu Blazor Server aplikace . Vyberte Další.

  3. BlazorServerSignalRAppdo pole Project název zadejte. Potvrďte správnost záznamu umístění nebo zadejte umístění projektu. Vyberte Další.

  4. Vyberte Vytvořit.

Přidat SignalR klientskou knihovnu

  1. v Průzkumník řešení klikněte pravým tlačítkem myši na BlazorServerSignalRApp projekt a vyberte spravovat balíčky NuGet.

  2. v dialogovém okně spravovat NuGet balíčky potvrďte, že je zdroj balíčku nastavený na nuget.org .

  3. Když je vybraná možnost Procházet , Microsoft.AspNetCore.SignalR.Client do vyhledávacího pole zadejte.

  4. Ve výsledcích hledání vyberte Microsoft.AspNetCore.SignalR.Client balíček. Nastavte verzi tak, aby odpovídala sdílené architektuře aplikace. Vyberte Nainstalovat.

  5. Pokud se zobrazí dialogové okno Náhled změn , vyberte OK.

  6. Pokud se zobrazí dialogové okno pro přijetí licence , Vyberte možnost Souhlasím , pokud souhlasíte s licenčními podmínkami.

Přidání balíčku System. text. encodings. Web

tato část platí jenom pro aplikace ASP.NET Core verze 3. x.

v důsledku problému s rozlišením balíčku při použití System.Text.Json 5. x v aplikaci ASP.NET Core 3. x projekt vyžaduje odkaz na balíček pro System.Text.Encodings.Web . Základní problém bude vyřešen v budoucí verzi opravy rozhraní .NET 5. Další informace naleznete v tématu System. text. JSON definuje netcoreapp 3.0 bez závislostí (dotnet/runtime #45560).

Chcete-li přidat System.Text.Encodings.Web do projektu, postupujte podle pokynů pro výběr nástrojů:

  1. v Průzkumník řešení klikněte pravým tlačítkem myši na BlazorServerSignalRApp projekt a vyberte spravovat balíčky NuGet.

  2. v dialogovém okně spravovat NuGet balíčky potvrďte, že je zdroj balíčku nastavený na nuget.org .

  3. Když je vybraná možnost Procházet , System.Text.Encodings.Web do vyhledávacího pole zadejte.

  4. Ve výsledcích hledání vyberte System.Text.Encodings.Web balíček. Vyberte verzi balíčku, která odpovídá používanému sdílenému rozhraní. Vyberte Nainstalovat.

  5. Pokud se zobrazí dialogové okno Náhled změn , vyberte OK.

  6. Pokud se zobrazí dialogové okno pro přijetí licence , Vyberte možnost Souhlasím , pokud souhlasíte s licenčními podmínkami.

Přidání SignalR centra

Vytvořte Hubs složku (plural) a přidejte následující ChatHub třídu ( 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);
        }
    }
}

Přidání služeb a koncového bodu pro SignalR centrum

  1. Otevřete soubor Startup.cs.

  2. Na začátek souboru Microsoft.AspNetCore.ResponseCompression přidejte obory názvů pro a ChatHub třídu :

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. Přidejte middlewarové služby komprese odpovědí do 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. V Startup.Configure:

    • V horní části konfigurace kanálu zpracování použijte middleware pro kompresi odpovědí.
    • Mezi koncové body pro mapování centra a záložní bod na straně klienta přidejte koncový Blazor bod pro centrum.
    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");
    });
}

Přidání Razor kódu komponenty pro chat

  1. Otevřete soubor Pages/Index.razor.

  2. Nahraďte kód následujícím kódem:

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

Spuštění aplikace

Postupujte podle pokynů pro vaše nástroje:

  1. Stisknutím klávesy F5 spusťte aplikaci s laděním nebo stisknutím Klávesy Ctrl + F5 spusťte aplikaci bez ladění.

  2. Zkopírujte adresu URL z adresního řádku, otevřete jinou instanci nebo kartu prohlížeče a vložte ji do adresního řádku.

  3. Zvolte některý z prohlížečů, zadejte název a zprávu a vyberte tlačítko pro odeslání zprávy. Název a zpráva se okamžitě zobrazí na obou stránkách:

    SignalR Blazor Ukázková aplikace otevřená ve dvou oknech prohlížeče zobrazující vyměněné zprávy.

    Uvozovky: StarÍr VI: The Undiscovered Country © 1991 Paramount

Další kroky

V tomto kurzu jste se naučili:

  • Vytvoření Blazor projektu
  • Přidání SignalR klientské knihovny
  • Přidání SignalR centra
  • Přidání SignalR služeb a koncového bodu pro SignalR centrum
  • Přidání Razor kódu komponenty pro chat

Další informace o vytváření Blazor aplikací najdete v Blazor dokumentaci:

Úvod do ASP.NET Core Blazor Ověřování pomocí tokenu Bearer Identity pomocí serveru, protokolu WebSocket a Server-Sent událostí

Další zdroje informací