将 Microsoft SignalR 与 React 和 ASP.NET 后端集成以实现实时通信

实时通信对于现代 Web 应用程序至关重要，尤其是在多人游戏、协作工具和实时通知中。在本文中，我们将探讨如何将 Microsoft SignalR 与 React 前端和 ASP.NET Core 后端集成以实现无缝实时交互。

在 React 应用程序中设置 SignalR

首先，导航到 React 项目的 services 文件夹，创建一个名为 SignalRService.ts 的新文件。该服务将为应用处理 SignalR 连接。

在实施服务之前，请安装 Microsoft SignalR 软件包：

npm install @microsoft/signalr

现在，在 SignalRService.ts 中定义 SignalRService 类：

import { HubConnection, HubConnectionBuilder } from "@microsoft/signalr";

class SignalRService {
    private signalRConnection: HubConnection | null = null;
    
    constructor(private username: string) {}
    
    public createUserRoomConnection() {
        this.signalRConnection = new HubConnectionBuilder()
            .withUrl("https://your-api-url/hubs/connectionuser")
            .withAutomaticReconnect()
            .build();
    }
}

这将建立一个 SignalR 连接，并自动重新连接到后端的 /hubs/connectionuser 端点。

在 ASP.NET 后端实现 SignalR

创建 SignalR Hub

在 ASP.NET Core API 项目中新建名为 Hubs 的文件夹，并在其中创建 ConnectionUserHub.cs。

安装所需的 SignalR 软件包：

dotnet add package Microsoft.AspNetCore.SignalR

现在，实现ConnectionUserHub类：

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

public class ConnectionUserHub : Hub
{
    public override async Task OnConnectedAsync()
    {
        await Groups.AddToGroupAsync(Context.ConnectionId, "TicTacToeHub");
        await Clients.Caller.SendAsync("UserConnected");
    }
}

这可确保当用户连接时，它们被添加到SignalR 组并接收UserConnected事件。

在 Program.cs 中配置 SignalR

打开Program.cs并将 SignalR 添加到服务：

builder.Services.AddSignalR();

然后，在端点配置中映射 SignalR hub：

app.MapHub<ConnectionUserHub>("/hubs/connectionuser");

运行 API，后端现在可以处理实时连接了！

在 React 中处理 SignalR 连接

回到 React 应用程序并修改createUserRoomConnection以监听UserConnected事件：

this.signalRConnection?.on("UserConnected", () => {
    console.log("Server called here");
});

添加以下代码确保连接开始：

this.signalRConnection?.start().catch(error => console.log(error));

在 React 上下文中管理 SignalR 状态

要有效管理 SignalR 状态，请在 Reducer.tsx 中创建一个 Reducer 函数：

export const signalRConnectionReducer = (state: SignalRState, action: Action): SignalRState => {
    switch (action.type) {
        case "SET_SIGNALR_SERVICE":
            return { ...state, signalRService: action.payload };
        default:
            return state;
    }
};

在 types.ts 中定义 SignalRState 接口：

export interface SignalRState {
    signalRService: SignalRService | null;
}

更新全局上下文，使其包括 SignalR 状态和调度：

const initialSignalRStatus: SignalRState = {
    signalRService: null,
}

export const GlobalContext = createContext({
    userState: initialUserState,
    userDispatch: () => undefined,
    signalRState: initialSignalRStatus,
    signalRDispatch: () => undefined
});

修改Context.tsx为用户登录后初始化SignalR连接：

const startSignalRConnection = () => {
    const signalRService = new SignalRService(userState.username, signalRDispatch);
    signalRService.createUserRoomConnection();
    signalRDispatch({ type: "SET_SIGNALR_SERVICE", payload: signalRService });
};

处理注销时的 SignalR 断开连接

在Header.tsx中，检索SignalR 状态并从全局上下文中调度：

const { signalRState: { signalRService }, signalRDispatch } = useContext(GlobalContext);

注销时，断开 SignalR 连接：

await signalRService?.removeUserConnection();
signalRDispatch({ type: "REMOVE_SIGNALR_CONNECTION", payload: null });

更新Reducer 函数来处理这种情况：

case "REMOVE_SIGNALR_CONNECTION":
    return { ...state, signalRService: null };

重新启动应用程序以应用更改。

最终测试

• 以用户身份登录→SignalR 连接开始。
• 检查控制台→UserConnected事件已记录。
• 以用户身份注销→SignalR 连接被删除。
• 一切如预期！

此设置可以扩展到实时游戏、实时聊天应用程序和协作工具。