Parte 3 | Creando un sistema de chat sobre NodeJS con Socket.IO, ExpressJS, MongoDB, Foundation y Openshift

Finalmente he podido escribir la tercera parte de esta serie de artículos, para recordar, aquí están las cinco partes ordenadas:

Esta vez vamos a realizar la parte 3, vamos a agregar a nuestra aplicación la funcionalidad de registrar todos los mensajes enviados en una colección sobre MongoDB, almacenando el nombre del usuario que envía el mensaje, la fecha en que se envió el mensaje y obviamente, el texto del mensaje. Y ya que ahora dispondremos de estos datos, vamos a mostrar a cada usuario conectado los últimos mensajes enviados, así como el usuario y el momento en que se envía cada mensaje.

Comenzaremos habilitando a nuestra aplicación para registrar todos los mensajes:

Registro de todos los mensajes enviados

¿Recuerdas el archivo UsersDAO.js para manipular datos de los usuarios en MongoDB? Pues necesitamos también un archivo para poder manipular los mensajes registrados. Para lo cual crearemos un archivo MessagesDAO.js el cual tendrá dos funciones principales: addMessage y getLatest, así es, registrar un nuevo mensaje y obtener los últimos mensajes registrados.

El código de nuestro MessagesDAO:

Lo que hay que destacar:

  • Al igual que nuestro UsersDAO, nuestro MessagesDAO requiere un objeto conectado a la base de datos al momento de ser creado.
  • El programador será quien indique a la función getLatest cuantos mensajes obtener, en nuestro caso solo obtendremos los últimos 50 mensajes, ordenados del más reciente al más antiguo.
  • No podemos obtener todos los mensajes ya que esto podría tomar demasiado tiempo y crear una mala experiencia para el usuario.
  • Si mostrar todos los mensajes al usuario fuera necesario, Posiblemente debemos utilizar alguna técnica de paginación y cargar los mensajes mediante AJAX según conforme el usuario lo solicite. Pero eso es algo que quedara fuera del alcance de esta aplicación.

Ahora trabajaremos con nuestro server.js

Las mejoras al servidor

Lo primero es requerir el módulo ‘MessagesDAO’ para poder utilizarlo en nuestro servidor:

Anteriormente al recibir un nuevo mensaje el servidor simplemente lo enviaba a todos los clientes conectados, ahora antes de reenviarlo debemos registrarlo en la base de datos:

Cada vez que un usuario se conecta solicita al servidor los últimos mensajes, el servidor atiende esta petición mediante:

El código de nuestro server.js ahora es:

  • Sobre la linea 95 (moment.js): para mostrar el momento en que cada mensaje fue enviado, nos apoyaremos en moment.js por lo cual el servidor debe ser capaz de servir esta libreria.

Las mejoras del lado del cliente.

Cada vez que se inicia la conexión al sistema, vamos a solicitar al servidor los últimos mensajes registrados durante nuestras conversaciones anteriores:

El servidor nos responderá con un Array de objetos JSON de nuestros mensajes, cada uno de esos mensajes se agregara a la lista de mensajes recibidos en nuestra conversación:

Debido a que ahora agregamos mensajes a nuestra conversación desde diferentes puntos en nuestra aplicación, ponemos esta funcionalidad en una función independiente para poder reutilizar código y no reinventar la rueda:

Sobre moment.js

Para mostrar la fecha y hora en que cada mensaje fue enviado vamos a utilizar moment.js. Es una librería que le da formato a los objetos Date de javascript, en nuestro caso formateamos las fechas como se muestra en la imagen:

moment js

Por otro lado, a partir de ahora, cada vez que enviemos un mensaje no sólo enviaremos el texto de dicho mensaje, también enviaremos el nombre del usuario que generó el mensaje:

Organizando el código del cliente

A medida que nuestra aplicación crece, es una mala práctica mantener javascript y html en un mismo archivo, por lo cual pondremos el código javascript en un archivo separado. ahora tenemos dos archivos:

...
./views/chat.html
./views/js/chat.js
...

El código completo para el cliente:

chat.html

chat.js

El resultado

¡Lo hemos logrado. Esto se pone mejor cada dia.!
Para poner a funcionar la aplicación asegúrate de iniciar primero el servidor de mongodb para poder establecer la conexión desde nuestra aplicación, después bastará con ejecutar nuestro servidor:

~$ nodejs server.js

Parte 3

El código está documentado, asegúrate de leerlo detenidamente junto con la documentación incluida.

Ahora nuestra aplicación tiene toda la funcionalidad deseada, solo nos queda hacer que se vea fantástica y hacer nuestra vista responsiva. Posteriormente la desplegaremos en Openshift, para poder utilizarla desde cualquier lugar y compartirla con nuestro grupo de amigos nerds.

En los siguientes artículos:

Si esto ha sido demasiado confuso para ti, o la aplicación se niega a cooperar contigo no dudes en comentar tus problemas de nerd programador sobre este post.

Happy Coding !! 🙂

Anuncios

12 comentarios sobre “Parte 3 | Creando un sistema de chat sobre NodeJS con Socket.IO, ExpressJS, MongoDB, Foundation y Openshift

  1. He visto la parte 1, me pareció excelente y logré correrlo, ahora ando intentado la parte 2.. solo que tengo problemas con la instalación de MongoDB, espero lograrlo pronto.
    Seguiré tus posts (me suscribo), gracias!!

  2. En la linea 19 a la 23 del codigo server.js se tiene lo siguiente:

    /* MongoDB Configurations */
    var mdbconf = {
    host: ‘172.17.0.5’,
    port: ‘27017’,
    db: ‘chatSS’
    };

    Si notas tiene la direccion del host es una ip que no es local, cambiala por tu localhost y funcionara, por lo mismo no puedes conectarte a la bd.

    Saludos y suerte

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s