Menggunakan ASP.NET Core SignalR dengan Blazor
Catatan
Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.
Penting
Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.
Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.
Tutorial ini memberikan pengalaman kerja dasar untuk membangun aplikasi real-time menggunakan SignalR dengan Blazor. Artikel ini berguna bagi pengembang yang sudah terbiasa SignalR dan berusaha memahami cara menggunakan SignalR dalam Blazor aplikasi. Untuk panduan terperinci tentang SignalR kerangka kerja dan Blazor , lihat kumpulan dokumentasi referensi berikut dan dokumentasi API:
Pelajari cara:
- Membuat Blazor aplikasi
- SignalR Menambahkan pustaka klien
- SignalR Menambahkan hub
- Menambahkan SignalR layanan dan titik akhir untuk SignalR hub
- Razor Menambahkan kode komponen untuk obrolan
Di akhir tutorial ini, Anda akan memiliki aplikasi obrolan yang berfungsi.
Prasyarat
Visual Studio 2022 atau yang lebih baru dengan beban kerja pengembangan ASP.NET dan web
Aplikasi sampel
Mengunduh contoh aplikasi obrolan tutorial tidak diperlukan untuk tutorial ini. Aplikasi sampel adalah aplikasi kerja akhir yang diproduksi dengan mengikuti langkah-langkah tutorial ini.
Melihat atau mengunduh kode sampel (cara mengunduh)
Membuat Blazor Aplikasi Web
Ikuti panduan untuk pilihan alat Anda:
Catatan
Visual Studio 2022 atau yang lebih baru dan .NET Core SDK 8.0.0 atau yang lebih baru diperlukan.
Buat proyek baru.
Pilih Blazor templat Aplikasi Web. Pilih Selanjutnya.
Ketik BlazorSignalRApp di bidang Nama proyek. Konfirmasikan entri Lokasi sudah benar atau sediakan lokasi untuk proyek. Pilih Selanjutnya.
Konfirmasikan Kerangka Kerja adalah .NET 8 atau yang lebih baru. Pilih Buat.
SignalR Menambahkan pustaka klien
Di Penjelajah Solusi, klik BlazorSignalRApp kanan proyek dan pilih Kelola Paket NuGet.
Dalam dialog Kelola Paket NuGet, konfirmasikan bahwa sumber Paket diatur ke nuget.org.
Dengan Telusuri dipilih, ketik Microsoft.AspNetCore.SignalR.Client di kotak pencarian.
Dalam hasil pencarian, pilih rilis Microsoft.AspNetCore.SignalR.Client terbaru paket. Pilih Instal.
Jika dialog Pratinjau Perubahan muncul, pilih OK.
Jika dialog Penerimaan Lisensi muncul, pilih Saya Terima jika Anda setuju dengan persyaratan lisensi.
SignalR Menambahkan hub
Buat Hubs folder (jamak) dan tambahkan kelas berikut ChatHub (Hubs/ChatHub.cs) ke akar aplikasi:
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);
}
}
Menambahkan layanan dan titik akhir untuk SignalR hub
Buka file Program.
Tambahkan namespace layanan untuk Microsoft.AspNetCore.ResponseCompression dan ChatHub kelas ke bagian atas file:
using Microsoft.AspNetCore.ResponseCompression;
using BlazorSignalRApp.Hubs;
Tambahkan layanan Middleware Kompresi Respons:
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Gunakan Middleware Kompresi Respons di bagian atas konfigurasi alur pemrosesan:
app.UseResponseCompression();
Tambahkan titik akhir untuk hub segera setelah garis yang memetakan Razor komponen (app.MapRazorComponents<T>()):
app.MapHub<ChatHub>("/chathub");
Menambahkan Razor kode komponen untuk obrolan
Buka file Components/Pages/Home.razor.
Ganti markup dengan kode berikut:
@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();
}
}
}
Catatan
Nonaktifkan Middleware Kompresi Respons di Development lingkungan saat menggunakan Hot Reload. Untuk informasi selengkapnya, lihat panduan ASP.NET CoreBlazorSignalR.
Menjalankan aplikasi
Ikuti panduan untuk alat Anda:
Tekan F5 untuk menjalankan aplikasi dengan penelusuran kesalahan atau Ctrl+F5 (Windows)/⌘+F5 (macOS) untuk menjalankan aplikasi tanpa penelusuran kesalahan.
Salin URL dari bilah alamat, buka instans atau tab browser lain, dan tempelkan URL di bilah alamat.
Pilih salah satu browser, masukkan nama dan pesan, dan pilih tombol untuk mengirim pesan. Nama dan pesan ditampilkan di kedua halaman secara instan:
Kutipan: Star Trek VI: The Undiscovered Country ©1991 Paramount
Pengalaman yang dihosting Blazor WebAssembly
Membuat aplikasi
Ikuti panduan untuk pilihan alat Anda untuk membuat aplikasi yang dihosting Blazor WebAssembly :
Catatan
Visual Studio 2022 atau yang lebih baru dan .NET Core SDK 6.0.0 atau yang lebih baru diperlukan.
Buat proyek baru.
Blazor WebAssembly Pilih templat Aplikasi. Pilih Selanjutnya.
Ketik BlazorWebAssemblySignalRApp di bidang Nama proyek. Konfirmasikan entri Lokasi sudah benar atau sediakan lokasi untuk proyek. Pilih Selanjutnya.
Dalam dialog Informasi tambahan, pilih kotak centang ASP.NET Core Hosted.
Pilih Buat.
Konfirmasikan bahwa aplikasi yang dihosting Blazor WebAssembly dibuat: Di Penjelajah Solusi, konfirmasikan keberadaan Client proyek dan Server proyek. Jika kedua proyek tidak ada, mulai lagi dan konfirmasi pilihan kotak centang ASP.NET Core Hosted sebelum memilih Buat.
SignalR Menambahkan pustaka klien
Di Penjelajah Solusi, klik BlazorWebAssemblySignalRApp.Client kanan proyek dan pilih Kelola Paket NuGet.
Dalam dialog Kelola Paket NuGet, konfirmasikan bahwa sumber Paket diatur ke nuget.org.
Dengan Telusuri dipilih, ketik Microsoft.AspNetCore.SignalR.Client di kotak pencarian.
Di hasil pencarian, pilih Microsoft.AspNetCore.SignalR.Client paket. Atur versi agar sesuai dengan kerangka kerja bersama aplikasi. Pilih Instal.
Jika dialog Pratinjau Perubahan muncul, pilih OK.
Jika dialog Penerimaan Lisensi muncul, pilih Saya Terima jika Anda setuju dengan persyaratan lisensi.
SignalR Menambahkan hub
BlazorWebAssemblySignalRApp.Server Dalam proyek, buat Hubs folder (jamak) dan tambahkan kelas berikut ChatHub (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);
}
}
}
Menambahkan layanan dan titik akhir untuk SignalR hub
BlazorWebAssemblySignalRApp.Server Dalam proyek, buka Program.cs file .
Tambahkan namespace untuk ChatHub kelas ke bagian atas file:
using BlazorWebAssemblySignalRApp.Server.Hubs;
Menambahkan SignalR dan Merespons layanan Middleware Kompresi:
builder.Services.AddSignalR();
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Gunakan Middleware Kompresi Respons di bagian atas konfigurasi alur pemrosesan segera setelah baris yang membangun aplikasi:
app.UseResponseCompression();
Antara titik akhir untuk pengontrol dan fallback sisi klien, tambahkan titik akhir untuk hub. Segera setelah baris app.MapControllers();, tambahkan baris berikut:
app.MapHub<ChatHub>("/chathub");
BlazorWebAssemblySignalRApp.Server Dalam proyek, buka Startup.cs file .
Tambahkan namespace untuk ChatHub kelas ke bagian atas file:
using BlazorWebAssemblySignalRApp.Server.Hubs;
Menambahkan SignalR dan Merespons layanan Middleware Kompresi:
services.AddSignalR();
services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Gunakan Middleware Kompresi Respons di bagian atas konfigurasi alur pemrosesan:
app.UseResponseCompression();
Antara titik akhir untuk pengontrol dan fallback sisi klien, tambahkan titik akhir untuk hub segera setelah baris endpoints.MapControllers();:
endpoints.MapHub<ChatHub>("/chathub");
Menambahkan Razor kode komponen untuk obrolan
BlazorWebAssemblySignalRApp.Client Dalam proyek, buka Pages/Index.razor file .
Ganti markup dengan kode berikut:
@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();
}
}
Catatan
Nonaktifkan Middleware Kompresi Respons di Development lingkungan saat menggunakan Hot Reload. Untuk informasi selengkapnya, lihat panduan ASP.NET CoreBlazorSignalR.
Menjalankan aplikasi
Ikuti panduan untuk alat Anda:
Di Penjelajah Solusi, pilih BlazorWebAssemblySignalRApp.Server proyek. Tekan F5 untuk menjalankan aplikasi dengan penelusuran kesalahan atau Ctrl+F5 (Windows)/⌘+F5 (macOS) untuk menjalankan aplikasi tanpa penelusuran kesalahan.
Penting
Saat menjalankan aplikasi yang dihosting, jalankan Blazor WebAssembly aplikasi dari proyek solusiServer .
Google Chrome atau Microsoft Edge harus menjadi browser yang dipilih untuk sesi penelusuran kesalahan.
Jika aplikasi gagal dimulai di browser:
- Di konsol .NET, konfirmasikan bahwa solusi berjalan dari proyek ""Server.
- Refresh browser menggunakan tombol muat ulang browser.
Salin URL dari bilah alamat, buka instans atau tab browser lain, dan tempelkan URL di bilah alamat.
Pilih salah satu browser, masukkan nama dan pesan, dan pilih tombol untuk mengirim pesan. Nama dan pesan ditampilkan di kedua halaman secara instan:
Kutipan: Star Trek VI: The Undiscovered Country ©1991 Paramount
Blazor Server Pengalaman
Membuat aplikasi
Ikuti panduan untuk pilihan alat Anda untuk membuat Blazor Server aplikasi:
Catatan
Visual Studio 2022 atau yang lebih baru dan .NET Core SDK 6.0.0 atau yang lebih baru diperlukan.
Buat proyek baru.
Pilih Blazor Server templat Aplikasi . Pilih Selanjutnya.
Ketik BlazorServerSignalRApp di bidang Nama proyek. Konfirmasikan entri Lokasi sudah benar atau sediakan lokasi untuk proyek. Pilih Selanjutnya.
Pilih Buat.
SignalR Menambahkan pustaka klien
Di Penjelajah Solusi, klik BlazorServerSignalRApp kanan proyek dan pilih Kelola Paket NuGet.
Dalam dialog Kelola Paket NuGet, konfirmasikan bahwa sumber Paket diatur ke nuget.org.
Dengan Telusuri dipilih, ketik Microsoft.AspNetCore.SignalR.Client di kotak pencarian.
Di hasil pencarian, pilih Microsoft.AspNetCore.SignalR.Client paket. Atur versi agar sesuai dengan kerangka kerja bersama aplikasi. Pilih Instal.
Jika dialog Pratinjau Perubahan muncul, pilih OK.
Jika dialog Penerimaan Lisensi muncul, pilih Saya Terima jika Anda setuju dengan persyaratan lisensi.
Tambahkan paket System.Text.Encodings.Web
Bagian ini hanya berlaku untuk aplikasi untuk ASP.NET Core versi 3.x.
Karena masalah resolusi paket saat menggunakan System.Text.Json 5.x di aplikasi ASP.NET Core 3.x, proyek memerlukan referensi paket untuk System.Text.Encodings.Web. Masalah yang mendasar diselesaikan dalam rilis patch dan didukung ke ASP.NET Core 5.0. Untuk informasi selengkapnya, lihat System.Text.Json mendefinisikan netcoreapp3.0 tanpa dependensi (dotnet/runtime #45560).
Untuk menambahkan System.Text.Encodings.Web ke proyek, ikuti panduan untuk pilihan alat Anda:
Di Penjelajah Solusi, klik BlazorServerSignalRApp kanan proyek dan pilih Kelola Paket NuGet.
Dalam dialog Kelola Paket NuGet, konfirmasikan bahwa sumber Paket diatur ke nuget.org.
Dengan Telusuri dipilih, ketik System.Text.Encodings.Web di kotak pencarian.
Di hasil pencarian, pilih System.Text.Encodings.Web paket. Pilih versi paket yang cocok dengan kerangka kerja bersama yang digunakan. Pilih Instal.
Jika dialog Pratinjau Perubahan muncul, pilih OK.
Jika dialog Penerimaan Lisensi muncul, pilih Saya Terima jika Anda setuju dengan persyaratan lisensi.
SignalR Menambahkan hub
Buat Hubs folder (jamak) dan tambahkan kelas berikut ChatHub (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);
}
}
}
Menambahkan layanan dan titik akhir untuk SignalR hub
Buka file Program.cs.
Tambahkan namespace layanan untuk Microsoft.AspNetCore.ResponseCompression dan ChatHub kelas ke bagian atas file:
using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;
Tambahkan layanan Middleware Kompresi Respons:
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Gunakan Middleware Kompresi Respons di bagian atas konfigurasi alur pemrosesan:
app.UseResponseCompression();
Antara titik akhir untuk memetakan Blazor hub dan fallback sisi klien, tambahkan titik akhir untuk hub segera setelah baris app.MapBlazorHub();:
app.MapHub<ChatHub>("/chathub");
Buka file Startup.cs.
Tambahkan namespace layanan untuk Microsoft.AspNetCore.ResponseCompression dan ChatHub kelas ke bagian atas file:
using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;
Tambahkan layanan Middleware Kompresi Respons:
services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Gunakan Middleware Kompresi Respons di bagian atas konfigurasi alur pemrosesan:
app.UseResponseCompression();
Antara titik akhir untuk memetakan Blazor hub dan fallback sisi klien, tambahkan titik akhir untuk hub segera setelah baris endpoints.MapBlazorHub();:
endpoints.MapHub<ChatHub>("/chathub");
Menambahkan Razor kode komponen untuk obrolan
Buka file Pages/Index.razor.
Ganti markup dengan kode berikut:
@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();
}
}
Catatan
Nonaktifkan Middleware Kompresi Respons di Development lingkungan saat menggunakan Hot Reload. Untuk informasi selengkapnya, lihat panduan ASP.NET CoreBlazorSignalR.
Menjalankan aplikasi
Ikuti panduan untuk alat Anda:
Tekan F5 untuk menjalankan aplikasi dengan penelusuran kesalahan atau Ctrl+F5 (Windows)/⌘+F5 (macOS) untuk menjalankan aplikasi tanpa penelusuran kesalahan.
Salin URL dari bilah alamat, buka instans atau tab browser lain, dan tempelkan URL di bilah alamat.
Pilih salah satu browser, masukkan nama dan pesan, dan pilih tombol untuk mengirim pesan. Nama dan pesan ditampilkan di kedua halaman secara instan:
Kutipan: Star Trek VI: The Undiscovered Country ©1991 Paramount
Langkah berikutnya
Dalam tutorial ini, Anda mempelajari cara:
- Membuat Blazor aplikasi
- SignalR Menambahkan pustaka klien
- SignalR Menambahkan hub
- Menambahkan SignalR layanan dan titik akhir untuk SignalR hub
- Razor Menambahkan kode komponen untuk obrolan
Untuk panduan terperinci tentang SignalR kerangka kerja dan Blazor , lihat kumpulan dokumentasi referensi berikut:
Sumber Daya Tambahan:
- Autentikasi token pembawa dengan Identity Peristiwa Server, WebSockets, dan Server-Sent
- SignalR Mengamankan hub di Blazor WebAssembly aplikasi
- SignalR negosiasi lintas asal untuk autentikasi
- SignalR Konfigurasi
- Debug aplikasi ASP.NET Core Blazor
- Panduan mitigasi ancaman untuk ASP.NET Penyajian sisi server statis Inti Blazor
- Panduan mitigasi ancaman untuk penyajian sisi server interaktif ASP.NET Core Blazor
- Blazorsampel repositori GitHub () (
dotnet/blazor-samplescara mengunduh)
ASP.NET Core
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk