Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

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