SignalR客户端重复检查连接状态的优化方案咨询

你的痛点我完全理解——重复编写连接状态检查的代码确实会让逻辑变得冗余且难以维护。我们可以通过封装通用逻辑的方式来解决这个问题，让事件处理函数只专注于业务操作，不用关心连接状态的细节。

方案1：封装连接检查的高阶函数 #

我们可以写一个通用函数，它接收你的业务逻辑作为参数，内部自动处理「检查连接→必要时重连→执行业务代码」的流程，甚至能处理「正在重连中」的等待场景：

// 封装通用的Hub连接检查与执行函数
function executeWithHubConnection(callback) {
    // 检查当前Hub连接状态
    const hubConnection = $.connection.hub;
    switch(hubConnection.state) {
        case $.signalR.connectionState.connected:
            // 已连接，直接执行回调
            callback();
            break;
        case $.signalR.connectionState.disconnected:
            // 已断开，先启动连接，成功后执行回调
            hubConnection.start().done(callback);
            break;
        case $.signalR.connectionState.connecting:
        case $.signalR.connectionState.reconnecting:
            // 正在连接/重连，监听连接成功事件后执行回调
            hubConnection.one('connected', callback);
            break;
    }
}

然后你的事件绑定就可以简化成这样，再也不用重复写连接检查：

$("#myButton").on("click", { foo: "bar" }, function (event) {
    executeWithHubConnection(() => {
        // 这里写你的业务逻辑，比如调用Hub方法
        console.log("执行操作，参数：", event.data.foo);
        // 示例：调用Hub的某个方法
        // $.connection.myHub.server.someMethod(event.data.foo);
    });
});

方案2：扩展jQuery的事件绑定方法（更贴合你的使用场景） #

如果你的项目大量使用jQuery绑定事件，可以直接扩展jQuery的on方法，新增一个带Hub连接检查的版本，让代码更简洁：

// 扩展jQuery，添加带Hub连接检查的事件绑定方法
$.fn.onWithHubCheck = function(eventName, data, handler) {
    // 处理参数重载（如果没有传入data的情况）
    if (typeof data === 'function') {
        handler = data;
        data = null;
    }

    return this.on(eventName, data, function(event) {
        const $this = this;
        executeWithHubConnection(() => {
            // 保持原handler的this指向和事件参数
            handler.call($this, event);
        });
    });
};

使用时就像原生jQuery事件绑定一样简单：

// 带data参数的情况
$("#myButton").onWithHubCheck("click", { foo: "bar" }, function (event) {
    // 直接写业务逻辑，连接检查已经自动处理了
    console.log("按钮点击，参数：", event.data.foo);
});

// 不带data参数的情况
$("#anotherButton").onWithHubCheck("click", function () {
    console.log("另一个按钮点击，自动检查连接");
});

额外优化：处理重连失败的场景 #

如果服务器长时间不可用，我们还可以在executeWithHubConnection里添加失败提示，避免用户无感知等待：

function executeWithHubConnection(callback, onFail) {
    const hubConnection = $.connection.hub;
    switch(hubConnection.state) {
        case $.signalR.connectionState.connected:
            callback();
            break;
        case $.signalR.connectionState.disconnected:
            hubConnection.start()
                .done(callback)
                .fail(() => {
                    console.error("Hub重连失败");
                    onFail?.();
                });
            break;
        case $.signalR.connectionState.connecting:
        case $.signalR.connectionState.reconnecting:
            hubConnection.one('connected', callback);
            // 可选：添加超时处理
            setTimeout(() => {
                if (hubConnection.state !== $.signalR.connectionState.connected) {
                    console.error("连接超时");
                    onFail?.();
                }
            }, 10000);
            break;
    }
}

这样使用时可以传入失败回调：

$("#myButton").onWithHubCheck("click", { foo: "bar" }, function (event) {
    console.log("执行操作");
}, () => {
    alert("无法连接到服务器，请稍后重试");
});

这种封装方式不仅消除了冗余代码，还让逻辑更集中，后续如果需要修改连接检查的规则（比如调整超时时间），只需要修改一处即可。

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