使用 SignalR 和 .NET MAUI 的实时聊天应用程序

实时应用程序的主要特点之一是能够向用户提供即时反馈。这类应用程序的例子包括消息应用程序、视频会议应用程序、协作编辑工具和实时数据仪表板。

聊天应用程序是实时应用程序中最受欢迎的例子之一，它允许用户实时交换信息。

实时应用程序通常使用专门的技术构建，允许客户端和服务器之间进行通信，如 SignalR。

什么是 SignalR？

SignalR 是微软的一个开源项目，可实现从服务器到客户端的实时双向网络通信。使用 SignalR，你可以编写服务器端代码，即时向连接的客户端推送内容。

SignalR 可自动处理连接管理，让你像聊天室一样向所有连接的客户端同时广播消息。

设置

要使用 SignalR 创建一个实时聊天应用程序，首先要创建新的 ASP.NET Core Web App 项目。

在 Visual Studio 中创建一个新项目：

添加 SignalR 客户端库

在解决方案资源管理器中，右键单击项目，然后选择添加 > 客户端库。

在 “添加客户端库 “对话框中：

• 为提供程序选择 unkg
• 在库中输入 @microsoft/signalr@latest。
• 选择 Choose specific files（选择特定文件），展开 dist/browser 文件夹，然后选择 signalr.js 和 signalr.min.js。
• 将目标位置设置为 wwwroot/js/signalr/。
• 选择安装。

创建 SignalR hub

hub 是一个用作高级管道的类，连接的客户端可以在其中订阅、监听和发送消息/数据。

在项目文件夹中创建 Hubs 文件夹。

在 Hubs 文件夹中，用以下代码创建 ChatHub 类：

using Microsoft.AspNetCore.SignalR;

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

ChatHub 类继承自 SignalR Hub 类。Hub 类管理连接、群组和消息。

SendMessage 方法处理所有发送的消息，然后将消息发送给正在监听 ReceiveMessage 的任何人。

配置 SignalR

必须配置 SignalR 服务器，以便将 SignalR 请求传递给 SignalR。在 Program.cs 文件中添加以下代码：

builder.Services.AddSignalR();

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

上述代码将 SignalR 添加到 ASP.NET Core 依赖注入和路由系统中。

您的 Program.cs 文件应如下所示：

using SignalRChatDemo.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
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.UseAuthorization();

app.MapRazorPages();

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

app.Run();

运行应用程序

您可以在本地计算机上运行应用程序，但只能在本地计算机上访问。若要向公众开放，您可以将其部署到 Azure 或任何可通过互联网访问的网络服务器上。

我建议使用 ngrok 将本地开发服务器接入互联网，以便进行调试和测试。更多详情和设置步骤请点击此处。

添加 SignalR 客户端代码

在 Visual Studio 中创建 .NET MAUI 项目并安装 NuGet 软件包 Microsoft.AspNetCore.SignalR.Client

安装完成后，您可以通过设置连接的 URL 来配置hub连接：

HubConnection hubConnection = new HubConnectionBuilder()
                .WithUrl($"https://yoururlhere.com/chatHub")
                .Build();

完成配置后，就可以通过启动连接开始监听hub了：

async Task Connect()
{
    await hubConnection.StartAsync();
}

您还可以断开连接，阻止应用程序监听：

async Task Disconnect()
{
    await hubConnection.StopAsync();
}

现在，你可以开始收发信息了。

向 hub 发送消息

您可以通过 InvokeAsync 方法发送消息：

async Task SendMessage(string user, string message)
{
    await hubConnection.InvokeAsync("SendMessage", user, message);
}

InvokeAsync 方法用于调用 SignalR hub 上的 SendMessage 方法，并传入两个数据：用户名和文本信息。

从 hub 接收消息

要从 hub 接收消息，请确保您的应用程序正在监听 ReceiveMessage。

设置一个回调函数，当从 SignalR 中心接收到消息时触发该函数：

hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
{
    // do something here..
});

以下是在 Android 模拟器和 Windows 计算机上运行应用程序的快速演示地址：

https://youtu.be/CykmoZ5Qxkg

这就是使用 SignalR 和 .NET MAUI 构建实时聊天应用程序所需的全部内容！

结束语

本篇文章只是对 SignalR 以及它在使用 .NET MAUI 构建实时聊天应用程序方面所提供的可能性进行了浅显的介绍。虽然我们介绍了一些基本概念，但要探索和学习的东西还有很多！要创建一个强大且功能丰富的聊天应用程序，您需要深入研究 SignalR 及其相关技术，如 WebSocket、Azure SignalR 服务等。

hub源代码：https://github.com/cedricgabrang/SignalRChatDemo
客户端源代码：https://github.com/cedricgabrang/MauiSignalRChatDemo

作者：Cedric Gabrang