如何在React+Firebase应用中实现用户活跃状态检测？

核心思路 #

要实现用户活跃状态检测，需要覆盖主动登录/登出、**意外离线（浏览器崩溃、网络断开）**两种场景，结合Firebase Auth、Functions、Firestore（可选搭配Realtime Database提升离线检测精度）来完成状态同步。

方案一：Auth触发器+前端心跳+定时清理（纯Firestack方案） #

1. 基础状态同步（登录/主动登出） #

云函数：监听用户登录事件

利用Firebase Auth的onSignIn触发器（需Blaze计划），在用户登录时自动更新Firestore的isActive状态：

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();

exports.onUserSignIn = functions.auth.user().onSignIn(async (user) => {
  const userRef = admin.firestore().collection("users").doc(user.uid);
  await userRef.update({
    isActive: true,
    lastActive: admin.firestore.FieldValue.serverTimestamp()
  });
});

前端：处理主动登出

在用户主动点击登出按钮时，先更新Firestore状态再执行登出：

async function handleSignOut() {
  const currentUser = firebase.auth().currentUser;
  if (currentUser) {
    await firebase.firestore()
      .collection("users")
      .doc(currentUser.uid)
      .update({
        isActive: false,
        lastActive: firebase.firestore.FieldValue.serverTimestamp()
      });
  }
  await firebase.auth().signOut();
}

2. 处理意外离线 #

前端定时发送心跳更新lastActive，再通过云函数定时清理超时未活跃的用户：

前端：心跳逻辑

let heartbeatTimer;

// 用户登录后启动心跳（每5分钟更新一次活跃时间）
function startHeartbeat(uid) {
  heartbeatTimer = setInterval(async () => {
    await firebase.firestore()
      .collection("users")
      .doc(uid)
      .update({ lastActive: firebase.firestore.FieldValue.serverTimestamp() });
  }, 5 * 60 * 1000);
}

// 登出或页面卸载时停止心跳
function stopHeartbeat() {
  if (heartbeatTimer) clearInterval(heartbeatTimer);
}

// 监听Auth状态变化
firebase.auth().onAuthStateChanged((user) => {
  if (user) startHeartbeat(user.uid);
  else stopHeartbeat();
});

// 页面卸载时尝试标记非活跃（网络异常时依赖后续定时任务）
window.addEventListener("beforeunload", async () => {
  const user = firebase.auth().currentUser;
  if (user) {
    try {
      await firebase.firestore()
        .collection("users")
        .doc(user.uid)
        .update({ isActive: false });
    } catch (e) { /* 忽略网络失败 */ }
  }
});

云函数：定时清理超时用户

设置每10分钟执行一次，将15分钟未更新lastActive的用户标记为非活跃：

exports.cleanInactiveUsers = functions.pubsub.schedule("every 10 minutes").onRun(async () => {
  const threshold = Date.now() - 15 * 60 * 1000; // 15分钟超时阈值
  const inactiveQuery = admin.firestore()
    .collection("users")
    .where("isActive", "==", true)
    .where("lastActive", "<=", new Date(threshold));

  const snapshot = await inactiveQuery.get();
  const batch = admin.firestore().batch();

  snapshot.forEach(doc => {
    batch.update(doc.ref, { isActive: false });
  });

  await batch.commit();
  functions.logger.info(`标记${snapshot.size}个用户为非活跃`);
});

方案二：Realtime Database辅助离线检测（更精准） #

Firebase Realtime Database原生支持onDisconnect()服务器端回调，能更及时检测客户端意外离线，再同步状态到Firestore：

前端实现 #

firebase.auth().onAuthStateChanged(async (user) => {
  if (user) {
    const uid = user.uid;
    // 登录时先标记活跃
    await firebase.firestore()
      .collection("users")
      .doc(uid)
      .update({ isActive: true, lastActive: firebase.firestore.FieldValue.serverTimestamp() });

    // 连接Realtime Database，设置断开回调
    const presenceRef = firebase.database().ref(`presence/${uid}`);
    presenceRef.set(true);
    
    // 当客户端断开时，RTDB自动将节点设为false
    await presenceRef.onDisconnect().set(false);

    // 监听presence节点变化，同步到Firestore
    presenceRef.on("value", async (snapshot) => {
      const isOnline = snapshot.val();
      await firebase.firestore()
        .collection("users")
        .doc(uid)
        .update({
          isActive: isOnline,
          lastActive: firebase.firestore.FieldValue.serverTimestamp()
        });
    });
  }
});

关键注意事项 #

• 权限控制：在Firestore安全规则中限制只有用户自身或云函数能修改isActive字段，例如：

  match /users/{uid} {
    allow update: if request.auth.uid == uid || request.auth.token.email_verified;
  }
  

• 成本优化：心跳频率和定时任务间隔可根据业务需求调整，避免不必要的写入操作；
• 实时UI更新：前端可通过onSnapshot监听用户文档变化，实时更新UI状态：

  firebase.firestore()
    .collection("users")
    .doc(currentUser.uid)
    .onSnapshot((doc) => {
      const userData = doc.data();
      // 根据userData.isActive更新页面UI
    });
  

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