.NET实时双向通信库SignalR使用教程

2024-03-23 .NET 通信库 SignalR 使用教程 904 0

ASP.NET Core SignalR 是一个用于在 ASP.NET Core 应用程序中实现实时双向通信的库。SignalR 允许服务器端代码实时推送内容到连接的客户端。这使得构建如聊天应用程序、实时数据更新、协作工具等交互性强的应用程序变得简单。

.NET实时双向通信库SignalR使用教程

SignalR 提供了以下主要功能：

实时通信：SignalR 允许服务器和客户端之间建立持久的连接，从而可以实时地发送和接收消息。

服务器推送：服务器可以通过 SignalR 连接主动向客户端发送消息，而不需要客户端进行轮询或长轮询。

分组：可以将客户端连接分组，并向整个组发送消息，而不是单独向每个客户端发送。

跨平台：SignalR 支持多种客户端平台，包括浏览器（使用 JavaScript），.NET 客户端，Java 客户端，和原生移动应用（通过 SignalR 客户端库）。

可伸缩性和可靠性：SignalR 支持在多个服务器实例之间进行连接和消息路由，以及自动重连逻辑，确保连接的可靠性。

在 ASP.NET Core 中使用 SignalR 通常涉及以下步骤：

安装 SignalR 包：在你的 ASP.NET Core 项目中安装 SignalR NuGet 包。

配置 SignalR：在 Startup.cs 文件的 ConfigureServices 和 Configure 方法中配置 SignalR 服务。

创建 Hub 类：Hub 是 SignalR 的核心组件，用于处理客户端和服务器之间的通信。创建一个继承自 Microsoft.AspNetCore.SignalR.Hub 的类，并定义你想要的方法。

在客户端建立连接：在客户端（如 JavaScript）中，使用 SignalR 客户端库建立到 Hub 的连接，并注册用于接收服务器消息的事件处理程序。

发送和接收消息：使用 Hub 方法从客户端向服务器发送消息，并在服务器端使用 Hub 方法向客户端发送消息。

首先，你需要创建一个 ASP.NET Core 项目。在项目中，你需要添加对 SignalR 的引用。这通常通过安装

Microsoft.AspNetCore.SignalR NuGet 包来完成。

接下来，定义 SignalR Hub 类。Hub 是用于处理服务器和客户端之间通信的类。

using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    public async Task Send(string message)
    {
        // 将消息广播给所有连接的客户端
        await Clients.All.SendAsync("Receive", message);
    }
}

在上面的示例中，ChatHub 类继承自 Hub，并包含一个 Send 方法。这个方法接收一个字符串 message，然后使用 Clients.All.SendAsync 方法将消息广播给所有连接的客户端。

然后，你需要在 Startup.cs 文件中配置 SignalR 服务，并在路由中添加对 Hub 的端点。

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    // 其他服务配置...
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件配置...

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/chat");
        // 其他端点配置...
    });
}

在客户端，你可以使用 JavaScript 的 SignalR 客户端库来建立连接并调用 Hub 上的方法。下面是一个简单的 HTML 页面，它使用 SignalR 客户端库来连接到服务器上的 ChatHub，并接收广播的消息。

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Chat</title>
    <script src="~/lib/signalr/dist/browser/signalr.min.js"></script>
</head>
<body>
    <h1>SignalR Chat</h1>
    <input type="text" id="message" />
    <button type="button" id="sendButton">Send</button>
    <ul id="messagesList"></ul>

    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/chat")
            .configureLogging(signalR.LogLevel.Information)
            .build();

        connection.on("Receive", function (message) {
            // 当服务器发送消息时，将消息添加到消息列表中
            const li = document.createElement("li");
            li.textContent = message;
            document.getElementById("messagesList").appendChild(li);
        });

        connection.start().catch(function (err) {
            return console.error(err.toString());
        });

        document.getElementById("sendButton").addEventListener("click", function (event) {
            // 获取用户输入的消息，并通过 Hub 发送到服务器
            const message = document.getElementById("message").value;
            connection.invoke("Send", message).catch(function (err) {
                return console.error(err.toString());
            });

            // 清空输入框
            document.getElementById("message").value = "";
            event.preventDefault();
        });
    </script>
</body>
</html>

在上面的 HTML 页面中，我们创建了一个 SignalR 连接，并定义了一个事件处理程序来处理从服务器接收到的消息。当用户点击“Send”按钮时，页面将调用 Hub 上的 Send 方法，并将用户输入的消息作为参数传递。

这个示例展示了 ASP.NET Core SignalR 的基本用法，包括如何在服务器端创建一个 Hub，并在客户端使用 JavaScript 建立连接、发送和接收消息。在真实的应用程序中，你可能需要处理更复杂的场景，如用户身份验证、组通信、错误处理等。