一次删除多个 firebase 侦听器

时间:2021-05-25 00:01:00

标签: javascript firebase react-native firebase-realtime-database google-cloud-firestore

我正在创建一个具有本机反应的应用程序,并面临以下问题:我在整个应用程序中创建了多个 firebase 侦听器,准确地说是在不同屏幕上的侦听器,以及侦听 firebase-database 的侦听器和其他侦听 {{ 1}}。

我想要完成的是通过一次调用或必要时使用多行但尽可能紧凑的方式杀死所有这些听众 - 并且从听众甚至没有运行的完全不同的屏幕,这很重要。

我知道可以使用 firestore 但这只会使我与 Firebase 断开连接 - 它不会阻止侦听器。我一再Firebase.goOffline(),听众都回来了。

我还没有从谷歌等那里找到针对这个问题的任何解决方案,这就是我现在尝试在这里提问的原因,如果有人知道如何处理这种行为的方法,我会很高兴。

以下代码示例为您提供了我在应用中包含的侦听器,它们位于同一屏幕中,但我在其他屏幕中的侦听器几乎相同。

数据库监听器:

goOnline()

Firestore 侦听器:(这个很长,那只是因为我过滤了从侦听器中检索到的文档)

const statusListener = () => {
        var partnerRef = firebase.database().ref(`users/${partnerId}/onlineState`);
        partnerRef.on('value', function(snapshot){
            setPartnerState(snapshot.val())
        })
    };

这两个侦听器都在 useEffect 钩子中像这样调用:(useEffect 末尾带有空大括号可确保这些侦听器仅被调用一次而不是多次。)

const loadnewmessages = () =>{ firebase.firestore().collection("chatrooms").doc(`${chatId}`).collection(`${chatId}`).orderBy("timestamp").limit(50).onSnapshot((snapshot)  => {
            var newmessages = [];
            var deletedmesssages = [];
            snapshot.docChanges().forEach((change) => {
                if(change.type  === "added"){
                    newmessages.push({
                        counter: change.doc.data().counter,
                        sender: change.doc.data().sender,
                        timestamp: change.doc.data().timestamp.toString(),
                        value: change.doc.data().value,
                        displayedTime: new Date(change.doc.data().displayedTime)
                    })
                };
                if(change.type  === "removed"){
                    deletedmesssages.push({
                        counter: change.doc.data().counter,
                        sender: change.doc.data().sender,
                        timestamp: change.doc.data().timestamp.toString(),
                        value: change.doc.data().value,
                        displayedTime: new Date(change.doc.data().displayedTime)
                    })
                };

            })
            if(newmessages.length > 0){
                setChatMessages(chatmessages => {
                    return chatmessages.concat(newmessages)
                });
            };
            if(deletedmesssages.length > 0){
                setChatMessages(chatmessages => {
                    var modifythisarray = chatmessages;
                    let index = chatmessages.map(e => e.timestamp).indexOf(`${deletedmesssages[0].timestamp}`);
                    let pasttime = Date.now() - parseInt(modifythisarray[index].timestamp);
                    modifythisarray.splice(index, 1);
                    if(pasttime > 300000){
                        return chatmessages
                    }else{
                        return modifythisarray
                    }
                });
                setRefreshFlatList(refreshFlatlist => {
                    //console.log("Aktueller Status von refresher: ", refreshFlatlist);
                    return !refreshFlatlist
                });
            }
            newmessages = [];
            deletedmesssages = [];
        })
    };

1 个答案:

答案 0 :(得分:2)

所有订阅函数都返回取消订阅函数

const unSubscriptions = [];

... Where you subscribe
const unSub = document.onSnapshot(listener);
subscriptions.push(unSub);

... Where you unsubscribe all
function unSubAll () {
   unSubscriptions.forEach((unSub) => unSub());
   // Clear the array
   unSubscriptions.length = 0;
}