Socket.IO搭配RxJS如何在重连前先等待HTTP请求完成获取认证票据

算力阿峰

2026-10-1

解决方案

Socket.IO 客户端 3.0 及以上版本原生支持将 auth 配置项设为异步函数，每次建立连接（包括首次连接和自动重连）时都会自动执行该函数获取最新的认证参数，完全匹配你的需求，无需手动监听重连事件。
修改后的代码如下：

export const notificationsWsSubject = new BehaviorSubject<Socket | null>(null)

signedInObservable.subscribe(user => {
    const socket = io(SERVER_URL, {
        // auth 配置为异步函数，每次连接/重连前自动执行
        auth: async () => {
            // 实时拉取最新票据
            const ticketRes = await getNotificationsWebsocketTicket()
            return {
                ticket: ticketRes.data,
                accessToken: user.accessToken
            }
        }
    })
    notificationsWsSubject.next(socket)
})

该方案的逻辑和你原有首连接逻辑完全对齐，同时自动覆盖了重连场景：首次连接时自动拉取票据再发起连接，重连时会再次执行异步函数拉取新票据后再重连。

备选方案（手动控制重连逻辑）

如果你需要更精细的流程控制，也可以通过监听 reconnect_attempt 事件手动更新认证参数：

export const notificationsWsSubject = new BehaviorSubject<Socket | null>(null)

signedInObservable.pipe(
    switchMap(user => forkJoin([of(user), from(getNotificationsWebsocketTicket())]))
).subscribe(values => {
    const [user, ticketRes] = values
    const socket = io(SERVER_URL, {
        auth: {
            ticket: ticketRes.data,
            accessToken: user.accessToken
        }
    })

    // 每次重连尝试前更新票据
    socket.on('reconnect_attempt', async () => {
        const newTicketRes = await getNotificationsWebsocketTicket()
        socket.auth.ticket = newTicketRes.data
    })

    notificationsWsSubject.next(socket)
})