[英]How to listen firebase real-time changes into Reactjs?
我正在使用 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)。 我想以这样一种方式编写查询,它会听取每个联系人的消息。 为此,我必须取消对特定文档的限制。
请帮我。
先感谢您。
这是Firebase数据库的结构。
我相信一些更好的方法来获取你想要的数据是:
将您的 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 }); }); }); });
查看 CollectionGroups 的文档 - 将您的侦听器设置为 the.collectionGroup("messages") - 您将必须处理所有不同“聊天”文档的更改。 (提示:每个返回的消息 DocRef 都包含 refPath 字段 - 您可以轻松解析该字段以找到“父”聊天文档的路径)
要扩展到@LeadDreamer 答案,这对我来说可以使用collectionGroup
收听集合中所有文档的更改:
const unsub = () =>
onSnapshot(collectionGroup(db, "reservations"), (doc) => {
doc.docs.forEach((d) => {
console.log(d.data());
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.