ASP.NET Core SignalR 入门

ASP.NET Core SignalR 是一个实时通信框架，可用于构建具有实时功能的Web应用程序。它允许服务器端代码向客户端发送实时消息，并支持客户端代码向服务器发送消息。本篇博客将详细介绍如何使用 ASP.NET Core SignalR 来构建实时应用。

安装和配置

首先，我们需要安装 SignalR NuGet 包。在项目根目录下打开命令行工具，运行以下命令：

dotnet add package Microsoft.AspNetCore.SignalR

安装完成后，我们需要在Startup.cs文件中进行配置。在ConfigureServices方法中添加以下代码：

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
}

接下来，在Configure方法中添加以下代码：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...
    
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/chathub"); // 这里的 ChatHub 是我们自定义的 SignalR Hub
    });
}

创建 SignalR Hub

创建一个新的文件 ChatHub.cs，并在该文件中添加以下内容：

using Microsoft.AspNetCore.SignalR;

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

在上述代码中，我们定义了一个 ChatHub 类，并在类中创建了一个 SendMessage 方法。该方法接受两个参数：user 和 message，并将这两个参数传递给所有客户端的 ReceiveMessage 方法。

在客户端使用 SignalR

现在，我们可以在客户端代码中使用 SignalR 来接收和发送实时消息了。假设你正在开发一个聊天应用，在 HTML 文件中添加以下代码：

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkf/" crossorigin="anonymous"></script>
<script src="/path/to/signalr.js"></script>
<script>
    const connection = new signalR.HubConnectionBuilder()
        .withUrl("/chathub") // 这里的 /chathub 与 Startup.cs 中的 MapHub 方法参数一致
        .build();

    connection.on("ReceiveMessage", function (user, message) {
        // 接收到消息后的处理逻辑
    });

    connection.start().then(function () {
        // 连接成功后的处理逻辑
    }).catch(function (err) {
        console.error(err.toString());
    });

    function sendMessage() {
        const user = ""; // 获取用户名称
        const message = ""; // 获取用户输入的消息

        connection.invoke("SendMessage", user, message).catch(function (err) {
            console.error(err.toString());
        });
    }
</script>

在上述代码中，我们首先引入了 jQuery 和 SignalR 的 JavaScript 文件。然后，我们创建了一个 HubConnection 对象，并使用 withUrl 方法指定了连接的 URL，该 URL 与 Startup.cs 中 MapHub 方法的参数一致。

随后，我们使用 on 方法监听 ReceiveMessage 事件，当服务器发送消息时，会触发该事件进行处理。在 start 方法中启动连接，连接成功后执行相应的逻辑。

最后，在 sendMessage 方法中，我们获取用户名称和输入的消息，并使用 invoke 方法发送消息给服务器端。

总结

通过本篇博客，我们了解了 ASP.NET Core SignalR 的基本用法。我们首先安装了 SignalR NuGet 包，并在 Startup.cs 文件中进行了配置。然后，我们创建了一个自定义的 SignalR Hub，并在客户端代码中使用 SignalR 进行实时消息的接收和发送。希望本篇博客能够帮助你入门 ASP.NET Core SignalR，并激发你构建更多实时应用的灵感。

欢迎留言分享你的想法和疑问！

本文来自极简博客，作者：心灵捕手，转载请注明原文链接：ASP.NET Core SignalR 入门