Angular应用中如何在网络断开后立即删除Firebase用户状态节点

你当前的代码逻辑存在关键错误：onDisconnect().remove()需要在连接正常时预先注册，而非检测到断开后再设置。当snap.val() === false时，客户端已与Firebase服务器失去连接，此时发送的onDisconnect指令服务器无法接收，自然不会执行删除操作。

以下是修正后的代码：

const db = getDatabase();
const connectedRef = ref(db, '.info/connected');

const myPresenceRef = this.angularFireDatabase.database.ref(
  '/presence/' + this.userInfo['username']
);

onValue(connectedRef, (snap) => {
  if (snap.val() === true) {
    console.log('connected to db');
    // 连接成功时写入在线状态（可根据需求调整存储内容，比如时间戳）
    myPresenceRef.set(true);
    // 预先注册断开连接后的删除操作，让服务器记住该指令
    myPresenceRef.onDisconnect().remove()
      .then(() => {
        console.log('断开后删除状态的操作已成功注册');
      })
      .catch((error) => {
        console.error('注册断开操作失败:', error);
      });
  } else {
    console.log('已断开与数据库的连接');
    // 此处客户端已离线，无法向服务器发送指令，无需额外操作
  }
});

核心逻辑说明 #

• 提前注册断开操作：onDisconnect().remove()是向Firebase服务器发送"预指令"，告知服务器如果后续该客户端连接断开，就执行删除节点的操作。只有在连接正常时发送，服务器才能接收并记录这个指令。
• 连接时写入在线状态：确保用户在线期间，/presence/username节点存在数据，断开后服务器会自动执行预注册的删除操作，实现状态的即时清理。
• 添加结果回调：通过then/catch可以验证服务器是否成功接收了断开操作指令，方便调试异常情况。

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