SALA DE CHAT CON TECNOLOGÍA JAVASCRIPT

LUIS ALFREDO MORA OSUNA

INGENIERIA DE SISTEMAS

MONTERIA, CORDOBA
2018
Tabla de contenido
Tecnologías requeridas: ..................................................................................................................... 3
Creando el directorio de la aplicación ............................................................................................... 4
Creación del index.js........................................................................................................................... 5
Creando archivos css y html: .............................................................................................................. 8
Empezando la conexión en tiempo real con socket io .................................................................... 13
Asignar puertos automáticamente .................................................................................................. 16
Interfaz .............................................................................................................................................. 16
Login y listar Usuarios....................................................................................................................... 21
Enviar mensaje privado .................................................................................................................... 28
Conexión a base de datos local ........................................................................................................ 30
Almacenando datos en la base de datos ......................................................................................... 32
Conexión base de datos mLab.......................................................................................................... 34
Subir proyecto .................................................................................................................................. 38
SALA DE CHAT CON TECNOLOGIA JAVASCRIPT
En esta guía se muestra paso a paso como se desarrolla una sala de chat con tecnología JavaScript
en el cual se pueden enviar mensajes grupales y además mensajes privados. Así mismo se
almacenarán los mensajes en una base de datos utilizando el gestor MongoDB y posteriormente
como se publica en la web.

Tecnologías requeridas:
NodeJS
Es una tecnología que nos permite hacer desarrollos back-end usando únicamente JavaScript.

SocketIO
Es una librería que nos permite manejar eventos en tiempo real mediante el protocolo TCP usando
únicamente JavaScript. Es muy potente y podemos hacer cualquier tipo de aplicación en tiempo
real.

WebSocket
Es una tecnología que proporciona un canal de comunicación bidireccional y full-duplex sobre un
único socket TCP. Está diseñada para ser implementada en navegadores y servidores web, pero
puede utilizarse por cualquier aplicación cliente/servidor. La API de WebSocket está siendo
normalizada por el W3C, mientras que el protocolo WebSocket ya fue normalizado por la IETF como
el RFC 6455. Debido a que las conexiones TCP comunes sobre puertos diferentes al 80 son
habitualmente bloqueadas por los administradores de redes, el uso de esta tecnología
proporcionaría una solución a este tipo de limitaciones proveyendo una funcionalidad similar a la
apertura de varias conexiones en distintos puertos, pero multiplexando diferentes servicios
WebSocket sobre un único puerto TCP (a costa de una pequeña sobrecarga del protocolo)

MongoDB (Aplicación)

MongoDB es un sistema de base de datos NoSQL orientado a documentos, desarrollado bajo el

concepto de código abierto. MongoDB forma parte de la nueva familia de sistemas de base de datos
NoSQL.

Heroku (plataforma)
Es una plataforma como servicio de computación en la Nube que soporta distintos lenguajes de
programación.

mLab
Es un servicio de base de datos en la nube totalmente administrado que aloja bases de datos
MongoDB. mLab se ejecuta en los proveedores de la nube Amazon, Google y Microsoft Azure, y se
ha asociado con proveedores de plataforma como servicio.
Creando el directorio de la aplicación
Crear la carpeta de nuestro proyecto

 C:\Users\LuisAlfredo\Documents\Programacion Web\chat-nodejs

Escoger el editor en el que se va a trabajar, es este caso será SUBLIME TEXT, por cuestiones prácticas
se recomienda agregar la terminal o la consola del sistema operativo al editor: en sublime se hace
de la siguiente manera:

- Abrir sublime text

- Usar la combinación de teclas Shift + Ctrl + P
- digitar en el cuadro de búsqueda package Control: install package + Enter
-

- Digita en el buscador Terminality que es el plugin que permite utilizar la terminal del equipo.

- Una vez instalado se ejecuta de la siguiente manera:

-clic derecho y se escoge la opción Open terminal Here.
 - Se vera de la siguiente manera:

De esta manera ya tendremos podremos continuar con proyecto.

Creación del index.js

La manera en cómo funciona un chat es la siguiente: comúnmente se cree que son dos usuarios
conectados entre sí, pero en la web no funciona de esta manera, en la web se maneja un modelo
llamado Cliente – servidor. En resumen, este modelo dicta que todos los usuarios van a estar
conectados a un servidor y que los datos siempre van a pasar por dicho dispositivo y de ahí se
retransmiten entre los usuarios conectados.

El primer paso fundamental es crear el servidor básico. Para con el enviar la aplicación y luego enviar
los mensajes.

Servidor que envía la aplicación

- Iniciar un proyecto en nodejs:

En la consola digitar el siguiente código:
- PS C:\Users\carpetaDondeAlmacenaElProyecto\nombreDelProyecto.
En este caso es PS C:\Users\LuisAlfredo \Documents\Programacion Web\chat-nodejs>
- Digitar el comando NPM INIT – YES

- Esto lo que hace es crear un archivo que se llama Package.json que almacena la
configuración del proyecto.

- A parte de este archivo hay que instalar dependencias, código del cual el proyecto depende.
- Instalar un framework que se llama express, que permitirá escribir el código del
proyecto de una manera más sencilla reutilizando código ya elaborado y
probado.
- Se instala con el comando npm install express. Esto tomará un tiempo, pero
cuando termine la instalación se verá de la siguiente manera.
una vez instalado express vamos al archivo Index.js y requerimos el framework, de la siguiente
manera.

Esto significa que nuestro servidor esta listo para escuchar nuevos usuarios. Vamos al navegador y
en la barra de búsqueda escribimos localhost:3000
Aparecerá este “error”, el cual significa que nuestro servidor aun no tiene que responderle al
usuario, por eso marca error, pero está funcionando perfectamente.

Creando archivos css y html:

Como el orden es una muy buena practica a la hora de desarrollar vamos a crear una serie de
carpetas donde almacenaremos nuestros archivos css y html, archivos que el servidor enviará al
navegador para mostrar al usuario.

Creamos una carpeta que se llame public y dentro de ella un archivo llamado Index.html

Y escribimos dentro la estructura html.

vamos al archivo index.js y le especificamos la ruta en la que se encuentra nuestro html.

Vamos al navegador y lo refrescamos nuevamente y aparecerá nuestra interfaz
Ahora crearemos las demás carpetas para guardar nuestros estilos y además los scripts que iremos
creando.
Existe una herramienta que genera gradientes llamada uigradients la cual genera unos colores
mucho mas interesantes la encuentras aquí: https://uigradients.com/

así se ve nuestra interfaz al aplicar el gradiente:

probamos los scripts
Empezando la conexión en tiempo real con socket io

instalar el módulo socket io con el comando npm install socket.io

el cual permite conexión en tiempo real.

Ahora, utilizando el módulo http de nodejs crearemos nuevamente el servidor, pero para dárselo
a socketio para que de esta manera la aplicación funcione en tiempo real. Esto además permite
importar el código javascript que detecta cuando cada usuario se conecta.
vamos a la carpeta public y en el archivo index.html agregamos lo siguiente:

esto con el fin de cargar el documento JavaScript de socket.io

con esto podremos detectar cuando los usuarios estén conectados al servidor.
Como buena practica se recomienda organizar el código en una carpeta llamada src y nuestra
carpeta raíz debería quedar de la siguiente manera.

Para tener un poco más organizado el código de nuestro

proyecto vamos a separar el archivo de nuestro socket io en un archivo distinto el cual quedara de
la siguiente manera.
Asignar puertos automáticamente

Interfaz
Para diseñar la interfaz se hace uso de un framework de css llamado Bootstrap que se puede
descargar desde su página oficial https://getbootstrap.com/
Una vez terminado el formulario hay que enviar esos datos a la conexión socket donde se enviarán
y recibirán los mensajes, esto se hace en el directorio js/script.js
ahora hay que enviar los mensajes al servidor para que este los remita a las demás conexiones.
como muestra la imagen ya nuestro servidor está registrando los usuarios conectados y además ya
esta recibiendo los datos enviados desde el formulario.
Login y listar Usuarios
En el archivo index.html agregamos el siguiente código:

luego vamos al archivo script.js y agregamos el siguiente código

configuración del servidor al recibir los datos del login
si el usuario esta registrado oculta el login y muestra el chat además envía a los usuarios el
nombre del nuevo usuario conectado.
actualiza los usuarios conectados archivo sockets.js
Agregando el nombre del que emite el mensaje
Enviar mensaje privado
Conexión a base de datos local
Instalaremos MongoDB como gestor de base de datos se descarga desde su web oficial

https://www.mongodb.com/

en el disco C: creamos un directorio de nombre data y dentro de este otro que se llame db

una vez instalado ejecutamos el módulo MONGOD.EXE

C:\Program Files\MongoDB\Server\3.6\bin

Instaremos una biblioteca de mongoDB llamada MONGOOSE desde la consola con el comando
npm install mongoose

En la carpeta raíz del proyecto creamos una nueva carpeta que se llame DB y en ella un archivo
que se llame msj.js el cual almacenará la estructura con la cual se guardaran los mensajes en la
base de datos

Luego hacemos lo siguiente.

Una vez hecha estas configuraciones en la consola ejecutaremos el siguiente comando el cual si
todo marcha bien nos devolverá en siguiente mensaje
Almacenando datos en la base de datos
En la carpeta raíz, en el directorio src creamos una carpeta que se llame DB y dentro de esta
creamos un archivo llamado msj.js y dentro de este se agrega el siguiente código
Conexión base de datos mLab
Una vez creado nuestra cuenta en mLab ingresamos a nuestra dashboard de mLab

seleccionamos el proveedor de nube

Creamos un usuario para conectar nuestra base de datos
Subir proyecto
En esta sección vamos a ver como subir el proyecto a la web para acceder a el desde cualquier
dispositivo

Vamos a utilizar Heroku para trabajar la parte de NodeJs y la plataforma mLab para gestionar
MongoDB.

Lo primero es crear una cuenta en el Heroku desde el link

https://signup.heroku.com/?c=70130000001x9jFAAQ

luego hacer el registro en mLab

https://mlab.com/signup/

iniciar Heroku

desde el cmd del sistema operativo ejecutamos el código heroku --version y encontraremos esto:

esto significa que heroku quedo instalado correctamente.

Una vez dentro:

Esto nos llevara una ventana donde escogeremos un nombre valido para nuestra aplicación

Una vez registrado nuestra app se nos abre una nueva ventana en la cual vamos a encontrar lo
siguiente

En el apartado deploy (desplegar) encontraremos todos los pasos para subir nuestro proyecto

Están listados de la siguiente manera

1) Descargar e instalar GIT el cual servirá como gestor para la transferencia de los
archivos locales al servidor remoto de heroku.
2) En la carpeta raíz del proyecto abrir el terminal y escribir el siguiente comando: heroku
login
3) Ingresar el usuario y la contraseña de la cuenta previamente creada en heroku.
4) Dentro de la misma carpeta del proyecto, en la ruta que nos muestra el cmd
Debe aparecer de la siguiente manera PS
C:\Users\LuisAlfredo\Documents\Programacion Web\chat-nodejs>
5) Una vez allí crearemos un repositorio vacío de git con el comando git init
 6) A su vez tenemos que decirle a git en donde va a guardar dichos archivos eso se hace
mediante el comando heroku git:remote -a nombre-del-proyecto
7) Una vez creado el repositorio vamos a conocer que va a subir git y se hace mediante el
comando git estatus
8) Allí en rojo aparece todo lo que se va a subir a heroku.
9) Con el comando git add . se le dice a git que se prepare para subir los archivos
10) Luego se agrega un comentario con el comando git commit -am "comentario sobre el
cambio realizado"
11) Una vez todo esto este finalizado agregamos el comando git push heroku master
presionamos enter y automáticamente se comenzarán a subir todos los archivos al
servidor de heroku.

estos son los pasos según heroku

ya con esto para ejecutar nuestro proyecto solo basta con darle en
y ahí tendremos nuestro proyecto ejecutándose.