P4 WEBSOCKETS

Practica HTML 5: chat con websockets.

Vamos a programar una aplicación web de chat entre multiples usuarios usando websocket, utilizando un servidor ws en Node.js.

Conceptos básicos:

¿Qué es websocket? Es una tecnología que proporciona un canal de comunicacion bidireccional sin sobrecargas de gestión para obtener respuestas en tiempo real. Se basa en el protocolo TCP.

¿Qué es node.js? Node.js es un entorno de programación en la capa del servidor basado en el lenguaje de programación Javascript.

Voy a intentar explicarlo en 4 pasos simples, para que gente sin mucha experiencia pueda desarrollar esta práctica.

PASO 0: Instalar node.js en nuestro ordenador, aquí publico el link donde poder descargarlo. https://nodejs.org/

PASO 1: Comunicación entre servidor y cliente a partir de la biblioteca socket.io.

PASO 2: Utilización de la librería de java (JQuery), para poder manipular de forma dinámica los elementos del árbol DOM.

PASO 3: Añadir un registro de usuarios, paro poder controlar que no se repitan “Nicks”.

Vamos a comenzar con el desarrollo de este tutorial, que bajo mi punto de vista es de los 4 post que llevo publicados el más sencillo y divertido.

PASO 0: Instalando node.js.

Una vez descargado el fichero de la web https://nodejs.org/, En primer lugar vamos a crear un package.json archivo que describe nuestro proyecto. Te recomiendo que lo coloques en un directorio vacío (lo llamaré por ejemplo chat).

En nuestro carpeta /chat tendremos que tener los siguientes archivos y ficheros:

-       Una carpeta node_modules, la cual no tendremos que tocar.

-        Un archivo package.json.

-       Un archivo app.js donde desarrollaremos la parte del server

-       Un archivo index.html donde se encontrara la parte del cliente.

 PASO 1: Comunicación cliente-server a partir de socket.io

¿Qué es socket.io? Socket.io es una librería JavaScript para comunicación web en tiempo real entre cliente y servidor.

En este PASO 1 vamos a tener que estar muy atentos a mis indicaciones para hacerlo funcionar. Como ya he dicho vamos a tener dos ficheros claves en esta practica, en mi caso los he llamado index.html y app.js. Vamos a ir desmenuzando el código para saber que hace cada linea. 

Comenzamos encendiendo el server y haciéndole escuchar en un puerto, en mi caso el 3000.

Las 5 primeras lineas son variables, que mas tarde usaremos para la comunicación, y la linea 7 es la que permite tener al servidor escuchando en el puerto 3000.

De la linea 9 a la 12 de nuestro fichero app.js, lo que hacemos es esperar una petición GET del cliente y responderle con el envío de un fichero index.html que todavía no tenemos implementado.

Continuamos con nuestro app.js y una vez explicada toda la reception y reenvio de mensajes nos meteremos con el fichero index.html que tendrá el cliente.

De la linea 14 a la 42, estaría todo el codigo neceario para terminar de implementar nuestra app.js, pero vamos a ir analizando que hace cada cosa. Bueno como ya he dicho socket.io es una librería de javascrip, por lo que si habéis hecho mis antiguos post os sonarán cosas. 

La línea 14 arranca el servidor y lo deja pacientemente encendido esperando algún tipo de mensaje. 

De la linea 16 a la 27, lo que se encarga el servidor es de recibir un mensaje INIT que tendrá que ser enviado por el cliente y reenviar un mensaje WELCOME con el fin de que el resto de clientes sepan de la conexión del cliente que se acaba de conectar.

De la linea 29 a la 33, el servidor gestiona los mensajes WRITER que le llegan de un cliente y los reenvía 'send writer' en forma de span al resto de clientes.

Por último de la linea  35 a la 39, el servidor estará atento por si algún cliente se desconecta, y en tal caso enviará a todos los clientes conectados al chat un mensaje LOGOUT, para que sepan que se ha ido del chat.

Aquí terminaríamos con nuestro server y ahora tendríamos que analizar lo que se encuentra en la parte cliente. Como ya hemos dicho el cliente hace una petición GET y el servidor le responde con un fichero.html, en nuestro caso index.html que va consistir en lo siguiente:

Para la parte del cliente lo primero, es hacer nuestra estructura html con su correspondiente css. Tener en cuenta que los identificadores van a ser claves a la hora de dar dinamismo a la pagina.

PASO 2. Utilización de la librería de java (JQuery), para poder manipular de forma dinámica los elementos del árbol DOM.

Lo primero que hacemos es, justo debajo de nuestra estructura html insertar dos scrip que hacen referencia el primero a la librería jQuery y el segundo a la librería socket.io.js. Luego insertamos un tercer scrip donde nombraremos a todos los id del html antes mencionados.

Este tercer scrip va ser el más importante ya que va ser el encargado de comunicarse con nuestro servidor. Vamos a ir analizando como envío el mensaje INIT y WRITER y como recibo el mensaje WELCOME, send writer y LOGOUT.

Si nos fijamos en la linea 95 es donde nos habíamos quedado antes y ahora le he implementado el envio de un mensaje INIT y la recepción de un mensaje WELCOME. LA recepción del welcome no tiene mucho misterio, pero el envío del INIT tiene algo que hace especial a node.js y es la bidirecionalidad que tiene con el servidor, es decir, el cliente le enviara un mensaje al server y si tenéis el código del server podeis ver que en caso de que no sea aceptado se comunicará con el cliente para decirle que el NICK no es correcto. Esto lo hace a partir de una función callback que si le dedicais un poco de tiempo lo entendereis sin problema.

Continuemos con la transmisión de mensajes WRITER y su recepción 'send writer'.

No hay mucho que añadir, si hemos entendido la funcionalidad del envio de INIT y recepción welcome, esto es más de lo mismo, lo único es que cuando recibo en send writer, le envio dos valores que son el nick de quien lo dice y el mensaje que envía en una tupla.

Por último entender la recepción del LOGOUT, que no es más que una recepción de mensaje más

Con esto tendríamos todo el código necesario, para hacer funcionar nuestro chat con un registro de usuarios y así poder permitir que no entren al chat dos clientes con el mismo Nick. En el PASO 3 no voy a añadir más código simplemente voy a matizar el código necesario para entender como es posible gestionar lo de los nick repetidos.

PASO 3: Código, para poder controlar que no se repitan “Nicks”.

Como ya he dicho todo el código de mi chat esta en las imágenes que he publicado, de hecho hay alguna imagen con código repetido.

Vamos a intentar explicar lo más “complicadillo” de este chat, que es que cuando nos registremos con un usuario que ya este en el chat no nos deje entrar.  

Bien esto va a estar en la parte del servidor, quien va almacenar un array con todos los nicks del server. Si miramos en el código de la figura_2 vemos que hay una variable llamada nicknames[], esta va ser un array de nombres. En el código de la figura_4 linea 18 cuando recibimos el INIT tenemos una condición que es: if (nicknames.indexOf(name) != -1)

Esta condición hace que si llega un nick repetido se cumpla y directamente se meta llamando a la función callback y salte nickError. Si no se cumple esta condición es que el nick no esta repetido entonces añadiremos a nuestro array como siempre hemos hecho.

nicknames.push(socket.nickname);

Por último cuando algún user salga del chat tiene que dejar el nick libre para que otro lo pueda usar y eso lo hacemos con la siguiente linea de codigo:

nicknames.splice(nicknames.indexOf(socket.nickname), 1);

Y hasta aquí nuestro tutorial, espero que les haya gustado y nos vemos detro de poco con otra tecnología de servidor, llamada webRTC, audio y video en tiempo real. Un saludo.