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

Uno de los puntos fuertes de NodeJS es la capacidad de trabajar de manera no bloqueante, lo que permite crear aplicaciones de tiempo real y de consumo intensivo de datos (operaciones de entrada y salida | Data intensive).

En esta serie de artículos vamos a crear (paso a paso) un sistema de chat basado en NodeJS y WebSockets, con su respectivo cliente web y capaz de almacenar el historial de conversaciones en MongoDB. Iniciaremos con lo mas básico y austero, posteriormente agregaremos funcionalidad y magia a nuestra aplicación.

Requisitos previos.

Para este “mini-proyecto” de aprendizaje necesitaremos cumplir los siguientes requisitos antes de comenzar a trabajar.

  • Un ambiente NodeJS configurado previamente (Linux | Windows | MacOS X).
  • Una instalación de MongoDB, operativa y funcional.
  • Conocimiento básico de javascript, css, html y NodeJS.

Una vez señalados los pre-requisitos, comencemos a trabajar.

Primeros pasos.

Creamos una carpeta especial para nuestro proyecto, en ella almacenaremos tanto el código javascript del servidor como el html para el frontend de nuestro sistema.

Dentro de la carpeta creamos un archivo javascript ‘server.js’ y una carpeta especial para las vistas ‘views/’. Dentro de ‘views’ crearemos la estructura para el frontend de la aplicaciónt (css, js, img). Al final tendremos una estructura similar a esta:

|-- Chat-SS
|   |-- views/
|       |-- css/
|       |-- img/
|       |-- js/
|       |-- chat.html
|-- server.js

Nuestro servidor (server.js) permanecerá a la escucha de nuevas conexiones a nuestro sistema, cada vez que un usuario/cliente ‘entre’ al sistema, nuestro servidor mostrara la pagina html del chat, la cual, por ahora, consistira de una lista de mensajes y un textarea para escribir y enviar mensajes.

Cada vez que un usuario envié un nuevo mensaje a través de su respectivo socket, el servidor se encargará de recibir y reenviar el mensaje a todos los usuarios conectados en ese momento, por su parte cada cliente recibirá el mensaje y lo agregara a la lista de mensajes en la pagina html mostrada al usuario.

Gracias al uso de sockets todo este proceso se ejecutará a una velocidad impresionante, tanto que no se notara ningún tiempo de espera entre que un usuario envía un mensaje y el resto de ellos lo recibe.

Para manejar los sockets de nuestra aplicación utilizaremos Socket.IO, para administrar las peticiones que llegan al servidor utilizaremos el sistema de routing del framework ExpressJS. Para tener ambas librerias disponibles dentro de nuestra aplicación las instalaremos desde la terminal ejecutando los siguientes comandos dentro del directorio de nuestra aplicación.

 >$ npm install --save socket.io
 >$ npm install --save express

El servidor.

Una vez instaladas las librerías escribiremos el código de nuestro servidor:

Algunas notas sobre el código del servidor:

  • Cada vez que un usuario se conecta, se dispara el evento ‘connection’ sobre el objeto ‘io’ y se crea un nuevo socket para el usuario nuevo.
  • A dicho socket se le agregan listeners (Escuchadores de evento) para los eventos ‘chat message’ y ‘disconnect’ los listeners se agregan a cada nuevo socket del sistema, es decir hay un socket (con sus respectivos listeners) para cada usuario conectado.
  • El evento ‘chat message’ es un nombre creado/inventado por nosotros para distinguir el tipo de trafico que esta pasando en ese momento por el socket. Por su parte, el cliente deberá enviar el mismo evento a través del socket para poder recibirlo dentro de este listener en el lado del servidor.

El cliente.

Ahora escribimos el código html/js para el cliente de la aplicación.

Algunas notas sobre el código del cliente.

  • El archivo ‘chat.html’ esta dentro de la carpeta ‘views’
  • JQuery se obtiene desde la web, por lo que no necesitamos incluir el archivo de la librería dentro de nuestra aplicación.
  • SocketIO en nuestro cliente es proporcionado por el servidor, no necesitamos especificarlo en nuestras rutas del servidor ya que SocketIO (Del lado del servidor) se encarga de hacer disponible la librería cliente a través de la ruta: ‘/socket.io/socket.io.js’.
  • Notese que cada vez que enviamos un mensaje desde el cliente lo enviamos con el evento ‘chat message’, ya que este evento es el que nuestro servidor esta escuchando para nuevos mensajes. Podríamos utilizar cualquier otro nombre que se nos ocurra siempre que no entre en conflicto con algún evento ya definido.

El resultado.

Nuestra aplicación esta lista para funcionar, ejecutamos el archivo ‘server.js’ en nuestro servidor y listo, este es el resultado:

Chat SS Ejecutandose

Podemos conectarnos desde tantos clientes como queramos, cada pestaña o ventana de cualquier browser sera un cliente nuevo en nuestra aplicación.

Siguientes pasos.

En los siguientes artículos agregaremos funcionalidad a nuestra aplicación:

En los siguientes días me dedicare a publicar el resto de entradas. Así que no le pierdas la pista a las entradas en el blog. Si tienes algún problema a la hora de seguir los artículos, puedes pedir ayuda a través de los comentarios. 🙂

Happy Coding !!

Anuncios

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

  1. Hola, fatnástico tutorial. Soy un novato y estoy creando el chat, ahora voy a la parte 2. Una pregunta ¿se podría modificar este chat para hacer uno de servicio al cliente para una tienda online de woocommerce? Uno de esos chats que se abren desde una lengüeta.

    1. Hola Fer, Genial que te haya gustado el tutorial. No he trabajado con woocommerce, pero en todo caso, si puedes agregar html y js propio en el cliente, y por otro lado puedes desplegar el servidor con NodeJS, entonces seguro puedes integrarlo.

  2. Hola muchas gracias por el tutorial me sirvio de base para crear mi aplicacion web, la cual consiste en una feria virtual. actualmente tengo 20.000 personas registradas al evento no todas se van a conectar asi que puedo estimar que puedo tener unas 5.000 personas usando mi aplicación. mi pregunta es que debo de tener en cuenta para que la aplicación no deje de funcionar durante el evento, estoy montando un servidor en amazon con 16 procesadores, 32 Ram y 320DD

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