文章
文章用户教程圈子网址导航
ruanzhu

结合使用 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

Blazor

什么是 Blazor？

2022-8-17 13:40:19

ruanzhu
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

  • 51Aspx公众号

  • 企业微信客服

返回顶部