Angular 2, Firebase y materialize css - Parte 3 - Creación y visualización de los mensajes del chat

     En el anterior artículo vimos como ir guardando en la BBDD de firebase, los diferentes mensajes que el usuario va escribiendo, pero no vimos como mostrarlos por pantalla.  Hoy vamos a ver esto. Muestro a continuación una captura de la pantalla de la aplicación para recordar su apariencia:

      Para poder ir mostrando los mensajes que vamos escribiendo por pantalla, debemos capturar algún evento de pulsación de teclado. Esto lo vamos a hacer mediante la captura del evento keyup, que se produce cada vez que pulsamos una tecla.

   Como vemos en la última linea, lo capturamos con (keyup)="onKeyUp($event)" en la linea que corresponde a la caja de texto para escribir los mensajes. Además, vamos a guardar el mensaje en la variable llamada "mensaje". Esto lo hacemos con [(ngModel)]="mensaje"

  onKeyUp es la función que definimos en Angular, para capturar este evento, y le pasamos el objeto $event, que contendrá la tecla pulsada.

  Además, como también queremos ir mostrando en tiempo real en el chat, los mensajes que cada usuario va escribiendo, necesitamos otro objeto Firebase del tipo observable:

Como vemos en la linea:

   private mensajes: FirebaseListObservable<any[]>;

Estamos definiendo un objeto que guardará todos los mensajes, y además actualizará esta lista de mensajes en tiempo real. En el constructor, vemos como lo inicializamos:

   this.mensajes = af.database.list("/mensajes")

   Además, this.mensajes, es también el objeto sobre el que el evento onKeyUp escribirá el mensaje, usando el método push, del objeto this.mensajes.

Ahora ya podríamos hacer una prueba de guardar un mensaje, como el siguiente:

  Después de escribir el mensaje "hola como estás?" y pulsar la tecla intro, si nos vamos a la interface de Firebase, veremos que el mensaje ha sido creado con la misma estructura que le hemos indicado en el método push, y colgando del nodo "mensajes". Este nodo lo ha creado automáticamente Firebase. Nosotros no hemos tenido que crearlo. Esto es una de las características de Firebase.

Ya sabemos como guardar los mensajes. Los que nos hace falta ahora es mostrarlos. Y además, mostrar al inicio, cuando nos autentificamos, los últimos mensajes guardados.  Para esto vamos a crear otro objeto del tipo FireBaseListObservable, para cargar al inicio, cuando nos autentificamos, los mensajes que hubieran guardados de una sesión anterior. Este objeto lo llamaremos mensajesSesionActual.

 Y añadimos el código necesario al final del método ngChangeNick, haciendo la consulta correspondiente sobre el objeto mensajesSessionActual, mediante el método list de dicho objeto.

Y para poder visualizar estos mensajes cargados en el objeto mensajesSessionActual, necesitamos renderizar este objeto en la vista del componente. El código hace esto en la vista quedaría así:

A continuación vemos una pantalla final, de como queda la aplicación con un chat entre 2 personas:

  En el próximo capítulo cambiaremos un poco el modo en que guardamos los usuarios y el modo de autentificación, ya que nos validaremos con la autentificación integrada que proporciona Firebase, con los diferentes proveedores (google, facebook, twiter, etc, ...).
    De momento aquí tienes el vídeo de lo explicado en este capítulo: