Firebase onDisconnect偶发不生效 用户离线仍显示在线问题咨询

核心问题根因 #

• onDisconnect 注册时机缺陷：Firebase 的 onDisconnect() 是和当前客户端连接绑定的，每次连接断开重连后需要重新注册。现有代码仅在用户登录状态变化时注册一次，重连后没有重新绑定，一旦重连后再发生断连，就不会触发自动设为离线的逻辑，这是偶发异常的核心原因。
• 移动端场景兼容性问题：移动端页面被系统后台回收、进程被杀时，visibilitychange 事件、signOut 里的同步离线状态逻辑大概率不会执行，状态无法正常更新，这也是移动端问题出现概率更高的主要原因。
• 异步逻辑易被中断：setPresence 依赖异步获取用户登录状态，页面销毁/进程终止时异步请求容易被系统中止，导致状态更新失败。
• 无兜底校验逻辑：没有基于状态更新时间的兜底判断，只要状态更新失败就会一直显示错误状态。

修复方案 #

1. 修正 onDisconnect 注册逻辑 #

每次 Firebase 连接状态变为在线时，都重新注册 onDisconnect 回调，避免重连后回调失效。

2. 增加状态超时兜底 #

前端拉取用户状态展示时，只要状态更新时间戳距离当前时间超过5分钟，直接判定为离线，覆盖所有异常场景。

3. 优化事件绑定逻辑 #

使用事件监听而非直接覆盖 document.onvisibilitychange 属性，避免和其他业务逻辑冲突，同时增加页面卸载前的同步状态更新逻辑，提高页面关闭时状态更新的成功率。

4. 简化 setPresence 逻辑 #

缓存当前登录用户信息，避免在状态更新时额外异步查询用户状态，减少异步链路失败概率。

修正后的核心代码 #

export class PresenceService {
  private currentUser: any = null;

  constructor(private afAuth: AngularFireAuth, private db: AngularFireDatabase) {
    // 缓存当前登录用户，避免每次更新状态都异步查询
    this.afAuth.authState.subscribe(user => {
      this.currentUser = user;
    });
    this.updateOnUser().subscribe();
    this.updateOnAway();
    // 页面卸载前同步更新离线状态
    window.addEventListener('beforeunload', () => {
      if (this.currentUser) {
        this.db.object(`status/${this.currentUser.uid}`).update({
          status: 'offline',
          timestamp: firebase.database.ServerValue.TIMESTAMP,
          uid: this.currentUser.uid
        });
      }
    });
  }

  getPresence(uid: string) {
    return this.db.object(`status/${uid}`).valueChanges().pipe(
      // 前端直接加兜底逻辑，超过5分钟无更新直接判定为离线
      map(status => {
        if (!status) return 'offline';
        const now = Date.now();
        if (now - status.timestamp > 5 * 60 * 1000) {
          return 'offline';
        }
        return status.status;
      })
    ) as Observable<string>;
  }

  async setPresence(status: string) {
    if (this.currentUser) {
      return this.db.object(`status/${this.currentUser.uid}`).update({ 
        status, 
        timestamp: firebase.database.ServerValue.TIMESTAMP, 
        uid: this.currentUser.uid 
      });
    }
  }

  updateOnUser() {
    const connection = this.db.object('.info/connected').valueChanges().pipe(
      tap(connected => {
        // 每次连接恢复时重新注册onDisconnect回调
        if (connected && this.currentUser) {
          this.db.object(`status/${this.currentUser.uid}`).query.ref.onDisconnect()
            .update({
              status: 'offline',
              timestamp: firebase.database.ServerValue.TIMESTAMP,
              uid: this.currentUser.uid
            });
        }
      }),
      map(connected => connected ? 'online' : 'offline')
    );

    return this.afAuth.authState.pipe(
      switchMap(user => user ? connection : of('offline')),
      tap(status => this.setPresence(status))
    );
  }

  async signOut() {
    await this.setPresence('offline');
  }

  updateOnAway() {
    // 用addEventListener绑定事件避免覆盖其他业务逻辑
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        this.setPresence('away');
      } else {
        this.setPresence('online');
      }
    });
  }
}

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