提高生产力不仅是关于提高工作效率，更是关于如何用更少的时间做更多的事情。Blazor Server 结合 SignalR 技术，为开发者提供了一种实现实时 Web 应用的强大组合。本文将以随笔的形式，探讨如何利用 Blazor Server 和 SignalR 构建实时 Web 应用，并通过具体的代码示例展示这一过程。
首先，我们需要创建一个 Blazor Server 应用。打开 Visual Studio，新建项目，选择 Blazor Server App 模板，并命名为 RealTimeBlazorApp。这样我们就有了一个基本的 Blazor Server 应用框架。
添加 SignalR 支持
为了让 Blazor 应用具备实时通信能力，我们需要引入 SignalR。在项目中，右键点击 RealTimeBlazorApp，选择 Manage NuGet Packages，搜索并安装 Microsoft.AspNetCore.SignalR.Client 包。
创建 Hub
接下来，我们需要创建一个 SignalR Hub，它将作为客户端与服务器之间通信的中介。在 RealTimeBlazorApp.Server 项目下的 Hubs 文件夹中创建一个名为 ChatHub 的类：
using Microsoft.AspNetCore.SignalR;
namespace RealTimeBlazorApp.Server.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}
这里定义了一个 SendMessage 方法，当客户端调用此方法时，它会广播给所有连接到该 Hub 的客户端。
配置 Startup
为了让 SignalR Hub 能够工作，我们需要在 Startup.cs 中配置服务：
public void ConfigureServices(IServiceCollection services)
{
services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(
Configuration.GetConnectionString("DefaultConnection")));
services.AddDatabaseDeveloperPageExceptionFilter();
services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
.AddEntityFrameworkStores<ApplicationDbContext>();
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSignalR(); // 添加 SignalR 服务
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBlazorDebugging();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
endpoints.MapHub<ChatHub>("/chatHub"); // 映射 Hub
});
}
创建 Blazor 组件
接下来，我们需要创建一个 Blazor 组件来处理客户端与 Hub 的通信。在 RealTimeBlazorApp.Client 项目下的 Pages 文件夹中创建一个名为 Chat.razor 的文件：
@page "/chat"
@inject NavigationManager NavManager
<h1>Real Time Chat</h1>
<div>
<input @bind-value="UserName" placeholder="Enter your name" />
<input @bind-value="Message" placeholder="Type a message" />
<button @onclick="Send">Send</button>
</div>
<ul>
@foreach (var msg in Messages)
{
<li>@msg</li>
}
</ul>
@code {
private string UserName { get; set; }
private string Message { get; set; }
private List<string> Messages { get; set; } = new List<string>();
private HubConnection _hubConnection;
protected override async Task OnInitializedAsync()
{
_hubConnection = new HubConnectionBuilder()
.WithUrl(NavManager.ToAbsoluteUri("/chatHub"))
.Build();
_hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
{
Messages.Add($"{user}: {message}");
StateHasChanged();
});
await _hubConnection.StartAsync();
}
private async Task Send()
{
if (!string.IsNullOrEmpty(UserName) && !string.IsNullOrEmpty(Message))
{
await _hubConnection.InvokeAsync("SendMessage", UserName, Message);
Message = string.Empty;
}
}
protected override async Task OnDisposingAsync()
{
if (_hubConnection != null)
{
await _hubConnection.StopAsync();
_hubConnection.DisposeAsync();
}
await base.OnDisposingAsync();
}
}
测试应用
现在，我们已经完成了所有必要的配置，可以运行应用并测试实时通信功能了。按下 F5 启动项目，打开多个浏览器窗口或标签页，尝试发送消息。你会看到消息会实时地出现在所有的客户端上。
总结
通过上述步骤，我们展示了如何使用 Blazor Server 和 SignalR 构建一个实时 Web 应用。从创建项目到配置 SignalR Hub，再到编写 Blazor 组件以实现客户端与服务器之间的实时通信，每个环节都体现了如何利用这些技术来提高生产力。
Blazor 和 SignalR 的结合不仅简化了实时应用的开发，还使得 C# 开发者能够在前后端之间保持一致的编程体验。希望本文提供的示例代码和技术指南能够帮助你在实际项目中更好地应用这些技术，构建出更加高效和响应迅速的 Web 应用。
实时 Web 应用已经成为现代互联网不可或缺的一部分，无论是社交应用、协作工具还是在线游戏，都需要实时通信的支持。Blazor 和 SignalR 的组合为我们提供了一个强大且易于使用的解决方案，让实时应用的开发变得更加简单和高效。
