SignalR stateChanged回调函数多次触发问题求助

你遇到的stateChanged回调多次触发的核心原因是重复绑定了回调函数。每次执行这段连接逻辑（包括自动重连场景），都会调用$.connection.hub.stateChanged((e) => this.stateChanged(e))新增一个回调绑定，当连接状态变化时，所有已绑定的回调都会被执行，就出现了多次触发的现象。

下面是几种可行的修复方式：

1. 绑定前先解绑旧回调 #

每次绑定新回调前，先移除之前绑定的所有stateChanged事件处理函数，确保同一时刻只有一个回调生效：

// 在绑定回调前先解绑旧的处理函数
$.connection.hub.off('stateChanged');
$.connection.hub.stateChanged((e) => this.stateChanged(e));

$.connection.hub.off('connectionSlow');
$.connection.hub.connectionSlow(() => this.connectionSlow());

2. 将回调绑定移到连接逻辑之外（只绑定一次） #

把回调绑定代码放在只会执行一次的地方（比如组件初始化、应用启动时），而不是每次连接时都绑定：

// 初始化阶段只绑定一次回调
$.connection.hub.stateChanged((e) => this.stateChanged(e));
$.connection.hub.connectionSlow(() => this.connectionSlow());

// 单独封装连接逻辑
async function startSignalRConnection() {
    var promise = new Promise<SignalR.ConnectionStates>((resolve, reject) => {
        $.connection.hub.url = BASE_URL!;
        $.connection.hub.logging = process.env.REACT_APP_CONSOLE_LOGS == "true";
        $.connection.hub
            .start({
                transport: ["webSockets", "longPolling"],
                jsonp: true,
                xdomain: true,
                waitForPageLoad: false,
            } as any)
            .done(() => {                      
                resolve($.connection.connectionState);
                this.SubscribeBreakAlerts();
            })
            .fail(() => reject("Could not connect"));
    });

    await promise;
}

// 调用连接函数
startSignalRConnection();

3. 用单例模式管理SignalR连接 #

如果应用中存在多次触发连接逻辑的场景，建议封装单例的连接管理类，确保连接实例唯一、回调只绑定一次：

class SignalRConnectionManager {
    private static instance: SignalRConnectionManager;
    private isConnectionInitialized = false;

    private constructor() {}

    public static getInstance(): SignalRConnectionManager {
        if (!SignalRConnectionManager.instance) {
            SignalRConnectionManager.instance = new SignalRConnectionManager();
        }
        return SignalRConnectionManager.instance;
    }

    public async startConnection() {
        if (this.isConnectionInitialized) return;

        // 仅初始化时绑定一次回调
        $.connection.hub.stateChanged((e) => this.handleStateChange(e));
        $.connection.hub.connectionSlow(() => this.handleConnectionSlow());

        var promise = new Promise<SignalR.ConnectionStates>((resolve, reject) => {
            $.connection.hub.url = BASE_URL!;
            $.connection.hub.logging = process.env.REACT_APP_CONSOLE_LOGS == "true";
            $.connection.hub
                .start({
                    transport: ["webSockets", "longPolling"],
                    jsonp: true,
                    xdomain: true,
                    waitForPageLoad: false,
                } as any)
                .done(() => {                      
                    resolve($.connection.connectionState);
                    this.SubscribeBreakAlerts();
                    this.isConnectionInitialized = true;
                })
                .fail(() => reject("Could not connect"));
        });

        await promise;
    }

    private handleStateChange(e: any) {
        // 你的状态变化处理逻辑
        console.log("Connection state changed:", e);
    }

    private handleConnectionSlow() {
        // 连接缓慢的处理逻辑
        console.log("SignalR connection is slow");
    }

    private SubscribeBreakAlerts() {
        // 你的订阅业务逻辑
    }
}

// 使用方式
SignalRConnectionManager.getInstance().startConnection();

• SignalR自带的自动重连机制会在连接断开后尝试重新连接，如果回调绑定在连接逻辑内部，每次重连都会新增绑定，这是最常见的触发场景。
• 检查代码中是否存在多次调用连接函数的情况（比如组件重复渲染时执行连接逻辑），这也会导致重复绑定问题。

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