Asp.net core 使用SignalR推送消息过程详解

Asp.net core 使用SignalR推送消息过程详解

SignalR是一个用于实时Web应用程序的库，它可以让服务器端代码向客户端代码推送消息。在ASP.NET Core应用程序中，SignalR是非常有用的，可以用于实现实时通信和推送通知。在本攻略中，我们将介绍如何在ASP.NET Core应用程序中使用SignalR推送消息。

步骤一：创建ASP.NET Core应用程序

首先，需要创建一个ASP.NET Core应用程序。可以使用以下命令在命令行中创建一个新的ASP.NET Core应用程序：

dotnet new web -n MyWebApp

步骤二：添加SignalR依赖项

接下来，需要添加SignalR依赖项。可以使用以下命令添加SignalR依赖项：

dotnet add package Microsoft.AspNetCore.SignalR

步骤三：创建SignalR集线器

接下来，需要创建一个SignalR集线器。使用以下步骤创建SignalR集线器：

1. 在“Hubs/MyHub.cs”文件中，添加以下代码：

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

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

在上面的代码中，我们创建了一个名为“MyHub”的SignalR集线器，并添加了一个名为“SendMessage”的方法。该方法将消息发送到所有客户端，并使用“ReceiveMessage”方法接收消息。

1. 在“Startup.cs”文件中，添加以下代码：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using MyWebApp.Hubs;

namespace MyWebApp
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            services.AddSignalR();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
                endpoints.MapHub<MyHub>("/myhub");
            });
        }
    }
}

在上面的代码中，我们使用 AddSignalR 方法添加了SignalR服务，并在 UseEndpoints 方法中添加了SignalR集线器的映射。

示例一：使用SignalR推送消息

以下是一个示例，演示如何使用SignalR推送消息：

1. 在“Views/Home/Index.cshtml”文件中，添加以下代码：

<h1>SignalR Example</h1>

<input type="text" id="messageInput" />
<button id="sendButton">Send</button>

<div id="messageList"></div>

@section Scripts {
    <script src="~/lib/@microsoft/signalr/dist/browser/signalr.min.js"></script>
    <script>
        var connection = new signalR.HubConnectionBuilder().withUrl("/myhub").build();

        connection.on("ReceiveMessage", function (message) {
            var messageList = document.getElementById("messageList");
            var messageItem = document.createElement("div");
            messageItem.innerText = message;
            messageList.appendChild(messageItem);
        });

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

        document.getElementById("sendButton").addEventListener("click", function (event) {
            var messageInput = document.getElementById("messageInput");
            var message = messageInput.value;
            connection.invoke("SendMessage", message).catch(function (err) {
                return console.error(err.toString());
            });
            messageInput.value = "";
            event.preventDefault();
        });
    </script>
}

在上面的代码中，我们创建了一个包含输入框、按钮和消息列表的页面，并使用SignalR推送消息。当用户单击“Send”按钮时，将调用SignalR集线器的“SendMessage”方法，并将消息发送到所有客户端。

1. 在命令行中，使用以下命令运行应用程序：

dotnet run

1. 在浏览器中，导航到“http://localhost:5000/”。
2. 在输入框中输入一条消息，并单击“Send”按钮。
3. 应该看到消息出现在消息列表中。

示例二：使用SignalR推送通知

以下是一个示例，演示如何使用SignalR推送通知：

1. 在“Hubs/MyHub.cs”文件中，添加以下代码：

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace MyWebApp.Hubs
{
    public class MyHub : Hub
    {
        public async Task SendNotification(string message)
        {
            await Clients.All.SendAsync("ReceiveNotification", message);
        }
    }
}

在上面的代码中，我们创建了一个名为“MyHub”的SignalR集线器，并添加了一个名为“SendNotification”的方法。该方法将通知发送到所有客户端，并使用“ReceiveNotification”方法接收通知。

1. 在“Views/Home/Index.cshtml”文件中，添加以下代码：

<h1>SignalR Example</h1>

<button id="notifyButton">Notify</button>

@section Scripts {
    <script src="~/lib/@microsoft/signalr/dist/browser/signalr.min.js"></script>
    <script>
        var connection = new signalR.HubConnectionBuilder().withUrl("/myhub").build();

        connection.on("ReceiveNotification", function (message) {
            alert(message);
        });

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

        document.getElementById("notifyButton").addEventListener("click", function (event) {
            connection.invoke("SendNotification", "New notification").catch(function (err) {
                return console.error(err.toString());
            });
            event.preventDefault();
        });
    </script>
}

在上面的代码中，我们创建了一个包含“Notify”按钮的页面，并使用SignalR推送通知。当用户单击“Notify”按钮时，将调用SignalR集线器的“SendNotification”方法，并向所有客户端发送通知。

1. 在命令行中，使用以下命令运行应用程序：

dotnet run

1. 在浏览器中，导航到“http://localhost:5000/”。
2. 单击“Notify”按钮。
3. 应该看到一个弹出窗口，显示通知消息。

结论

在本攻略中，我们介绍了如何在ASP.NET Core应用程序中使用SignalR推送消息。我们提供了两个示例，演示了如何使用SignalR推送消息和通知。通过使用SignalR，我们可以轻松地实现实时通信和推送通知。