Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • En esta lección del Curso de Firebase añadiremos la función de enviar mensajes desde las salas de conversación permitiendo a otros usuarios interactuar en tiempo real.
  • Comenzaremos (como casi siempre) haciendo los cambios necesarios en el almacén central de estado, módulo messages.js. Por ejemplo añadiendo una nueva acción para escuchar el stream de mensajes.
async getMessages ({ commit }, roomID) {
  const query = db
    .collection("rooms")
    .doc(roomID)
    .collection("messages")
    .orderBy("createdAt", "desc")
    .onSnapshot(doSnapshot);

  commit("setMessagesListener", query);

  function doSnapshot(querySnapshot) {
    const messages = [];
    querySnapshot.forEach(doc => {
      let message = doc.data();
      message.id = doc.id;
      messages.unshift(message);
    });
    commit("setMessages", messages);
  }
},
  • Y por supuesto, para enviar los mensajes en sí.
async createMessage({ rootState }, { roomID, message }) {
  await db
    .collection("rooms")
    .doc(roomID)
    .collection("messages")
    .add({
      userId: rootState.user.user.uid,
      userName: rootState.user.user.displayName,
      message,
      createdAt: Date.now()
    });
},
  • Ahora sólo nos queda crear la vista para poder acceder a cualquier sala de conversación, visualizar y enviar los mensajes. Dentro de ViewRoom.vue tendremos un método local que conecte con Vuex.
async createMessage() {
    this.isLoading = true;
    try {
        await this.$store.dispatch("messages/createMessage", {
            roomID: this.id,
            message: this.message
        });
        this.scrollDown();
        this.message = "";
    } catch (error) {
        console.error(error.message)
        this.$toast.error(error.message);
    } finally {
    this.isLoading = false;
    }
},
  • Ahora, tras crear la nueva ruta en nuestro enrutador, todo debería funcionar.
{
  path: "/view/:id",
  name: "view",
  props: true,
  component: ViewRoom,
  meta: {
    requiresAuth: true
  }
}

Presentación


Firebase Auth


Cloud Firestore 🔥


Cloud Storage 🗄


No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue