Enviar mensajes
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
}
}
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿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.