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