如何在JavaScript类中实现Firebase onValue等效实时监听器？

完全可以在你的DatabaseService类中实现等效于onValue()的实时监听功能，还可以封装取消监听的逻辑，让API更简洁易用。

实现步骤 #

• 从firebase/database导入onValue（注册监听）和off（移除监听）函数
• 在类中维护一个对象存储监听引用，方便后续取消特定路径的监听
• 添加listen方法处理实时监听逻辑，添加unlisten方法用于移除监听

修改后的DatabaseService.js #

import { db } from "../firebase";
import { ref, get, set, update, remove, onValue, off } from "firebase/database";

class DatabaseService {
    // 存储各路径的监听引用，用于后续取消监听
    listeners = {};

    get = async (_ref = "") => {
        let output;
        await get(ref(db, _ref)).then((snapshot) => {
            output = snapshot.val();
        });
        return output;
    }

    create = async (_ref = "", _content) => {
        await set(ref(db, _ref), _content);
    };

    update = async (_ref = "", _content) => {
        await update(ref(db, _ref), _content);
    };

    remove = async (_ref = "") => {
        await remove(ref(db, _ref));
    };

    // 实时监听数据变化，回调返回最新数据
    listen = (_ref = "", callback) => {
        const databaseRef = ref(db, _ref);
        // 注册监听，触发时将数据快照的值传给回调
        onValue(databaseRef, (snapshot) => {
            callback(snapshot.val());
        });
        // 保存引用，便于后续取消监听
        this.listeners[_ref] = databaseRef;
    };

    // 取消指定路径的实时监听
    unlisten = (_ref = "") => {
        if (this.listeners[_ref]) {
            off(this.listeners[_ref], "value");
            delete this.listeners[_ref];
        }
    };
}

const DB = new DatabaseService();

export default DB;

使用示例（example.js） #

import DB from "./services/DatabaseService";

const roomRef = "rooms/42534";

// 创建房间
await DB.create(roomRef, {
  name: "NicolAme's Room",
  owner: 0,
  players: {
    0: {
      pseudo: "NicolAme",
      score: 0
    }
  }
});

// 监听房间数据变化，每次更新都会触发回调
DB.listen(roomRef, (roomData) => {
  console.log("房间数据已更新:", roomData);
});

// 2秒后修改房间名称，触发监听回调
setTimeout(async () => {
  await DB.update(roomRef, { name: "Best Room Ever" });
}, 2000);

// 5秒后取消监听
setTimeout(() => {
  DB.unlisten(roomRef);
  console.log("已停止监听房间数据");
}, 5000);

// 10秒后删除房间
setTimeout(async () => {
  await DB.remove(roomRef);
}, 10000);

function App() {
  return <>
    <p>Sample</p>
  </>
}

export default App;

注意事项 #

• 如果需要获取完整的Firebase数据快照（而非仅数据值），可以修改listen方法的回调参数为snapshot，让调用方自行处理
• 保留listeners对象是为了避免内存泄漏，确保不再需要监听时能正确移除
• 如果同一路径需要支持多个回调，可以将listeners的值改为数组，存储对应路径的所有回调函数

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