结合使用 ASP.NET Core SignalR 和 Blazor

项目
2025-04-08

注意

此版本不是本文的最新版本。有关当前版本，请参阅 .NET 9 的本文版本。

警告

此版本的 ASP.NET Core 不再受支持。有关详细信息，请参阅 .NET 和 .NET Core 支持策略。有关当前发布版本，请参阅.NET 9 版本的本文。

重要

此信息与预发布产品相关，相应产品在商业发布之前可能会进行重大修改。 Microsoft 对此处提供的信息不提供任何明示或暗示的保证。

有关当前版本，请参阅 .NET 9 版本的本文。

本教程提供了使用 SignalR 和 Blazor 生成实时应用的基本工作经验。本文适用于已经熟悉 SignalR 并正在寻求了解如何在 SignalR 应用中使用 Blazor 的开发人员。有关 SignalR 和 Blazor 框架的详细指南，请参阅以下参考文档集和 API 文档：

了解如何：

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

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

先决条件

Visual Studio（最新预览版）与 ASP.NET 和 Web 开发工作负载

示例应用

本教程不需要下载教程的示例聊天应用。示例应用是按照本教程的步骤生成的最终工作应用。打开示例存储库时，打开计划面向的版本文件夹，找到名为 BlazorSignalRApp 的示例。

本教程不需要下载教程的示例聊天应用。示例应用是按照本教程的步骤生成的最终工作应用。打开示例存储库时，打开计划面向的版本文件夹，找到名为 BlazorWebAssemblySignalRApp 的示例。

查看或下载示例代码（如何下载）

创建 Blazor Web App

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

注意

需要 Visual Studio 2022 或更高版本以及 .NET Core SDK 8.0.0 或更高版本。

在 Visual Studio 中：

从启动窗口选择“创建新项目”，或者从菜单栏选择“文件”“新建”“项目”。>>
在“创建新项目”对话框中，从项目模板列表中选择“Blazor Web App”。选择“下一步”按钮。
在“配置新项目”对话框中，在“项目名称”字段中将项目命名为（包括匹配大写）。BlazorSignalRApp 使用这个确切的项目名称非常重要，可确保命名空间与从教程复制到要构建的应用中的代码匹配。
确认应用的位置是否合适。将“将解决方案和项目放在同一目录中”复选框保持在选中状态。选择“下一步”按钮。
在“其他信息”对话框中，使用以下设置：
- 框架：确认选择了最新框架。如果 Visual Studio 的“框架”下拉列表不包含最新的可用 .NET Framework，请更新 Visual Studio 并重启教程。
- 身份验证类型：无
- 配置 HTTPS：选中
- 交互式呈现模式：WebAssembly
- 交互位置：每页/每组件
- 包括示例页面：选中
- 不使用顶级语句：未选择
- 选择创建。

本教程假定你熟悉 VS Code。如果你不熟悉 VS Code，请参阅 VS Code 文档。介绍性视频页面列出的视频旨在简要介绍 VS Code 的功能。

在 VS Code 中：

转到“资源管理器”视图，然后选择“创建 .NET 项目”按钮。或者，您可以使用 CtrlShift+P 组合键打开.NET，然后键入“”，查找并选择.NET: 新建项目命令。
从列表中选择 Blazor Web App 项目模板。
在“项目位置”对话框中，为项目创建或选择一个文件夹。
在“命令面板”中，将项目命名为BlazorSignalRApp，并确保匹配其大写字母。使用这个确切的项目名称非常重要，可确保命名空间与从教程复制到要构建的应用中的代码匹配。
通过选择“显示所有模板选项”来调整项目的选项。

将交互式呈现模式更改为WebAssembly。

在进行上述更改后，“命令面板”将显示以下内容：
- Framework：设置为 .NET 的最新公共非预览版。
- 身份验证类型：无
- 配置为 HTTPS：true
- 交互式呈现模式：WebAssembly
- 交互位置：每页/每组件
- 包括示例页面：是
- 不使用顶级语句：false
从“命令面板”中选择“创建项目”。

在命令行界面中：

使用 cd 命令更改到您希望创建项目文件夹的目录（例如 cd c:/users/Bernie_Kopell/Documents）。
使用 dotnet new 命令和 blazor 项目模板，以创建新的 Blazor Web App 项目。传递给命令的 -o|--output 选项将在当前目录位置名为 BlazorSignalRApp 的新文件夹中创建项目。使用 WebAssembly 传递 -int|--interactivity 选项以采用客户端呈现 (CSR)。使用 False 传递 -ai|--all-interactive 选项以采用每页/组件交互位置。

重要

将项目命名为 BlazorSignalRApp（包括匹配大写），因此命名空间与按照教程操作时从教程复制到应用的代码匹配。
```
dotnet new blazor -o BlazorSignalRApp -int WebAssembly -ai False
```

本文中的指南针对 SignalR 客户端使用的是 WebAssembly 组件，因为使用 SignalR 从同一应用中的交互式服务器组件连接到中心没有意义，因为这可能会导致服务器端口耗尽。

添加 SignalR 客户端库

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

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

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

在搜索结果中，选择 Microsoft.AspNetCore.SignalR.Client 包的最新版本。选择“安装” 。

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

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

在终端中（使用 cd BlazorSignalRApp.Client 打开到 BlazorSignalRApp.Client 项目的菜单栏中的终端>新终端），执行以下命令：

dotnet add package Microsoft.AspNetCore.SignalR.Client

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

在打开到 BlazorSignalRApp.Client 项目的命令行界面中，执行以下命令：

dotnet add package Microsoft.AspNetCore.SignalR.Client

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

添加 SignalR 集线器

在服务器 BlazorSignalRApp 项目中，创建 Hubs（复数）文件夹，并添加以下 ChatHub 类 (Hubs/ChatHub.cs)：

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);
    }
}

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

打开服务器 BlazorSignalRApp 项目的 Program 文件。

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

using Microsoft.AspNetCore.ResponseCompression;
using BlazorSignalRApp.Hubs;

添加 SignalR 和响应压缩中间件服务：

builder.Services.AddSignalR();

builder.Services.AddResponseCompression(opts =>
{
   opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
       [ "application/octet-stream" ]);
});

将“响应压缩中间件”置于处理管道配置的最上方。使以下代码行紧跟在构建应用的行 (var app = builder.Build();) 后面：

app.UseResponseCompression();

紧接在运行应用的行 (app.Run();) 前面，为 hub 添加一个端点：

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

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

将以下 Pages/Chat.razor 文件添加到 BlazorSignalRApp.Client 项目：

@page "/chat"
@rendermode InteractiveWebAssembly
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable

<PageTitle>Chat</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 = [];
    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();
        }
    }
}

将一个条目添加到 NavMenu 组件以访问聊天页面。在紧跟在 Weather 组件的 <div> 块后面的 Components/Layout/NavMenu.razor 中，添加以下 <div> 块：

<div class="nav-item px-3">
    <NavLink class="nav-link" href="chat">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Chat
    </NavLink>
</div>

注意

在使用热重载时，请在Development环境中禁用响应压缩中间件。有关详细信息，请参阅 ASP.NET Core BlazorSignalR 指南。

运行应用

请遵循工具使用指南：

在 BlazorSignalRApp中选择了服务器项目后，按 F5 运行应用并进行调试，或按 Ctrl+F5 运行应用而无需调试。

在打开到服务器 BlazorSignalRApp 项目的根文件夹的命令行界面中，执行以下命令：

dotnet watch

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

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

SignalRBlazor 示例应用在两个浏览器窗口中打开，显示交换的消息。

托管 Blazor WebAssembly 体验

创建应用

按照所选工具的指南创建托管 Blazor WebAssembly 应用：

注意

需要 Visual Studio 2022 或更高版本以及 .NET Core SDK 6.0.0 或更高版本。

创建新项目。

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

在“项目名称”字段中键入 BlazorWebAssemblySignalRApp。确认“位置”条目正确无误或为项目提供位置。选择“下一步”。

在“其他信息”对话框中，选中“ASP.NET Core 托管”复选框。

选择创建。

确认已创建托管 Blazor WebAssembly 应用：在解决方案资源管理器中，确认是否存在 Client 项目和 Server 项目。如果两个项目不存在，请重新开始并在选择“创建”之前确认已选中“ASP.NET Core 托管”复选框。

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

dotnet new blazorwasm -ho -o BlazorWebAssemblySignalRApp

-ho|--hosted 选项将创建托管的 Blazor WebAssembly解决方案。有关在 .vscode 文件夹中配置 VS Code 资产的信息，请参阅 “Tooling for ASP.NET Core” 中的 Linux 操作系统指南。

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

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

确认已创建托管 Blazor WebAssembly 应用：确认应用的解决方案文件夹中是否存在 Client 项目和 Server 项目。如果两个项目不存在，请重新开始并确认在创建解决方案时将命令 -ho 或选项 --hosted 传递给 dotnet new 命令。

若要配置 Visual Studio Code 调试资产，请参阅：

用于 ASP.NET Core Blazor 的工具（使用 Linux/macOS 操作系统指南，无需考虑平台）
调试 ASP.NET Core Blazor 应用

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

dotnet new blazorwasm -ho -o BlazorWebAssemblySignalRApp

-ho|--hosted 选项将创建托管的 Blazor WebAssembly解决方案。

确认已创建托管 Blazor WebAssembly 应用：确认应用的解决方案文件夹中是否存在 Client 项目和 Server 项目。如果这两个项目不存在，请重新开始，并确认在创建解决方案时将 -ho 或 --hosted 作为选项传递给 dotnet new 命令。

添加 SignalR 客户端库

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

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

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

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

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

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

在终端中（使用 cd BlazorWebAssemblySignalRApp.Client 打开到 BlazorWebAssemblySignalRApp.Client 项目的菜单栏中的终端>新终端），执行以下命令：

dotnet add Client package Microsoft.AspNetCore.SignalR.Client

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

在解决方案文件夹的命令行界面中执行以下命令：

dotnet add Client package Microsoft.AspNetCore.SignalR.Client

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

添加 SignalR 集线器

在 BlazorWebAssemblySignalRApp.Server 项目中，创建 Hubs（复数）文件夹，并添加以下 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);
        }
    }
}

为 SignalR 中心添加服务和端点

在 BlazorWebAssemblySignalRApp.Server 项目中打开 Program.cs 文件。

将 ChatHub 类的命名空间添加到文件顶部：

using BlazorWebAssemblySignalRApp.Server.Hubs;

添加 SignalR 和响应压缩中间件服务：

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

在处理管道的配置顶部，紧接在生成应用的行之后使用响应压缩中间件：

app.UseResponseCompression();

在控制器终结点和客户端回退之间，为中心添加一个终结点。紧接行 app.MapControllers(); 之后，添加以下行：

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

在 BlazorWebAssemblySignalRApp.Server 项目中打开 Startup.cs 文件。

将 ChatHub 类的命名空间添加到文件顶部：

using BlazorWebAssemblySignalRApp.Server.Hubs;

添加 SignalR 和响应压缩中间件服务：

services.AddSignalR();
services.AddResponseCompression(opts =>
{
      opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
         new[] { "application/octet-stream" });
});

在处理管道的配置顶部使用响应压缩中间件：

app.UseResponseCompression();

在控制器的终结点和客户端回退之间，紧接在 endpoints.MapControllers(); 行之后为中心添加一个终结点：

endpoints.MapHub<ChatHub>("/chathub");

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

在 BlazorWebAssemblySignalRApp.Client 项目中打开 Pages/Index.razor 文件。

将标记替换为以下代码：

@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();
    }
}

注意

使用热重载时，请在 Development 环境中禁用响应压缩中间件。有关详细信息，请参阅 ASP.NET Core BlazorSignalR 指南。

运行应用

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

在“解决方案资源管理器”中，选择 BlazorWebAssemblySignalRApp.Server 项目。按 F5 通过调试运行应用，或 按 Ctrl+F5 运行应用，而无需调试。

重要

执行托管应用 Blazor WebAssembly 时，请从解决方案的Server 项目运行应用。

Google Chrome 或 Microsoft Edge 必须是调试会话的选定浏览器。

如果应用无法在浏览器中启动：

在 .NET 控制台中，确认解决方案是否从“Server”项目运行。
使用浏览器的重新加载按钮刷新浏览器。

有关在 .vscode 文件夹中配置 VS Code 资产的信息，请参阅 Tooling for ASP.NET Core Blazor 中针对 Linux 操作系统的指南。

按 F5 通过调试运行应用，或 按 Ctrl+F5 运行应用，而无需调试。

重要

执行托管应用 Blazor WebAssembly 时，请从解决方案的Server 项目运行应用。

Google Chrome 或 Microsoft Edge 必须是调试会话的选定浏览器。

如果应用无法在浏览器中启动：

在 .NET 控制台中，确认解决方案是否从“Server”项目运行。
使用浏览器的重新加载按钮刷新浏览器。

在解决方案文件夹的命令行界面中执行以下命令，将目录更改为 Server 项目文件夹：

cd Server

使用 dotnet watch（或 dotnet run）命令运行服务器项目：

dotnet watch

重要

执行托管应用 Blazor WebAssembly 时，请从解决方案的 Server 项目运行应用。

如果应用无法在浏览器中启动：

在 .NET 控制台中，确认解决方案是否从“Server”项目运行。
使用浏览器的重新加载按钮刷新浏览器。

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

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

SignalRBlazor 示例应用在两个浏览器窗口中打开，显示交换的消息。

后续步骤

在本教程中，你将了解：

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

有关 SignalR 和 Blazor 框架的详细指南，请参阅以下参考文档集：

ASP.NET Core 概述SignalR ASP.NET CoreBlazor

通过

结合使用 ASP.NET Core SignalR 和 Blazor

先决条件

示例应用

创建 Blazor Web App

添加 SignalR 客户端库

添加 SignalR 集线器

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

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

运行应用

托管 Blazor WebAssembly 体验

创建应用

添加 SignalR 客户端库

添加 SignalR 集线器

为 SignalR 中心添加服务和端点

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

运行应用

后续步骤

其他资源

其他资源