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", () => {});
        }
      });
    }
  },
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

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 📬