ASP.NET Core: Sử dụng ASP.NET Core SignalR với Blazor
Bài hướng dẫn này cung cấp trải nghiệm làm việc cơ bản để xây dựng ứng dụng thời gian thực bằng SignalR với Blazor. Bài viết này hữu ích cho các nhà phát triển đã quen thuộc với SignalR và đang tìm hiểu cách sử dụng SignalR trong ứng dụng Blazor. Để biết hướng dẫn chi tiết về khung SignalR và Blazor, hãy xem bộ tài liệu tham khảo sau đây và tài liệu API:
Mục tiêu bài hướng dẫn:
- Tạo ứng dụng Blazor
- Thêm thư viện máy khách SignalR
- Thêm một hub SignalR
- Thêm dịch vụ SignalR và điểm cuối cho hub SignalR
- Thêm mã thành phần Razor để trò chuyện
Khi kết thúc hướng dẫn này, bạn sẽ có một ứng dụng trò chuyện đang hoạt động.
Điều kiện tiên quyết
Visual Studio 2022 trở lên với ASP.NET và khối lượng công việc phát triển web.
Ứng dụng mẫu
Không cần tải xuống ứng dụng trò chuyện mẫu của hướng dẫn cho hướng dẫn này. Ứng dụng mẫu là ứng dụng cuối cùng, hoạt động được tạo ra bằng cách làm theo các bước của hướng dẫn này.
Tạo ứng dụng Blazor Server
Thực hiện theo các hướng dẫn cho sự lựa chọn của bạn về công cụ:
Lưu ý
Bắt buộc phải có Visual Studio 2022 trở lên và .NET Core SDK 6.0.0 trở lên.
Tạo một dự án mới.
Chọn mẫu Blazor Server App. Chọn Next.
Nhập BlazorServerSignalRApp vào trường Project name. Xác nhận entry Location là chính xác hoặc cung cấp vị trí cho dự án. Chọn Next.
Chọn Create.
Thêm thư viện máy khách SignalR
Trong Solution Explorer, bấm chuột phải vào dự án BlazorServerSignalRApp và chọn Manage NuGet Packages.
Trong hộp thoại Manage NuGet Packages, hãy xác nhận rằng Package source được đặt thành nuget.org.
Với Browse được chọn, hãy nhập Microsoft.AspNetCore.SignalR.Client vào hộp tìm kiếm.
Trong kết quả tìm kiếm, chọn gói Microsoft.AspNetCore.SignalR.Client. Đặt phiên bản phù hợp với framework dùng chung của ứng dụng. Chọn Install.
Nếu hộp thoại Preview Changes xuất hiện, hãy chọn OK.
Nếu hộp thoại License Acceptance xuất hiện, hãy chọn I Accept nếu bạn đồng ý với các điều khoản của giấy phép.
Thêm một hub SignalR
Tạo một thư mục có tên Hubs và thêm lớp ChatHub như sau (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);
}
}
Thêm dịch vụ và điểm cuối cho hub SignalR
Mở file Program.cs ra.
Thêm các namespace cho Microsoft.AspNetCore.ResponseCompression và ChatHub lớp vào đầu tệp:
using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;
Thêm các dịch vụ Response Compression Middleware:
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Sử dụng Response Compression Middleware ở đầu cấu hình của quy trình xử lý:
app.UseResponseCompression();
Giữa các điểm cuối để ánh xạ hub Blazor và dự phòng phía máy khách, hãy thêm một điểm cuối cho hub ngay sau dòng app.MapBlazorHub();:
app.MapHub<ChatHub>("/chathub");
Thêm code thành phần Razor cho phần chat
Mở file Pages/Index.razor ra.
Thay thế đánh dấu bằng đoạn mã sau:
@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();
}
}
}
Lưu ý
Vô hiệu hóa Response Compression Middleware trong môi trường Development khi sử dụng Hot Reloaded. Để biết thêm thông tin, hãy xem hướng dẫn ASP.NET Core Blazor SignalR.
Chạy ứng dụng
Thực hiện theo các hướng dẫn cho công cụ của bạn:
Nhấn F5 để chạy ứng dụng có gỡ lỗi hoặc Ctrl+ F5 (Windows)/ ⌘+ F5 (macOS) để chạy ứng dụng mà không cần gỡ lỗi.
Sao chép URL từ thanh địa chỉ, mở một phiên bản hoặc tab trình duyệt khác và dán URL vào thanh địa chỉ.
Chọn một trong hai trình duyệt, nhập tên và tin nhắn, rồi chọn nút để gửi tin nhắn. Tên và tin nhắn được hiển thị trên cả hai trang ngay lập tức:
Trích dẫn: Star Trek VI: Đất nước chưa được khám phá ©1991 Paramount
Bước tiếp theo
Trong hướng dẫn này, bạn đã học được:
- Tạo ứng dụng Blazor
- Thêm thư viện máy khách SignalR
- Thêm một hub SignalR
- Thêm dịch vụ SignalR và điểm cuối cho hub SignalR
- Thêm mã thành phần Razor để trò chuyện
Để biết hướng dẫn chi tiết về các framework SignalR và Blazor, hãy xem các bộ tài liệu tham khảo sau:
Tổng quan về ASP.NET Core SignalR ASP.NET Core Blazor
Tài nguyên bổ sung
- Xác thực mã thông báo mang với Máy chủ nhận dạng, WebSockets và Sự kiện do máy chủ gửi
- Bảo mật một hub SignalR trong các ứng dụng Blazor WebAssembly được lưu trữ
- Đàm phán nguồn gốc SignalR để xác thực
- Cấu hình SignalR
- Gỡ lỗi ASP.NET Core Blazor WebAssugging
- Hướng dẫn giảm thiểu mối đe dọa cho ASP.NET Core Blazor Server
- Kho lưu trữ GitHub mẫu Blazor (
dotnet/blazor-samples)