如何使用JavaScript从Firebase Firestore获取活跃用户并展示在线状态？

当然有可行的JavaScript方案，核心思路是通过Firebase Auth监听用户登录状态，结合Firestore存储用户的在线状态字段，再通过实时监听Firestore文档变化来更新前端的状态标识。以下是具体实现步骤和代码：

1. 核心逻辑设计 #

• 为每个用户在Firestore的users集合中维护一个文档，包含isOnline（布尔值）和lastActive（时间戳）两个核心字段。
• 用户登录时自动将isOnline设为true，并更新lastActive为当前时间；用户登出、页面切换/关闭时将isOnline设为false并更新lastActive。
• 前端实时监听聊天对象的Firestore文档，根据isOnline或lastActive判断状态，渲染绿色/红色标识。

2. 代码实现 #

初始化Firebase（已配置前提下） #

import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged, signOut } from "firebase/auth";
import { getFirestore, doc, setDoc, updateDoc, onSnapshot } from "firebase/firestore";

// 替换为你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

处理用户登录/登出的状态更新 #

// 监听Auth状态变化，自动同步在线状态
onAuthStateChanged(auth, async (user) => {
  if (user) {
    const userDocRef = doc(db, "users", user.uid);
    
    // 登录时标记为在线
    await setDoc(userDocRef, {
      uid: user.uid,
      displayName: user.displayName,
      email: user.email,
      isOnline: true,
      lastActive: new Date()
    }, { merge: true });

    // 页面关闭/刷新时标记为离线
    window.addEventListener("beforeunload", async () => {
      await updateDoc(userDocRef, {
        isOnline: false,
        lastActive: new Date()
      });
    });

    // 标签页切换时更新状态
    document.addEventListener("visibilitychange", async () => {
      const updateData = { lastActive: new Date() };
      if (document.visibilityState === "visible") {
        updateData.isOnline = true;
      } else {
        updateData.isOnline = false;
      }
      await updateDoc(userDocRef, updateData);
    });
  }
});

// 手动登出时先更新状态
const handleSignOut = async () => {
  const currentUser = auth.currentUser;
  if (currentUser) {
    await updateDoc(doc(db, "users", currentUser.uid), {
      isOnline: false,
      lastActive: new Date()
    });
  }
  await signOut(auth);
};

实时监听用户状态并渲染标识 #

// 监听指定用户的状态，更新页面上的标识元素
const monitorUserStatus = (userId, statusElementId) => {
  const userDocRef = doc(db, "users", userId);
  
  // 实时监听文档变化
  onSnapshot(userDocRef, (docSnapshot) => {
    const statusElement = document.getElementById(statusElementId);
    if (!statusElement) return;

    if (docSnapshot.exists()) {
      const userData = docSnapshot.data();
      if (userData.isOnline) {
        // 在线：绿色标识
        statusElement.className = "status-indicator online";
        statusElement.title = "在线";
      } else {
        // 判断是否为最近活跃（比如5分钟内）
        const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
        if (userData.lastActive > fiveMinutesAgo) {
          statusElement.className = "status-indicator recently-active";
          statusElement.title = "刚刚在线";
        } else {
          // 离线/未登录：红色标识
          statusElement.className = "status-indicator offline";
          statusElement.title = "离线";
        }
      }
    } else {
      // 用户不存在（未登录过）：红色标识
      statusElement.className = "status-indicator offline";
      statusElement.title = "未登录";
    }
  });
};

// 示例：监听聊天对象的状态
monitorUserStatus("TARGET_USER_ID", "user-status-1");

配套CSS样式 #

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 8px;
}

.status-indicator.online {
  background-color: #2ecc71; /* 绿色 */
}

.status-indicator.recently-active {
  background-color: #f1c40f; /* 黄色（可选） */
}

.status-indicator.offline {
  background-color: #e74c3c; /* 红色 */
}

3. 关键注意事项 #

• Firestore安全规则：必须配置规则确保用户只能修改自己的文档，防止恶意篡改：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /users/{userId} {
        allow read: if request.auth != null;
        allow write: if request.auth != null && request.auth.uid == userId;
      }
    }
  }
  

• 页面卸载事件的局限性：beforeunload无法覆盖浏览器崩溃、设备断电等极端情况，此时可以通过lastActive字段判断——如果距离当前时间超过阈值（比如10分钟），则视为离线。
• 性能优化：如果是一对多聊天，避免同时监听大量用户文档，可以按需监听当前显示的聊天对象状态。

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