Firebase，侦听读取

在 Firebase 中，侦听读取通常指的是使用 Firebase 实时数据库或 Firestore 数据库的监听功能来实时获取数据的变化。以下是使用 Firebase 实时数据库和 Firestore 的示例。

Firebase 实时数据库

首先，确保你已经安装了 Firebase 并在项目中初始化了 Firebase。

1. 安装 Firebase

npm install firebase

2. 初始化 Firebase

import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

3. 监听数据变化

const database = firebase.database();
const ref = database.ref('path/to/your/data');

ref.on('value', (snapshot) => {
  const data = snapshot.val();
  console.log('Data changed:', data);
});

Firestore

首先，确保你已经安装了 Firebase 并在项目中初始化了 Firestore。

1. 安装 Firebase

npm install firebase

2. 初始化 Firebase

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

3. 监听数据变化

const collectionRef = db.collection('yourCollectionName');

collectionRef.onSnapshot((snapshot) => {
  snapshot.docChanges().forEach((change) => {
    if (change.type === 'added') {
      console.log('New document:', change.doc.data());
    }
    if (change.type === 'modified') {
      console.log('Modified document:', change.doc.data());
    }
    if (change.type === 'removed') {
      console.log('Removed document:', change.doc.data());
    }
  });
});