Escuchar cambios en tiempo real y des-suscribirse de ellos
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Antes de continuar debemos solucionar dos situaciones que se dan en nuestro módulo
rooms.js
. - La primera es que no estamos desactivando el query listener que generamos con la acción
getRooms
. Lo solucionaremos guardando el query en una pieza del estado llamadaroomsListener
e invocándola en su momento para des-suscribirnos. - La segunda se centra en cómo manejamos la información de las salas de conversación cuando hay un cambio: sobre-escribiendo todo.
- Sería mucho mejor escuchar los cambios locales que ocurren sobre los documentos que existen en la colección que se consuta. Podemos hacerlo con el método
docChanges()
y una mutación para cada tipo de cambio.
const state = {
...
roomsListener: () => {}
};
const mutations = {
...
setRoomsListener(state, listener) {
if (listener) {
state.roomsListener = listener;
} else {
state.roomsListener();
}
},
createRoom(state, { roomData, id }) {
roomData.id = id;
state.rooms.unshift(roomData);
},
updateRoom(state, { index, roomData, id }) {
roomData.id = id;
state.rooms[index] = roomData;
},
removeRoom(state, index) {
state.rooms.splice(index, 1);
}
};
async getRooms({ commit }) {
const query = db
.collection("rooms")
.orderBy("createdAt", "desc")
.onSnapshot(doSnapShot);
commit("setRoomsListener", query);
function doSnapShot(querySnapshot) {
commit("setLoading", true, { root: true });
querySnapshot.docChanges().forEach(change => {
if (change.type === "added") {
commit("createRoom", {
roomData: change.doc.data(),
id: change.doc.id
});
}
if (change.type === "modified") {
commit("updateRoom", {
index: change.newIndex,
roomData: change.doc.data(),
id: change.doc.id
});
}
if (change.type === "removed") {
commit("removeRoom", change.oldIndex);
}
});
commit("setLoading", false, { root: true });
}
},
- Por último podemos llamar a la recién creada mutación
setRoomsListener
en el momento el que hacemos logout para dedactivar el query listener.
actions: {
checkAuth({ dispatch, commit }) {
auth.onAuthStateChanged(function(user) {
if (user) {
...
} else {
...
commit("rooms/setRoomsListener", () => {});
}
});
}
},
Código inicial
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.