在 .NET Core 中使用 SignalR 实现实时通信应用程序

寒冰屋

于 2024-08-13 22:41:53 发布

点赞数

分类专栏： CSharp.NET ASP.NET CORE 文章标签： .NET Core SignalR

原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654099924&idx=6&sn=9b8b12f92a5b7f05b2255e4f2d979940&chksm=8158efd50975541cd1ca78253a177b41cc2133fca94f2007b66fc363e1785ec3af5eb5af9c3d&scene=126&sessionid=1723470492#rd

版权

CSharp.NET 同时被 2 个专栏收录

1201 篇文章 56 订阅

订阅专栏

ASP.NET CORE

1114 篇文章 54 订阅

订阅专栏

SignalR 简介

在 .NET Core 中设置 SignalR

步骤 1：创建新的 .NET Core 项目

步骤 2：添加 SignalR NuGet 包

概述：在现代 Web 开发环境中，对实时功能的需求越来越大。无论是实时聊天、实时通知还是动态仪表板，用户都希望获得即时更新。SignalR 是一个用于 ASP.NET 的库，可简化向应用程序添加实时 Web 功能的过程。在本文中，我们将探讨如何在 .NET Core 中使用 SignalR 生成实时应用程序，并使用实际示例来说明其功能。SignalR 简介SignalR 是一个库，可简化向应用程序添加实时 Web 功能的过程。它允许服务器端代码立即将内容推送到连接的客户端。SignalR 会自动处理连接管理，并横向扩展以处理大量连接。SignalR的主要特点 - 实时通信：启用服务器和客户端之间的双

在现代 Web 开发环境中，对实时功能的需求越来越大。无论是实时聊天、实时通知还是动态仪表板，用户都希望获得即时更新。SignalR 是一个用于 ASP.NET 的库，可简化向应用程序添加实时 Web 功能的过程。在本文中，我们将探讨如何在 .NET Core 中使用 SignalR 生成实时应用程序，并使用实际示例来说明其功能。

SignalR 简介

SignalR 是一个库，可简化向应用程序添加实时 Web 功能的过程。它允许服务器端代码立即将内容推送到连接的客户端。SignalR 会自动处理连接管理，并横向扩展以处理大量连接。

SignalR
的主要特点 - 实时通信：启用服务器和客户端之间的双向通信。
- 自动重新连接：如果连接断开，则自动重新连接。
- 多种传输选项：根据客户端的功能选择最佳传输方法（WebSockets、服务器发送事件、长轮询）。

在 .NET Core 中设置 SignalR

步骤 1：创建新的 .NET Core 项目

首先，使用 .NET CLI 创建新的 .NET Core Web API 项目：

dotnet new webapi -n RealTimeApp  
cd RealTimeApp

步骤 2：添加 SignalR NuGet 包

将 SignalR 包添加到项目：

dotnet add package Microsoft.AspNetCore.SignalR

步骤 3：创建中心

中心是 SignalR API 中的一个中心点，用于处理连接、组和消息传送。创建新的 Hub 类：

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

步骤 4：在启动

中配置 SignalR在“Startup.cs”文件中配置 SignalR 服务和中间件：

public void ConfigureServices(IServiceCollection services)  
{  
    services.AddControllers();  
    services.AddSignalR();  
}  
  
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)  
{  
    if (env.IsDevelopment())  
    {  
        app.UseDeveloperExceptionPage();  
    }  
  
    app.UseRouting();  
  
    app.UseEndpoints(endpoints =>  
    {  
        endpoints.MapControllers();  
        endpoints.MapHub<RealTimeHub>("/realtimehub");  
    });  
}

构建实时聊天和通知应用程序

步骤 5：创建客户端应用程序

为了演示实时通信，我们将使用 HTML 和 JavaScript 创建一个简单的聊天和通知客户端。

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Real-Time App</title>
</head>
<body>
    <div>
        <input type="text" id="userInput" placeholder="Name" />
        <input type="text" id="messageInput" placeholder="Message" />
        <button onclick="sendMessage()">Send Message</button>
        <button onclick="sendNotification()">Send Notification</button>
    </div>
    <ul id="messagesList"></ul>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.11/signalr.min.js"></script>
    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/realtimehub")
            .build();

        connection.on("ReceiveMessage", (user, message) => {
            const li = document.createElement("li");
            li.textContent = `${user}: ${message}`;
            document.getElementById("messagesList").appendChild(li);
        });

        connection.on("ReceiveNotification", (message) => {
            alert(`Notification: ${message}`);
        });

        connection.start().catch(err => console.error(err));

        function sendMessage() {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            connection.invoke("SendMessage", user, message).catch(err => console.error(err));
        }

        function sendNotification() {
            const message = document.getElementById("messageInput").value;
            connection.invoke("SendNotification", message).catch(err => console.error(err));
        }
    </script>
</body>
</html>

步骤 6：运行应用程序

运行 .NET Core 应用程序：Run your .NET Core application：

dotnet run

在 Web 浏览器中打开 HTML 文件，输入用户名和消息，然后单击“发送”。消息将实时广播到所有连接的客户端，也可以立即发送和接收通知。

在 .NET Core 中使用 SignalR 实现实时应用程序可增强 Web 应用程序的交互性和响应能力。通过按照本文中概述的步骤操作，您可以创建强大的实时功能，例如聊天应用程序和通知。SignalR 简化了实时通信的复杂性，使其成为现代 Web 开发人员的重要工具。深入了解 SignalR 并探索其转换 .NET Core 应用程序的潜力。

引入地址