SignalR：如何等待Hub连接建立后再执行AJAX请求

你遇到的核心问题是AJAX调用在SignalR连接完全建立前就触发了，导致服务器发送的初始状态消息无法被接收。下面提供两种可靠的解决方式：

方法一：在连接成功的回调中执行AJAX #

利用async/await的特性，在确认SignalR连接启动成功后再调用AJAX。把你的AJAX逻辑封装成独立函数，放在connection.start()成功执行后的位置：

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/huburl")
    .configureLogging(signalR.LogLevel.Information)
    .build();

// 封装AJAX逻辑为异步函数
async function loadPageData() {
    try {
        // 这里替换成你的AJAX实现，比如用fetch或jQuery.ajax
        const response = await fetch("/your-api-endpoint");
        const data = await response.json();
        // 处理数据展示逻辑
        console.log("页面数据加载完成");
    } catch (err) {
        console.error("AJAX调用失败:", err);
    }
}

async function startConnection() {
    try {
        await connection.start();
        console.log("SignalR 连接成功。");
        // 连接建立后立即执行AJAX
        await loadPageData();
    } catch (err) {
        console.log("连接失败，5秒后重试:", err);
        setTimeout(startConnection, 5000);
    }
};

// 启动连接
startConnection();

方法二：监听连接状态变化（适配重连场景） #

如果你的页面需要处理连接断开后重连的场景（比如网络波动后自动重连成功），可以通过监听SignalR的状态变化事件，当连接状态变为Connected时触发AJAX：

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/huburl")
    .configureLogging(signalR.LogLevel.Information)
    .build();

async function loadPageData() {
    // 同方法一的AJAX逻辑
    try {
        const response = await fetch("/your-api-endpoint");
        const data = await response.json();
        console.log("页面数据加载完成");
    } catch (err) {
        console.error("AJAX调用失败:", err);
    }
}

// 监听连接状态变更
connection.onstatechanged((state) => {
    if (state.newState === signalR.HubConnectionState.Connected) {
        console.log("SignalR 已连接");
        loadPageData();
    }
});

async function startConnection() {
    try {
        await connection.start();
    } catch (err) {
        console.log("连接失败，5秒后重试:", err);
        setTimeout(startConnection, 5000);
    }
};

startConnection();

注意事项 #

• 避免在start()函数外部直接执行AJAX，因为start()是异步操作，外部代码不会等待连接完成就会执行。
• 如果使用jQuery的$.ajax，可以把它包装在async/await里，或者用它的done回调，但推荐统一用async/await保持代码风格一致。

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