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());    });  });