Použití ASP.NET Core SignalR s Blazor

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete v této verzi ASP.NET Core 8.0.

Tento kurz poskytuje základní pracovní prostředí pro vytvoření aplikace v Blazorreálném čase pomocí SignalR . Tento článek je užitečný pro vývojáře, kteří už znají SignalR a chtějí pochopit, jak se v aplikaci používají SignalRBlazor . Podrobné pokyny k architekturám SignalR a Blazor architekturám najdete v následujících referenčních sadách dokumentace a dokumentaci k rozhraní API:

Naučte se:

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

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

Požadavky

Visual Studio 2022 nebo novější s úlohou vývoje pro ASP.NET a web

Ukázková aplikace

Stažení ukázkové chatovací aplikace kurzu není pro účely tohoto kurzu potřeba. Ukázková aplikace je konečná funkční aplikace vytvořená podle kroků tohoto kurzu.

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

Vytvoření Blazor webové aplikace

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

Poznámka:

Vyžaduje se Sada Visual Studio 2022 nebo novější a .NET Core SDK 8.0.0 nebo novější.

Vytvoření nového projektu

Blazor Vyberte šablonu webové aplikace. Vyberte Další.

Zadejte BlazorSignalRApp pole Název projektu. Ověřte, že je položka Umístění správná, nebo zadejte umístění projektu. Vyberte Další.

Ověřte, že je rozhraní .NET 8 nebo novější. Vyberte Vytvořit.

SignalR Přidání klientské knihovny

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

V dialogovém okně Spravovat balíčky NuGet ověřte, že je zdroj balíčku nastavený na nuget.orghodnotu .

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

Ve výsledcích hledání vyberte nejnovější verzi Microsoft.AspNetCore.SignalR.Client balíčku. Vyberte volbu Instalovat.

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

Pokud se zobrazí dialogové okno Souhlas s licencí , vyberte Možnost Přijmout , pokud souhlasíte s licenčními podmínkami.

SignalR Přidání centra

Hubs Vytvořte složku (v množném čísle) a přidejte následující ChatHub třídu (Hubs/ChatHub.cs) do kořenového adresáře aplikace:

using Microsoft.AspNetCore.SignalR;

namespace BlazorSignalRApp.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

Otevřete soubor Program.

Přidejte obory názvů pro Microsoft.AspNetCore.ResponseCompression a ChatHub třídu do horní části souboru:

using Microsoft.AspNetCore.ResponseCompression;
using BlazorSignalRApp.Hubs;

Přidání služeb middlewaru pro kompresi odpovědí:

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

Použijte middleware pro kompresi odpovědí v horní části konfigurace kanálu zpracování:

app.UseResponseCompression();

Přidejte koncový bod centra hned za čáru, která mapuje Razor komponenty (app.MapRazorComponents<T>()):

app.MapHub<ChatHub>("/chathub");

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

Otevřete soubor Components/Pages/Home.razor.

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

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

<PageTitle>Home</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(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            InvokeAsync(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();
        }
    }
}

Poznámka:

Zakažte middleware komprese odpovědí v Development prostředí při použití Opětovné načítání za provozu. Další informace najdete v pokynech k ASP.NET CoreBlazorSignalR.

Spustit aplikaci

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

Stisknutím klávesy F5 spusťte aplikaci s laděním nebo ctrl+F5 (Windows)/+F5 (macOS) a spusťte aplikaci bez ladění.

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

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

SignalRBlazor sample app open in two browser windows showing exchanged messages.

Citace: Star Trek VI: Undiscovered Country ©1991 Paramount

Hostované Blazor WebAssembly prostředí

Vytvoření aplikace

Při vytváření hostované Blazor WebAssembly aplikace postupujte podle pokynů pro váš 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ší.

Vytvoření nového projektu

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

Zadejte BlazorWebAssemblySignalRApp pole Název projektu. Ověřte, že je položka Umístění správná, nebo zadejte umístění projektu. Vyberte Další.

V dialogovém okně Další informace zaškrtněte políčko ASP.NET Hostované jádro.

Vyberte Vytvořit.

Ověřte, že byla vytvořena hostovaná Blazor WebAssembly aplikace: V Průzkumník řešení potvrďte přítomnost Client projektu a Server projektu. Pokud nejsou k dispozici dva projekty, začněte znovu a potvrďte výběr zaškrtávacího políčka ASP.NET Core hostované před výběrem možnosti Vytvořit.

SignalR Přidání klientské knihovny

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

V dialogovém okně Spravovat balíčky NuGet ověřte, že je zdroj balíčku nastavený na nuget.orghodnotu .

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

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

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

Pokud se zobrazí dialogové okno Souhlas s licencí , vyberte Možnost Přijmout , pokud souhlasíte s licenčními podmínkami.

SignalR Přidání centra

BlazorWebAssemblySignalRApp.Server V projektu vytvořte Hubs složku (v množném čísle) a přidejte následující ChatHub třídu (Hubs/ChatHub.cs):

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

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

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

using BlazorWebAssemblySignalRApp.Server.Hubs;

Add SignalR and Response Compression Middleware services:

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

Použijte middleware pro kompresi odpovědí v horní části konfigurace kanálu zpracování hned za řádkem, který sestaví aplikaci:

app.UseResponseCompression();

Mezi koncovými body pro kontrolery a náhradním klientem přidejte koncový bod pro centrum. Bezprostředně za řádek app.MapControllers();přidejte následující řádek:

app.MapHub<ChatHub>("/chathub");

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

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

using BlazorWebAssemblySignalRApp.Server.Hubs;

Add SignalR and Response Compression Middleware services:

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

Použijte middleware pro kompresi odpovědí v horní části konfigurace kanálu zpracování:

app.UseResponseCompression();

Mezi koncovými body pro kontrolery a záložním umístěním na straně klienta přidejte koncový bod centra hned za řádek endpoints.MapControllers();:

endpoints.MapHub<ChatHub>("/chathub");

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

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

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

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@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(Navigation.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();
        }
    }
}
@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@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(Navigation.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();
        }
    }
}
@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();
        }
    }
}
@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();
    }
}

Poznámka:

Zakažte middleware komprese odpovědí v Development prostředí při použití Opětovné načítání za provozu. Další informace najdete v pokynech k ASP.NET CoreBlazorSignalR.

Spustit aplikaci

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

V Průzkumník řešení vyberte BlazorWebAssemblySignalRApp.Server projekt. Stisknutím klávesy F5 spusťte aplikaci s laděním nebo ctrl+F5 (Windows)/+F5 (macOS) a spusťte aplikaci bez ladění.

Důležité

Při spouštění hostované Blazor WebAssembly aplikace spusťte aplikaci z projektu řešeníServer .

Google Chrome nebo Microsoft Edge musí být vybraným prohlížečem pro relaci ladění.

Pokud se aplikaci nepodaří spustit v prohlížeči:

  • V konzole .NET ověřte, že řešení běží z projektu "Server".
  • Aktualizujte prohlížeč pomocí tlačítka pro opětovné načtení prohlížeče.

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

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

SignalRBlazor sample app open in two browser windows showing exchanged messages.

Citace: Star Trek VI: Undiscovered Country ©1991 Paramount

Blazor Server Zkušenosti

Vytvoření aplikace

Při vytváření Blazor Server aplikace postupujte podle pokynů pro váš 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ší.

Vytvoření nového projektu

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

Zadejte BlazorServerSignalRApp pole Název projektu. Ověřte, že je položka Umístění správná, nebo zadejte umístění projektu. Vyberte Další.

Vyberte Vytvořit.

SignalR Přidání klientské knihovny

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

V dialogovém okně Spravovat balíčky NuGet ověřte, že je zdroj balíčku nastavený na nuget.orghodnotu .

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

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

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

Pokud se zobrazí dialogové okno Souhlas s licencí , vyberte Možnost Přijmout , pokud souhlasíte s licenčními podmínkami.

Přidání balíčku System.Text.Encodings.Web

Tato část se týká jenom aplikací pro ASP.NET Core verze 3.x.

Kvůli problému s řeš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 .System.Text.Encodings.Web Základní problém byl vyřešen ve verzi opravy a backportován do ASP.NET Core 5.0. Další informace najdete v tématu System.Text.Json definuje netcoreapp3.0 bez závislostí (dotnet/runtime #45560).

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

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

V dialogovém okně Spravovat balíčky NuGet ověřte, že je zdroj balíčku nastavený na nuget.orghodnotu .

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

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

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

Pokud se zobrazí dialogové okno Souhlas s licencí , vyberte Možnost Přijmout , pokud souhlasíte s licenčními podmínkami.

SignalR Přidání centra

Hubs Vytvořte složku (v množném čísle) a přidejte následující ChatHub třídu (Hubs/ChatHub.cs):

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

Otevřete soubor Program.cs.

Přidejte obory názvů pro Microsoft.AspNetCore.ResponseCompression a ChatHub třídu do horní části souboru:

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

Přidání služeb middlewaru pro kompresi odpovědí:

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

Použijte middleware pro kompresi odpovědí v horní části konfigurace kanálu zpracování:

app.UseResponseCompression();

Mezi koncové body pro mapování Blazor centra a náhradní lokality na straně klienta přidejte koncový bod centra hned za řádek app.MapBlazorHub();:

app.MapHub<ChatHub>("/chathub");

Otevřete soubor Startup.cs.

Přidejte obory názvů pro Microsoft.AspNetCore.ResponseCompression a ChatHub třídu do horní části souboru:

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

Přidání služeb middlewaru pro kompresi odpovědí:

services.AddResponseCompression(opts =>
{
   opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
         new[] { "application/octet-stream" });
});

Použijte middleware pro kompresi odpovědí v horní části konfigurace kanálu zpracování:

app.UseResponseCompression();

Mezi koncové body pro mapování Blazor centra a náhradní lokality na straně klienta přidejte koncový bod centra hned za řádek endpoints.MapBlazorHub();:

endpoints.MapHub<ChatHub>("/chathub");

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

Otevřete soubor Pages/Index.razor.

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

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@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(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            InvokeAsync(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();
        }
    }
}
@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@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(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            InvokeAsync(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();
        }
    }
}
@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);
            InvokeAsync(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();
        }
    }
}
@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);
            InvokeAsync(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();
    }
}

Poznámka:

Zakažte middleware komprese odpovědí v Development prostředí při použití Opětovné načítání za provozu. Další informace najdete v pokynech k ASP.NET CoreBlazorSignalR.

Spustit aplikaci

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

Stisknutím klávesy F5 spusťte aplikaci s laděním nebo ctrl+F5 (Windows)/+F5 (macOS) a spusťte aplikaci bez ladění.

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

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

SignalRBlazor sample app open in two browser windows showing exchanged messages.

Citace: Star Trek VI: Undiscovered Country ©1991 Paramount

Další kroky

V tomto kurzu jste se naučili, jak:

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

Podrobné pokyny k architekturám SignalR a Blazor architekturám najdete v následujících referenčních sadách dokumentace:

Další materiály