SignalR新手求助：求优质基础实现教程、仓库及工具库

一、基础连接封装（消除重复代码） #

你的现有代码已经实现了基础连接，但可以封装成可复用的React Hook，避免在多个组件中重复编写连接逻辑：

import { useEffect, useRef, useState } from 'react';
import { HubConnection, HubConnectionBuilder, JsonHubProtocol, LogLevel } from '@microsoft/signalr';

// 可复用的SignalR连接Hook
export const useSignalRConnection = (url: string, options?: any) => {
  const connectionRef = useRef<HubConnection | null>(null);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    const connection = new HubConnectionBuilder()
      .withUrl(url, options)
      .withAutomaticReconnect()
      .withHubProtocol(new JsonHubProtocol())
      .configureLogging(LogLevel.Information)
      .build();

    connectionRef.current = connection;

    // 监听连接状态变化
    connection.onclose(() => setIsConnected(false));
    connection.onreconnected(() => setIsConnected(true));
    connection.onreconnecting(() => setIsConnected(false));

    // 启动连接，失败自动重试
    const startConnection = async () => {
      try {
        await connection.start();
        setIsConnected(true);
      } catch (err) {
        console.error('SignalR连接失败:', err);
        setTimeout(startConnection, 5000);
      }
    };

    startConnection();

    // 组件卸载时关闭连接
    return () => {
      connectionRef.current?.stop().catch(err => console.error('关闭连接失败:', err));
    };
  }, [url, options]);

  // 封装事件订阅方法，返回取消订阅函数
  const subscribeToEvent = (eventName: string, callback: (...args: any[]) => void) => {
    if (connectionRef.current && isConnected) {
      connectionRef.current.on(eventName, callback);
      return () => connectionRef.current?.off(eventName, callback);
    }
    return () => {};
  };

  return {
    connection: connectionRef.current,
    isConnected,
    subscribeToEvent
  };
};

在业务组件中使用示例：

const { isConnected, subscribeToEvent } = useSignalRConnection('/your-hub-endpoint');

useEffect(() => {
  if (!isConnected) return;
  
  // 订阅后端推送的事件，组件卸载时自动取消订阅
  const unsubscribe = subscribeToEvent('ReceiveNotification', (notification) => {
    // 处理通知逻辑
    console.log('收到通知:', notification);
  });

  return unsubscribe;
}, [isConnected, subscribeToEvent]);

二、优质学习与参考资源 #

官方权威内容 #

• 微软SignalR前端文档：覆盖React、Vue等主流框架的集成步骤，详细讲解自动重连、协议配置、错误处理等核心特性
• 官方示例项目：包含完整的实时聊天、订单状态更新等场景，展示前后端协同的最佳实践

代码参考方向 #

• 单例连接管理：用单例模式封装全局SignalR连接，避免多个组件重复创建连接实例，减少资源消耗
• 企业级状态集成：参考大型项目中如何将SignalR事件与Redux、Zustand等状态管理库结合，实现全局状态同步

实用工具库 #

• @microsoft/signalr官方包：重点掌握withAutomaticReconnect()的重试策略配置、on/off事件的精准管理、连接状态的监听API
• 自定义中间件：如果使用状态管理库，可以编写中间件自动将SignalR事件同步到全局状态，简化组件逻辑

三、事件处理最佳实践 #

• 统一事件命名：前后端约定好事件名称规范（如ReceiveOrderUpdate），避免歧义
• 集中订阅管理：在全局入口或父组件中统一订阅通用事件，避免子组件重复订阅
• 错误边界处理：在事件回调中添加错误捕获，避免单个事件处理失败导致页面崩溃
• 连接状态可视化：将isConnected状态同步到全局，在页面顶部或组件中显示离线/在线状态提示

内容的提问来源于stack exchange，提问作者JamesG