Servicio rest con nodejs, express 4 y mysql
Servicio rest con nodejs, express 4 y mysql
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Vamos a ver un ejemplo completo sobre como montar un chat con NodeJS y SocketIO, la tecnología que nos permite llevar a cabo este tipo de aplicaciones de forma relativamente sencilla.

La meta de socketio es hacer posible aplicaciones en tiempo real en todos los navegadores y dispositivos móviles, evitando a los programadores las diferencias entre éstos y todas sus complicaciones.

Gracias a socketio, un paquete para Node.js y también para Express, podemos crear aplicaciones ajax en los dos sentidos, cosa que antes, podía ser una labor extremadamente complicada, es decir, tanto de comunicación entre el cliente y el servidor, como viceversa, del servidor al cliente, y ésto simplemente con unas pocas líneas de código javascript.

Chat con Nodejs y SocketIO

Nosotros haremos nuestro ejemplo haciendo uso del framework Express, ya que pienso que nos facilita enormemente la faena, así que podemos empezar a trabajar, espero que te guste y, si no lo has hecho ya, te sirva para terminar de entender la forma en la que trabaja socketio.

¿Que tendrá y como funcionará nuestro chat?

Para el tema de los estilos haremos uso de bootstrap en su nueva versión, la 3.0, como en anteriores tutoriales, haremos uso de las ventanas modales del framework css, que son sencillas y quedan bastante bien.

Para un sencillo control de si el usuario ha iniciado sesión o no en la zona del cliente, haremos uso de sessionStorage, de esta forma, al entrar en nuestra aplicación, lo primero que comprobaremos es si existe una sesión que llamaremos login, y, si no es así, mostraremos en una ventana modal el formulario de login, el cuál simplemente tendrá un campo de texto para escribir un nombre. Este nombre será validado en la zona del servidor con la ayuda de socketio, el cuál para cada conexión crea una ‘sesión única’.

Una vez el usuario haya iniciado sesión correctamente, aparecerá un mensaje a todos los usuarios conectados actualmente, inclusive él, diciendo que un usuario nuevo se ha conectado.

En la zona derecha del chat, tendremos un sidebar, el cuál contendrá todos los nombres de los usuarios conectados, cada vez que uno se conecte, aparecerá, cuando se desconecte(cerrar el navegador, actualizar la página) desaparecerá del sidebar.

Tendremos una sencilla función, a la que llamaremos en varias ocasiones, y lo que hace es simplemente mandar el scroll del contenedor de mensajes siempre al final, de esta forma, el usuario siempre verá los nuevos mensajes enviados, creo que es necesario en cualquier chat.

¿Te interesa el curso de NodeJS y SocketIO?

obtén más información ahora

En cursosdesarrolloweb tienes toda la información que puedas necesitar sobre el curso de SocketIO y muchos más.


Con esta explicación, ya conocemos las funcionalidades del chat.

Creamos el proyecto

Nos colocamos en el directorio donde vayamos a crear el proyecto y escribimos en la terminal los siguientes comandos.

Y a continuación:

Ya tenemos creado el proyecto, ahora necesitamos instalar el paquete de socketio, es realmente sencillo, simplemente debemos escribir el siguiente comando en la terminal.

Una vez finalice el proceso, ya podremos hacer uso de todos los recursos de socketio, no puede ser más sencillo.

Cualquier duda referente a los pasos anteriores, es obvio que necesitas ver este tutorial.

El archivo app.js

Ahora la cosa cambia, socketio necesita una configuración distinta de cuando realizamos un proyecto normal haciendo uso de NodeJS y Express, para más información puedes leer un poco aquí.

Tu, simplemente debes copiar el siguiente código, el cuál ya hace lo necesario para empezar.

 
Ésto es lo básico para nuestra aplicación, pero con éllo no haremos demasiado, así que échale un ojo a ese código, y una vez entiendas su funcionamiento, modificalo por el siguiente, el cuál si que contiene toda la funcionalidad.
 

Todo está explicado en cada sección, y de forma muy clara, o lo más clara que soy capaz de explicar.

Veamos los eventos que tenemos en nuestro chat y veamos que hacen.

El evento loginUser, creo que sabemos lo que hace, veamos una imagen.

chat con nodejs y socketio

Ésto es lo que encontramos cuando accedemos al chat. Cuando un usuario llena el campo de texto y pulsa el botón de login, pasa una sencilla validación en la zona del cliente que he preparado con jQuery, si la pasa, socketio intercepta esta petición a través del evento loginUser, hace otras sencillas comprobaciones, y si todo está bien, da paso al usuario al chat y lo asocia a un identificador único, a través del cuál socket sabe como identificarlo en las próximas peticiones, creo que se puede entender.

El evento userInUse simplemente comprueba si el nombre que ha escogido el usuario existe en un objeto llamado usuariosOnline que nosotros hemos creado, si es así, sale de la aplicación y se emite desde la zona del cliente con jQuery. Lo único que hace es, justo debajo del campo de texto de la ventana modal mostrar un mensaje conforme ese nombre ya está en uso, sencillo.

El evento refreshChat simplemente intercepta lo que se debe mostrar en la ventana de mensajes, cuando un usuario se conecta, muestra un mensaje, cuando se desconecta, lo mismo, cuando envia un nuevo mensaje, lo muestra. Este evento recibe dos parámetros, el primero me ha servido para darle un poco de lógica, y lo utilizo para saber si es una nueva conexión, soy yo etc. Como el resto de las ocasiones, ésto se hace en la zona del cliente con jQuery.

Aquí una sencilla imagen de como mostramos los mensajes.

Chat con Node.js, Express y SocketIO

El evento updateSidebarUsers simplemente se lanza tanto en el evento loginUser como en el evento disconnect(también viene por defecto en socketio), y lo que hace es utilizar como parámetro el objeto usuariosOnline y pasarlo a la zona cliente(jQuery) para recorrerlo y mostrar los usuarios actuales en el sidebar, si es que los hay, que también lo comprobamos :).

El evento addNewMessage intercepta cuando un usuario escribe un nuevo mensaje de texto y lo envía al servidor, en ese momento, socketio lo recibe y hacemos un par de peticiones. Con socket.emit mostramos el mensaje sólo para ese usuario, y con socket.broadcast.emit para el resto de usuarios, creo que si lees un poco el código, entenderás el porqué de hacerlo así.

Digierelo, tómate tu tiempo, y más si es la primera aproximación a socketio, sé que es un concepto algo complicado.

El archivo views/layout.jade

Ahora abre este archivo y modificalo por el siguiente.
 

Llamamos a los cdns de bootstrap tanto para el css como el js, y al de jQuery, cargamos nuestra hoja de estilos style.css y el archivo functions.js, creo que debe estar muy claro ésto.

Fíjate en como estamos llamando a la librería socket.io.js, ésto siempre debe ser así, ya que es como está programado por el equipo que ha creado socket.

El archivo views/index.jade

Abrimos este archivo y añadimos el siguiente código, el cuál simplemente es html.

Como hemos podido ver, tenemos dos archivos, stylesheets/style.css y javascripts/functions.js, ´cada uno en su respectiva carpeta en public, así que abrimos styles.css y modificamos el código por el siguiente.

Creo que no merece explicación.

El archivo functions.js

Este archivo no existe, así que lo creamos en public/javascripts y dentro añadimos el siguiente código, el cuál conecta con el servidor gracias a la instancia que creamos de socketio.

Como podemos ver, todo es jQuery, la variable socket que hemos creado, nos permite comunicarnos con el servidor a través de eventos.

Estoy seguro de que si tratas de leer este código y has leído las explicaciones anteriores en la zona del servidor, serás capaz de entender todo lo que está pasando aquí, no voy a detenerme en explicarlo, aparte de todo, porque lo he comentado todo en cada sección, y creo que se entiende perfectamente.

Si no eres programador y necesitas un chat, este no es tu post, y no te voy a explicar a como instalarlo, creo que no es el tema que tratamos, para cualquier otra duda relacionada con la programación del post, en lo que pueda estaré pendiente para echar una mano.

El código completo en github para descargar

Espero que te haya gustado y te sea útil, saludos.