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.org
hodnotu .
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:
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.org
hodnotu .
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:
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.org
hodnotu .
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.org
hodnotu .
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:
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
- Ověřování nosných tokenů pomocí Identity serveru, webSocketů a událostí odeslaných serverem
- SignalR Zabezpečení centra v Blazor WebAssembly aplikacích
- SignalR vyjednávání mezi zdroji pro ověřování
- SignalR Konfigurace
- Ladění aplikací ASP.NET Core Blazor
- Pokyny ke zmírnění hrozeb pro vykreslování na straně statického serveru ASP.NET Core Blazor
- Pokyny ke zmírnění hrozeb pro interaktivní vykreslování na straně serveru ASP.NET Core Blazor
- Blazorukázky úložiště GitHub () (
dotnet/blazor-samples
postup stažení)
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat Problémy GitHubu jako mechanismus zpětné vazby pro obsah a nahradíme ho novým systémem zpětné vazby. Další informace najdete tady:Odeslat a zobrazit názory pro