SignalR与Blazor

结合使用 ASP.NET Core SignalR 和 Blazor WebAssembly

作者:Daniel RothLuke Latham

重要

Blazor WebAssembly 为预览版状态

ASP.NET Core 3.0 支持 Blazor Server 。 Blazor WebAssembly 在 ASP.NET Core 3.1 中为预览版。

本教程介绍使用 SignalR 和 Blazor WebAssembly 生成实时应用的基础知识。 您将学习如何:

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

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

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

先决条件

创建托管 Blazor WebAssembly 应用项目

安装 Blazor WebAssembly 模板。 当 Blazor WebAssembly 处于预览状态时, Microsoft.AspNetCore.Blazor.Templates 包具有预览版本。 在命令行界面中执行以下命令:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

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

添加 SignalR 客户端库

添加 SignalR 集线器

在“BlazorSignalRApp.Server”项目中,创建一个“Hubs”(复数)文件夹,并添加以下 ChatHub 类 (Hubs/ChatHub.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

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

添加 SignalR 服务和 SignalR 集线器的终结点

  1. 在“BlazorSignalRApp.Server”项目中,打开“Startup.cs”文件。

  2. ChatHub 类的命名空间添加到文件顶部:

    using BlazorSignalRApp.Server.Hubs;
    
  3. 将 SignalR 服务添加到 Startup.ConfigureServices

    services.AddSignalR();
    
  4. 在默认控制器路由的终结点与客户端回退的终结点之间的 Startup.Configure 中,为集线器添加终结点:

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
        endpoints.MapHub<ChatHub>("/chatHub");
        endpoints.MapFallbackToClientSideBlazor<Client.Program>("index.html");
    });
    

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

  1. 在“BlazorSignalRApp.Client”项目中,打开“Pages/Index.razor”文件。

  2. 将标记替换为以下代码:

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager

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

    Task Send() =>
        _hubConnection.SendAsync("SendMessage", _userInput, _messageInput);

    public bool IsConnected =>
        _hubConnection.State == HubConnectionState.Connected;
}

运行应用

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

后续步骤

在本教程中,你将了解:

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

若要了解有关生成 Blazor 应用的详细信息,请参阅 Blazor 文档:

其他资源