我如何使用reactjs前端在我的c#应用程序中设置信号服务器？

Question

我对所有这些信号员都是新手。我有一个使用reactjs 前端和c# 后端的应用程序。我需要启动一个接受消息并广播消息的信号服务器。所以基本上当我启动应用程序时。信号服务器将启动。我可以向它发送消息并从我的 ReactJS 前端读取消息并显示给用户。 我该怎么做，有这样的例子吗？

就从这个开始

Answer 1

我有一个使用reactjs前端和c#后端的应用程序。我需要 启动一个信号服务器来接受消息并广播 消息。所以基本上当我启动应用程序时。信号服务器将 开始。我可以向它发送消息并从我的reactjs中读取消息 前端并显示给用户。我该怎么做？

如果您可以在当前的实现中提出具体的问题，而不是提出过于通用的查询，那就更好了。

但是，为了在带有 ReactJS 前端的 ASP.NET Core 应用程序中设置 SignalR 服务器，

首先，你应该安装SignalR，并需要在你的asp.net core项目中创建一个Hub类（称为hub服务），

之后，配置服务并在您的program.cs类文件中映射集线器端点。

在 React 方面，您应该安装客户端并建立连接，以便它应该启动并侦听来自广播嗡嗡声的消息，并调用服务器方法来发送消息。

让我们看看如何在实践中实现这一点：

假设你的后端是XXX版本的asp.net core，因为你有react前端。

所以，我们可以这样做：

SingnalR 与 Asp.net 核心：

首先，根据项目版本将SignalR包安装到您的项目中：

Microsoft.AspNetCore.SignalR

您甚至可以使用 nuget 包管理器：

Install-Package Microsoft.AspNetCore.SignalR

中心类别：

在此步骤中，您应该创建一个集线器类，它将与您的客户端/React/javascript 前端进行通信。

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

在Program.cs中注册SignalR：

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

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

app.Run();

前端-React 或 Javascript：

在react或javascript方面，您应该安装以下npm包：

npm install @microsoft/signalr

并且需要

Import HubConnectionBuilder

最后，需要创建连接。

您可以执行以下操作：

import { HubConnectionBuilder } from '@microsoft/signalr';

const connection = new HubConnectionBuilder()
    .withUrl('http://localhost:5000/chatHub') 
    .build();

注意： 确保您已相应更新您的中心 URL。

与集线器连接：

connection.start()
    .then(() => console.log('Connected to SignalR hub'))
    .catch(err => console.error('Error connecting to hub:', err));

connection.on('ReceiveMessage', message => {
    console.log('Received message:', message);
    
});

输出：

注意： 在

connection.on

中，您可以在 React 组件中显示消息或任何您想要的内容。如果您需要任何进一步的帮助，请参阅此官方文档以供参考。您也可以查看此示例。