gpt4 book ai didi

javascript - 如何在 Reactjs 中监听 firebase 实时变化?

转载 作者:行者123 更新时间:2023-12-03 06:58:08 26 4
gpt4 key购买 nike

我正在使用 firebase 和 React js 创建一个实时聊天应用程序。我创建了一个 const functions = require('firebase-functions');
在火力基地内称为“ 聊天 ”。此集合包含独特的 房间ID (发送者和接收者的组合)并且该文档再次包含 子系列 称为“消息”。消息中的每个集合都有消息、时间、sender_id 和读取状态等信息。
现在,每次当我在聊天列表中收到新消息时,我都必须更新对话。我用 组件DidMount() 的方法| Reactjs 并编写以下代码:

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)。我想以这样一种方式编写查询,它会听取每个联系人的消息。为此,我必须取消对特定文档的限制。
请帮我。
先感谢您。
enter image description here
这是 Firebase 数据库的结构。
enter image description here
enter image description here

最佳答案

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

关于javascript - 如何在 Reactjs 中监听 firebase 实时变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63131734/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com