Ionic 6中AppState变更导致订阅重复触发的问题排查

出现重复消息的核心原因有两个：

1. SignalR事件重复绑定：每次应用从后台切回前台时，都会调用createHubConnection新建连接，并且重复绑定NewMessage事件的回调函数。这会导致同一个消息推送过来时，this.v.newChatMessage$.next(id)被执行多次，触发订阅回调多次。
2. 重复触发消息获取逻辑：结合BehaviorSubject的推送机制，多次执行的next会让详情页的订阅回调重复调用接口获取消息并添加到列表，最终导致重复显示。

1. 修复SignalR事件重复绑定问题 #

修改signalR.service.ts，在创建新连接前移除旧连接的事件绑定，避免同一事件被多次监听：

createHubConnection() {
    // 先清理旧连接的事件绑定与连接实例
    if (this.hubConnection) {
        this.hubConnection.off('NewMessage');
        this.hubConnection.stop();
        this.hubConnection = null;
    }

    this.hubConnection = new HubConnectionBuilder()
        .withUrl(this.hubUrl + 'URL?SOME_PARAMETERS', {
            accessTokenFactory: () => USER_TOKEN
        })
        .withAutomaticReconnect()
        .build();

    this.hubConnection.start();

    this.hubConnection.on('NewMessage', id => {
        this.zone.run(() => { 
            this.v.newChatMessage$.next(id);
        });
    });
}

stopHubConnection() {
    if (this.hubConnection) {
        this.hubConnection.off('NewMessage');
        this.hubConnection.stop();
        this.hubConnection = null;
    }
}

2. 优化详情页订阅与消息去重 #

改用takeUntil管理订阅生命周期（更适配Ionic页面缓存场景），同时添加消息存在性检查，避免重复添加：

import { Subject, takeUntil } from 'rxjs';

// ...

private destroy$ = new Subject<void>();

ngOnInit() { 
    this.v.newChatMessage$.pipe(takeUntil(this.destroy$)).subscribe(id => { 
        if (id > 0 && id == this.chat.id) {
            this.service.getLastMessage(id).pipe(take(1)).subscribe(msg => {
                // 检查消息是否已存在，避免重复添加
                const isDuplicate = this.messages.some(item => item.id === msg.id);
                if (!isDuplicate) {
                    this.messages.push(msg);
                    this.scrollToBottom();
                }
            });
            
            this.v.newChatMessage$.next(0);
        }
    })
}

ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
}

3. 避免不必要的连接重建 #

在app.component.ts中添加连接状态检查，仅当连接确实断开时才重建：

constructor(....) {
    App.addListener("appStateChange", async result => {
        if (result.isActive) {
            // 仅当连接不存在或已断开时重建
            if (!this.signalR.hubConnection || this.signalR.hubConnection.state === 4) { // 4对应HubConnectionState.Disconnected
                this.signalR.createHubConnection();
            }
        } else {
            this.signalR.stopHubConnection();
        }
    });
}

• SignalR的on方法每次调用都会新增回调，不会覆盖旧回调，必须用off主动移除。
• Ionic页面缓存可能导致ngOnInit不重复触发，takeUntil是更可靠的订阅清理方式。
• 消息存在性检查是兜底方案，能避免因任何逻辑疏漏导致的重复显示。

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