Mostrando conversación

Clase 49 de 63Curso de Angular 6 2018

Resumen

Para mostrar la conversación creamos el método getConversation en nuestro servicio conversation. Este método usará los uids de los dos usuarios que participan en la conversación para obtener los registros desde la base de datos.

El resultado de la consulta a la base de datos es devuelto en un arreglo de objetos json con los detalles que definimos para cada mensaje de la conversación, los cuales mostraremos en el componente html utilizando la directiva *ngFor para recorrerlo y mostrar un elemento div para cada uno de los mensajes recibidos.

A cada elemento message del arreglo, le asignaremos un atributo buleano llamado seen para indicar que el mensaje ya ha sido mostrado. Adicionalmente reproduciremos un audio cada vez que se muestre un nuevo mensaje. Esto lo haremos creando un objeto Audio de html5 al que le asignaremos el src con la url del archivo de audio seleccionado y ejecutando luego el método play()