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 llamada roomsListener 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
Aprende Firebase en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬