亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Reactjs如何監聽firebase實時變化?

Reactjs如何監聽firebase實時變化?

慕虎7371278 2022-12-09 19:20:56
我正在使用 firebase 和 React js 創建一個實時聊天應用程序。我創建了一個 const functions = require('firebase-functions'); 在 firebase 中稱為“聊天”。該集合包含唯一的room_ID(發送者和接收者的組合),并且該文檔再次包含稱為“消息”的子集合。消息中的每個集合都有消息、時間、sender_id 和閱讀狀態等信息?,F在,每當我在聊天列表中收到一條新消息時,我都必須更新對話。我使用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)。我想以這樣一種方式編寫查詢,它會收聽每個聯系人的消息。為此,我必須刪除特定文檔的限制。請幫我。先感謝您。
查看完整描述

3 回答

?
翻過高山走不出你

TA貢獻1875條經驗 獲得超3個贊

我相信有一些更好的方法可以獲取您想要的數據:


將您的 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

          });

      });

  });

});


查看完整回答
反對 回復 2022-12-09
?
守候你守候我

TA貢獻1802條經驗 獲得超10個贊

查看 CollectionGroups 的文檔 - 將您的偵聽器設置為 .collectionGroup("messages") - 您將必須處理所有不同“聊天”文檔的更改。(提示:每個返回的消息 DocRef 都包含 refPath 字段 - 您可以簡單地解析它以找到“父”聊天文檔的路徑)



查看完整回答
反對 回復 2022-12-09
?
慕碼人2483693

TA貢獻1860條經驗 獲得超9個贊

為了擴展到@LeadDreamer 的回答,這對我有用,可以使用以下方法收聽集合中所有文檔的更改collectionGroup:


const unsub = () =>

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

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

      console.log(d.data());

    });

  });


查看完整回答
反對 回復 2022-12-09
  • 3 回答
  • 0 關注
  • 147 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號