结合使用 ASP.NET Core SignalR 和 Blazor

本教程介绍结合使用 SignalR 和 Blazor 生成实时应用的基础知识。

了解如何:

  • 创建 Blazor 项目
  • 添加 SignalR 客户端库
  • 添加 SignalR 集线器
  • 添加 SignalR 服务和 SignalR 中心的终结点
  • 添加用于聊天的 Razor 组件代码

在本教程结束时,你将拥有一个正常运行的聊天应用。

先决条件

Visual Studio

具有“ASP.NET 和 Web 开发”工作负载的 Visual Studio 2022 或更高版本

.NET 6.0 SDK

Visual Studio Code

Visual Studio Code

用于 Visual Studio Code 的 C#(最新版本)

.NET 6.0 SDK

Visual Studio Code 说明使用用于 ASP.NET Core 的 .NET CLI 开发功能,如项目创建。 可在(macOS、Linux 或 Windows)上或在任何代码编辑器中遵循这些说明。 如果使用 Visual Studio Code 以外的其他内容,则可能需要进行少量更改。

Visual Studio for Mac

Visual Studio for Mac 2022 或更高版本:从 Visual Studio 中选择预览通道。 有关详细信息,请参阅安装 Visual Studio for Mac 的预览版本。

.NET 6.0 SDK

.NET Core CLI

.NET 6.0 SDK

示例应用

本教程不需要下载教程的示例聊天应用。 示例应用是按照本教程的步骤生成的最终工作应用。

查看或下载示例代码 https://github.com/dotnet/blazor-samples

创建 Blazor Server 应用

按照所选工具的指南进行操作:

Visual Studio

备注

需要 Visual Studio 2022 或更高版本以及 .NET Core SDK 6.0.0 或更高版本。
创建新项目。
选择“Blazor Server 应用”模板。 选择“下一步”。
在“项目名称”字段中键入 BlazorServerSignalRApp。 确认“位置”条目正确无误或为项目提供位置。 选择“下一步”。
选择“创建”。

Visual Studio Code

在命令行界面中执行以下命令:dotnet new blazorserver -o BlazorServerSignalRApp

-o|--output 选项为项目创建文件夹。 如果已为项目创建了文件夹,并在该文件夹中打开了命令行界面,那么请忽略用于创建项目的 -o|--output 选项和值。

在 Visual Studio Code 中打开应用的项目文件夹。

当显示添加资产以生成和调试应用的对话框时,选择“是”。 Visual Studio Code 会自动将生成的 launch.json 和 tasks.json 文件添加到 .vscode 文件夹中。 有关在 .vscode 文件夹中配置 VS Code 资产的信息(包括如何手动将文件添加到解决方案)

Visual Studio for Mac

安装最新版本的 Visual Studio for Mac,并执行以下步骤:

选择“文件”>“新建解决方案”或从“启动窗口”创建“新项目” 。

在边栏中,选择“Web 和控制台”>“应用”。

选择“Blazor Server 应用”模板。 选择“下一步”。

确认已将“身份验证”设置为“无身份验证”。 选择“下一步”。

在“项目名称”字段中,将应用命名为 BlazorServerSignalRApp。 选择“创建”。如果出现信任开发证书的提示,请信任证书并继续操作。 信任证书需要使用用户密码和密钥链密码。

通过导航到项目文件夹并打开项目的解决方案文件 (.sln) 打开项目。

.NET Core CLI

在命令行界面中执行以下命令:

dotnet new blazorserver -o BlazorServerSignalRApp

-o|--output 选项为项目创建文件夹。 如果已为项目创建了文件夹,并在该文件夹中打开了命令行界面,那么请忽略用于创建项目的 -o|--output 选项和值。

添加 SignalR 客户端库

Visual Studio

在“解决方案资源管理器”中,右键单击 BlazorServerSignalRApp 项目,然后选择“管理 NuGet 包” 。

在“管理 NuGet 包”对话框中,确认“包源”设置为“nuget.org” 。

选择“浏览”后,在搜索框中键入“Microsoft.AspNetCore.SignalR.Client”。

在搜索结果中,选择 Microsoft.AspNetCore.SignalR.Client 包。 将版本设置为与应用共享框架匹配的版本。 选择“安装” 。

如果出现“预览更改”对话框,则选择“确定”。

如果出现“许可证接受”对话框,如果你同意许可条款,请选择“我接受”。

Visual Studio Code

在“集成终端”(工具栏上的“视图”>“终端”)中,执行以下命令 :

dotnet add package Microsoft.AspNetCore.SignalR.Client

若要添加较早版本的包,请提供 --version {VERSION} 选项,其中 {VERSION} 占位符为要添加的包的版本。

Visual Studio for Mac

在“解决方案资源管理器”中,右键单击 BlazorServerSignalRApp 项目,然后选择“管理 NuGet 包” 。

在“管理 NuGet 包”对话框中,确认源下拉列表设置为“nuget.org”。

选择“浏览”后,在搜索框中键入“Microsoft.AspNetCore.SignalR.Client”。

在搜索结果中,选择 Microsoft.AspNetCore.SignalR.Client 包旁边的复选框。 将版本设置为与应用共享框架匹配的版本。 选择“添加包”。

出现“许可证接受”对话框时,如果你同意许可条款,请选择“接受”。

.NET Core CLI

在项目文件夹的命令行界面中执行以下命令:

dotnet add package Microsoft.AspNetCore.SignalR.Client

若要添加较早版本的包,请提供 --version {VERSION} 选项,其中 {VERSION} 占位符为要添加的包的版本。

添加 SignalR 集线器

创建 Hubs(复数)文件夹,并添加以下 ChatHub 类 (Hubs/ChatHub.cs):

using Microsoft.AspNetCore.SignalR;

namespace BlazorServerSignalRApp.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

为 SignalR 中心添加服务和终结点

打开 Program.cs 文件。

将 Microsoft.AspNetCore.ResponseCompression 和 ChatHub 类的命名空间添加到文件的顶部:

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

将响应压缩中间件服务添加到 Program.cs

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

在 Program.cs中:

  • 使用处理管道的配置顶部的“响应压缩中间件”。
  • 在用于映射 Blazor 中心的终结点和客户端回退终结点之间,为中心添加一个终结点:
app.MapHub<ChatHub>("/chathub");
app.UseResponseCompression();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

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

app.Run();

添加用于聊天的 Razor 组件代码

  1. 打开 Pages/Index.razor 文件。
  2. 将标记替换为以下代码:
@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@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(NavigationManager.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();
        }
    }
}

运行应用

按照工具的指南进行操作:

Visual Studio

按 F5 来运行应用并进行调试,或者按 Ctrl+F5 (Windows)/+F5 (macOS) 来运行应用但不调试。

从地址栏复制 URL,打开另一个浏览器实例或选项卡,并在地址栏中粘贴该 URL。

选择任一浏览器,输入名称和消息,然后选择按钮发送消息。 两个页面上立即显示名称和消息:

引文:Star Trek VI: The Undiscovered Country ©1991 Paramount

Visual Studio Code

按 F5 来运行应用并进行调试,或者按 Ctrl+F5 (Windows)/+F5 (macOS) 来运行应用但不调试。

从地址栏复制 URL,打开另一个浏览器实例或选项卡,并在地址栏中粘贴该 URL。

选择任一浏览器,输入名称和消息,然后选择按钮发送消息。 两个页面上立即显示名称和消息:

引文:Star Trek VI: The Undiscovered Country ©1991 Paramount

Visual Studio for Mac

按 + 来运行应用并进行调试,或者按 ++ 来运行应用但不调试。

从地址栏复制 URL,打开另一个浏览器实例或选项卡,并在地址栏中粘贴该 URL。

选择任一浏览器,输入名称和消息,然后选择按钮发送消息。 两个页面上立即显示名称和消息:

引文:Star Trek VI: The Undiscovered Country ©1991 Paramount

.NET Core CLI

在命令行界面中从项目文件夹执行以下命令:

dotnet run

从地址栏复制 URL,打开另一个浏览器实例或选项卡,并在地址栏中粘贴该 URL。

选择任一浏览器,输入名称和消息,然后选择按钮发送消息。 两个页面上立即显示名称和消息:

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

引文:Star Trek VI: The Undiscovered Country ©1991 Paramount

给TA打赏
共{{data.count}}人
人已打赏
Blazor

生成 Blazor 待办事项列表应用

2022-6-6 10:39:31

.NET

DDD分层架构的三种模式

2022-3-24 11:15:09

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索