Enviar mensajes

• 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
  }
}