Cómo crear un Chat con NodeJS y Socket.io


NodeJS, como te he mostrado en otros artículos, es una tecnología adecuada para la realización de aplicaciones en tiempo real, es por ello que la compleja tarea de realizar un chat con las tecnologías tradicionales, en NodeJS se realiza de manera sencilla, con la utilización de Socket.io, un módulo de Node.js para manejar Websockets,  permitiendo usarlos en cualquier navegador con una sola librería.

En este artículo te enseñaré cómo crear un chat simple utilizando Socket.io y el framework Express.js que ya he mostrado en otros artículos.

 Creando el proyecto

Para comenzar es necesario crear la estructura básica del proyecto, para ello debes crear una carpeta que puedes llamar “node_chat”, abre una terminal y sitúate en el directorio de dicha carpeta, luego ejecuta el comando express, el cual debe mostrarte en la consola, una salida como esta:

Salida del comando express.

Fig.1 Salida del comando express.

El comando crea, en el directorio indicado, una estructura de carpetas como la que te muestro en la Fig2.

Estructura de carpetas que crea el comando express.

Fig.2 Estructura del proyecto

Luego de haber creado la estructura básica del proyecto, hay que modificar el archivo package.json y cambiarle el nombre a la aplicación, puedes ponerle node_chat (estoy un poco creativo hoy), ve a la sección de dependencias y sustituye jade por ejs, ya que este último es un motor de plantillas más sencillo, pues las plantillas se escriben en HTML.

En este ejemplo vas a añadir como dependencia el módulo socket.io. Al final el contenido del archivo debe quedar así:

Modificaciones al archivo package.json.

Fig.3 Fichero package.json.

Con esto estas listo para ejecutar el comando npm install, el cual descargará las dependencias que necesita el proyecto a la carpeta node_modules para poder empezar a desarrollar.

Comando npm install en ejecución.

Fig.4 Comando npm install en ejecución.

Ejecutando el servidor web

Ahora debes modificar el archivo app.js. Comienza eliminando la línea 8 (user = require('./routes/user')), ya que en este ejemplo no se usará ese router.

De la misma forma puedes eliminar el archivo user.js dentro de la carpeta routes, además, cambia en la línea 17 (app.set('view engine', 'jade');)  la palabra jade por ejs, arriba te explicaba el porqué, y elimina la línea 30 (app.get('/users', user.list);).

Por último, en aras de integrar socket.io al servidor, debes cambiar las líneas encargadas de la creación del servidor web como te muestro a continuación:

Líneas encargadas de crear el servidor web antes de ser modificadas.

Fig.5 Líneas encargadas de crear el servidor web ANTES de ser modificadas.

 Líneas encargadas de crear el servidor web después de ser modificadas.

Fig.6 Líneas encargadas de crear el servidor web DESPUES de ser modificadas.

Con esto tienes un servidor web listo para ponerse en marcha. Para probar si todo va saliendo bien, ejecuta el comando node app.js, el cual debe brindar una salida como la que te muestro:

Salida del comando node app.js.

Fig.7 Salida del comando node app.js.

Creando el router encargado de manejar los mensajes

Debes crear el router que se encargará de manejar los mensajes que reciba del cliente. Para ello, hay que crear un archivo socket_server.js en la carpeta routes, e ir y agregarle el siguiente código:

Contenido del archivo socket_server.js.

Fig.8 Contenido del archivo socket_server.js.

Todas las aplicaciones con socket.io comienzan con un manejador para el evento connection, el cual se dispara cuando un cliente se conecta al servidor. Cuando esto suceda lo que harás será emitir, o sea, enviar a todos los que están conectados al servidor,  un evento message que transportará el mensaje “Welcome to our chat !!!”.

Además nos quedaremos a la escucha del evento send, cuando se produzca emitiremos un evento message con el mensaje recibido. Como ves, un comportamiento bastante sencillo.

Para que el router entre en funcionamiento es necesario añadir al archivo app.js, al final, la siguiente línea:

Línea que vincula el router con el servidor.

Fig.9 Línea que vincula el router con el servidor.

Creando el FrontEnd

Luego de creado el servidor, es necesario crear la parte visual de la aplicación. Para esta tarea lo primero que debes realizar es borrar los archivos .jade de la carpeta views y crear un archivo index.ejs, al que le se le añadirá el código siguiente:

Contenido del archivo index.ejs.

Fig.10 Contenido del archivo index.ejs.

Como puedes ver en el head se añaden dos archivos Javascript, el primero lo crearás y más adelante te explicaré su funcionamiento, el segundo es la librería de socket.io para el cliente.

En el body crea un div con identificador content que servirá de área de publicación para los mensajes y crea otro div con identificador controls que contendrá un campo de texto con id field y un botón con id send.

Ahora, como te mencionaba arriba, hay que crear el archivo chat.js dentro de la carpeta public/javascripts y adicionarle el código siguiente:

Contenido del archivo chat.js.

Fig.11 Contenido del archivo chat.js.

Como puedes ver, lo que se hace es conectarse haciendo uso del objeto io que proporciona la librería socket.io.js a la dirección en que se ejecuta el servidor. Luego te quedas a la escucha del evento message y cuando este ocurre, si es portador de un mensaje, se adiciona al div con id content creado anteriormente.

Por último, debes definir el botón que creaste, el evento onclick y como funcionalidad lo que hace, es obtener el texto del campo que tiene id field y emitir un evento send, que transportará el texto obtenido al servidor.

 Probando el Chat

Ya todo está listo para probar el chat. Para ello ejecuta el archivo app.js con node app.js y ve dentro del navegador web a la dirección http://localhost:3000. Debes ver algo como esto:

Visualización en el navegador de la aplicación.

Fig.12 Visualización en el navegador de la aplicación.

Conclusiones

Este artículo te ha proporcionado un tutorial de introducción al uso de NodeJS y socket.io en el desarrollo de aplicaciones en tiempo real, comprobando el potencial de NodeJS en este campo.

Además, se demuestra de manera fehaciente, la sencillez y limpieza que proporciona NodeJS a la hora de desarrollar aplicaciones y se comprueba las ventajas de desarrollar tanto en el cliente como en el servidor con un solo lenguaje: Javascript.

Espero te halla parecido interesante y útil el artículo de hoy. Happy Coding!