Reactjs如何监听firebase实时变化？

Question

我正在使用 firebase 和 React js 创建一个实时聊天应用程序。我创建了一个 const functions = require('firebase-functions'); 在 firebase 中称为“聊天”。该集合包含唯一的room_ID（发送者和接收者的组合），并且该文档再次包含称为“消息”的子集合。消息中的每个集合都有消息、时间、sender_id 和阅读状态等信息。现在，每当我在聊天列表中收到一条新消息时，我都必须更新对话。我使用Reactjs的componentDidMount()方法并编写以下代码：firestore.collection('chats').doc("b7EuhNpdzXUlxhSgDkn2a6oReTl1_OZbrlH8FjmVFqSAtAc0A6TUHS3I3").collection("messages").onSnapshot(querySnapshot => {  console.log("querySnapshot", querySnapshot)  querySnapshot.docChanges().forEach(change => {    console.log("change", change)    if (change.type === 'added') {      this.setState({messages : [...this.state.messages, change.doc.data()]});      console.log('New city: ', change.doc.data());    }    if (change.type === 'modified') {      console.log('Modified city: ', change.doc.data());    }    if (change.type === 'removed') {      console.log('Removed city: ', change.doc.data());    }  });});你可以在这里看到，它只适用于一个房间（b7EuhNpdzXUlxhSgDkn2a6oReTl1_OZbrlH8FjmVFqSAtAc0A6TUHS3I3）。我想以这样一种方式编写查询，它会收听每个联系人的消息。为此，我必须删除特定文档的限制。请帮我。先感谢您。

Answer 1

我相信有一些更好的方法可以获取您想要的数据：

将您的 Firestore 重组为只有一个messages集合，如以下示例结构：

messages collection

    uid

    receiverUserId

    senderUserId

    msg

    read

    time

使用这种方法，您可以通过执行以下操作来过滤正在查看的文档，例如当前经过身份验证的用户从多个用户收到的文档：

firestore.collection("messages")

  .where("receiverUserId", "==", authUid)

  .onSnapshot(function(querySnapshot) {

     //do whatever

});

创建多个侦听器，每个chats文档一个，以观察其后续messages子集合。所以你可以做这样的未经测试的代码：

firestore.collection('chats').get().then(function(querySnapshot) {

  querySnapshot.forEach(function(doc) {

      var eachChatRef = firestore.collection('chats').doc(doc.documentID)

      var messagesRef = eachChatRef.collection("messages");

      messagesRef.onSnapshot(function(snapshot) {

          snapshot.docChanges().forEach(function(messageDoc) {

              // Do whatever

          });

      });

  });

});

Answer 2

查看 CollectionGroups 的文档 - 将您的侦听器设置为 .collectionGroup("messages") - 您将必须处理所有不同“聊天”文档的更改。（提示：每个返回的消息 DocRef 都包含 refPath 字段 - 您可以简单地解析它以找到“父”聊天文档的路径）

Answer 3

为了扩展到@LeadDreamer 的回答，这对我有用，可以使用以下方法收听集合中所有文档的更改collectionGroup：

const unsub = () =>

  onSnapshot(collectionGroup(db, "reservations"), (doc) => {

    doc.docs.forEach((d) => {

      console.log(d.data());

    });

  });