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
}
}
Código inicial
¿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.