Las aplicaciones web han ido cambiando y evolucionando, esto hace que las necesidades de los usuarios sean diferentes a cuando se creó el primer protocolo de conexión en la red. Consecuentemente el protocolo HTTP ha ido evolucionando a través de los años pero aún no llega a un nivel de tiempo real como por ejemplo una conexión TCP entre dos equipos.
Estas limitaciones más que perjudicar a los desarrolladores y los usuarios, se han vuelto una fuente de motivación y creatividad haciendo que se generen soluciones que nos permita no solo emular un sistema de transmisión en tiempo real, si no que podamos a través de HTTP hacerlo de forma casi nativa.
Websocket aun anda en periodo de maduración activa por lo cual es muy posible que no lo encontremos en nuevas soluciones, afortunadamente en Node.js ya tenemos algunas herramientas que nos permiten manejarlos sin tener que depender de nuestro ingenio para construir herramientas de más bajo nivel.
Para empezar a crear una aplicación que nos permita utilizar Websockets debemos en primer lugar construir una pequeña estructura, esta es muy sencilla pero necesaria, dicha estructura va a consistir de:
1- Una carpeta donde almacenaremos los archivos de nuestro proyecto.
2- Un archivo llamado servidor.js, este archivo como su nombre lo indica será el servidor a través del cual vamos a establecer la conexión en tiempo real utilizando los Websockets.
3- Un archivo llamado cliente.html, este archivo será la interfaz para comunicarnos con nuestro servidor a través del navegador, es necesario tener el mismo para que podamos enviar y recibir la información correspondiente.
Ya que tenemos nuestra estructura definida ahora podemos empezar a echar unas cuantas líneas de código, para ello debemos empezar por instalar una librería externa llamada ws en nuestro entorno, ya que esta es la que nos permitirá el uso del protocolo en cuestión. Para instalar dicha librería solo debemos abrir nuestra consola de Node.js, nos ubicamos en la carpeta donde estarán nuestros archivos y colocamos el siguiente comando:
Una vez que hemos instalado la librería podemos continuar nuestro trabajo, ahora en nuestro archivo servidor.js debemos escribir el siguiente código, en primer lugar veamos en que consiste luego lo explicaremos:
Ya que hemos definido nuestra instancia ahora vamos a aplicar el método .on() para el evento de conexión, luego en el callback de la misma le pasamos un objeto llamado socket, con este vamos a recibir los mensajes del cliente y hemos escrito una rutina que si recibimos la palabra “Hola” el servidor devolverá un mensaje, donde a su vez también imprimiremos algo en la consola de comandos. Finalmente, si cerramos la conexión tendremos solo un mensaje en la consola.
Una vez que tenemos nuestro servidor es hora de construir nuestro cliente, para ello en el archivo cliente.html vamos a definir una estructura donde vamos a colocar etiquetas html y un JavaScript que funcionará como enlace con nuestro servidor. Veamos como luce nuestro archivo:
Acto seguido lo que hacemos es definir cada uno de los métodos que podemos recibir del servidor, así cada vez que enviemos algo se registrará en nuestra salida, todo gracias al método send(). El otro método que utilizamos es el onmessage() el cual se activa solo si nuestro servidor responde y el resultado lo añadimos en nuestro HTML.
Por último usamos los métodos onclose() y onerror(), el primero nos da un mensaje cuando la conexión con el Websocket es detenida o cerrada, y el segundo nos informa en caso que haya ocurrido cualquier error. Ya con esto solo nos queda iniciar el servidor en nuestra consola y poner a funcionar nuestro ejemplo, para ello utilizamos el siguiente comando:
En imagen podemos ver como la consola de comandos imprime el mensaje recibido incluso registra la dirección IP desde donde está recibiendo los datos, esto fue lo que programamos en nuestro archivo servidor.js, donde también indicamos que si recibíamos la palabra “Hola” enviaríamos un mensaje de respuesta que es justo lo que vemos en la ventana del navegador en la misma imagen. Ahora si refrescamos el navegador se rompe la conexión, esto también es registrado por nuestra aplicación veamos:
Por último si cerramos la conexión en nuestra consola con CTRL + C para detener el servidor, nuestro navegador dispara el manejador de errores y ahí veremos un nuevo mensaje:
Si hemos sido observadores podremos haber notado algo importante, en ningún momento para recibir respuestas hemos tenido que refrescar el navegador ni hacer una petición Ajax, todo ha sido bidireccional directamente con WebSockets, esto es lo que se denomina tiempo real.
Lo que hemos demostrado es una de las formas más rudimentarias y manuales que existen, sin embargo nos funciona para saber cómo es el flujo de trabajo, pero la funcionalidad real y lista para entornos de producción lo logramos con la librería socket.io, esta hace lo mismo que realizamos en el tutorial pero de forma mucho más compacta y menos propensa a errores por parte del desarrollador, lo que nos permite solamente concentrarnos en la lógica de la aplicación y no tanto en la parte técnica de la misma.
Para instalar socket.io simplemente debemos hacer un npm install socket.io y con ello desde el repositorio nos descargaremos la última versión estable de la librería, lo que nos permitirá iniciar nuestro desarrollo.
Con esto hemos finalizado este tutorial, con el cual hemos dado un paso importante dentro de Node.js al conocer cómo utilizar los Websockets, esta tecnología se está volviendo cada día más importante ya que nos ayuda a crear aplicaciones que jamás se pensaron en la web. Es importante además que nos documentemos acerca del protocolo ya que es una forma de entender el potencial de lo que podemos lograr simplemente desarrollando aplicaciones.
Estas limitaciones más que perjudicar a los desarrolladores y los usuarios, se han vuelto una fuente de motivación y creatividad haciendo que se generen soluciones que nos permita no solo emular un sistema de transmisión en tiempo real, si no que podamos a través de HTTP hacerlo de forma casi nativa.
Websocket
Es aquí donde surge el Websocket, un protocolo relativamente nuevo y que solo es soportado por los navegadores más modernos, el cual nos permite despojar a HTTP de todas sus restricciones y así poder comunicarnos de forma efectiva a través de las cabeceras GET.
Websocket aun anda en periodo de maduración activa por lo cual es muy posible que no lo encontremos en nuevas soluciones, afortunadamente en Node.js ya tenemos algunas herramientas que nos permiten manejarlos sin tener que depender de nuestro ingenio para construir herramientas de más bajo nivel.
Requisitos
Este es un tutorial avanzado, por lo que vamos a requerir en primer lugar una instalación funcional de Node.js en nuestro sistema, podemos darle un vistazo a este tutorial antes de seguir profundizando en este, adicionalmente necesitaremos permisos de administrador para poder instalar las librerías que vamos a utilizar. Debemos estar familiarizados con los conceptos de JavaScript como por ejemplo callback y funciones anónimas. Por ultimo debemos tener un editor de textos como Sublime Text que nos permita escribir los diferentes códigos que están en los ejemplos.
Crear un Websocket
Para empezar a crear una aplicación que nos permita utilizar Websockets debemos en primer lugar construir una pequeña estructura, esta es muy sencilla pero necesaria, dicha estructura va a consistir de:
1- Una carpeta donde almacenaremos los archivos de nuestro proyecto.
2- Un archivo llamado servidor.js, este archivo como su nombre lo indica será el servidor a través del cual vamos a establecer la conexión en tiempo real utilizando los Websockets.
3- Un archivo llamado cliente.html, este archivo será la interfaz para comunicarnos con nuestro servidor a través del navegador, es necesario tener el mismo para que podamos enviar y recibir la información correspondiente.
Ya que tenemos nuestra estructura definida ahora podemos empezar a echar unas cuantas líneas de código, para ello debemos empezar por instalar una librería externa llamada ws en nuestro entorno, ya que esta es la que nos permitirá el uso del protocolo en cuestión. Para instalar dicha librería solo debemos abrir nuestra consola de Node.js, nos ubicamos en la carpeta donde estarán nuestros archivos y colocamos el siguiente comando:
npm install wsAl ejecutarlo podemos ver el siguiente resultado en nuestra consola de comandos:
Una vez que hemos instalado la librería podemos continuar nuestro trabajo, ahora en nuestro archivo servidor.js debemos escribir el siguiente código, en primer lugar veamos en que consiste luego lo explicaremos:
var WSServer = require('ws').Server,
wss = new WSServer({port:8085});
wss.on('connection', function (socket) {
socket.on('message', function (msg) {
console.log('Recibido: ', msg, '\n', 'Desde la IP: ', socket.upgradeReq.connection.remoteAddress);
if (msg === 'Hola') { socket.send('Si funciona!'); }
});
socket.on('close', function (code, desc) {
console.log('Desconectado: ' + code + ' - ' + desc);
});
});Lo primero que hacemos es requerir la librería ws que acabamos de instalar e inmediatamente en la misma instrucción llamar a su clase Server, luego creamos una instancia con la cual vamos a crear un servidor que corra en el puerto 8085, este puerto puede ser cualquiera al que tengamos acceso en este caso se utiliza el 8085 para que no haya conflicto con otros servicios que actualmente están en este ambiente de pruebas.Ya que hemos definido nuestra instancia ahora vamos a aplicar el método .on() para el evento de conexión, luego en el callback de la misma le pasamos un objeto llamado socket, con este vamos a recibir los mensajes del cliente y hemos escrito una rutina que si recibimos la palabra “Hola” el servidor devolverá un mensaje, donde a su vez también imprimiremos algo en la consola de comandos. Finalmente, si cerramos la conexión tendremos solo un mensaje en la consola.
Una vez que tenemos nuestro servidor es hora de construir nuestro cliente, para ello en el archivo cliente.html vamos a definir una estructura donde vamos a colocar etiquetas html y un JavaScript que funcionará como enlace con nuestro servidor. Veamos como luce nuestro archivo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Cliente Websockets</title>
</head>
<body>
<input id=msg><button id=enviar>Enviar</button>
<div id=salida></div>
<script>
(function () {
var ws = new WebSocket("ws://localhost:8085"),
salida = document.getElementById('salida'),
enviar = document.getElementById('enviar');
function logStr(eventStr, msg) {
return '<div>' + eventStr + ': ' + msg + '</div>';
}
enviar.addEventListener('click', function () {
var msg = document.getElementById('msg').value;
ws.send(msg);
salida.innerHTML += logStr('Enviado', msg);
});
ws.onmessage = function (e) {
salida.innerHTML += logStr('Recibido', e.data);
};
ws.onclose = function (e) {
salida.innerHTML += logStr('Desconectado', e.code + '-' + e.type);
};
ws.onerror = function (e) {
salida.innerHTML += logStr('Error', e.data);
};
}());
</script>
</body>
</html>La parte HTML es bastante sencilla, tenemos un input de tipo texto y un botón de envío, así como un div llamado salida que es quien recibirá la información del servidor para mostrarla al usuario. Lo interesante viene en la etiqueta <script> donde lo primero que hacemos es crear un objeto del tipo WebSocket y le indicamos la ruta donde debe encontrar al mismo, en nuestro caso es el localhost:8085 y así podemos ver que ya toma sentido lo que hicimos en el servidor.js. Acto seguido enlazamos nuestros elementos de envío, texto y salida a variables que podamos utilizar.Acto seguido lo que hacemos es definir cada uno de los métodos que podemos recibir del servidor, así cada vez que enviemos algo se registrará en nuestra salida, todo gracias al método send(). El otro método que utilizamos es el onmessage() el cual se activa solo si nuestro servidor responde y el resultado lo añadimos en nuestro HTML.
Por último usamos los métodos onclose() y onerror(), el primero nos da un mensaje cuando la conexión con el Websocket es detenida o cerrada, y el segundo nos informa en caso que haya ocurrido cualquier error. Ya con esto solo nos queda iniciar el servidor en nuestra consola y poner a funcionar nuestro ejemplo, para ello utilizamos el siguiente comando:
node servidor.jsEsto levantará el servidor, pero para verificar la funcionalidad de nuestro código debemos ejecutar nuestro archivo cliente.html en nuestro navegador de preferencia y escribir algo en la caja de texto y presionar el botón enviar, esto generará la comunicación con el websocket y podremos ver la respuesta por consola:
En imagen podemos ver como la consola de comandos imprime el mensaje recibido incluso registra la dirección IP desde donde está recibiendo los datos, esto fue lo que programamos en nuestro archivo servidor.js, donde también indicamos que si recibíamos la palabra “Hola” enviaríamos un mensaje de respuesta que es justo lo que vemos en la ventana del navegador en la misma imagen. Ahora si refrescamos el navegador se rompe la conexión, esto también es registrado por nuestra aplicación veamos:
Por último si cerramos la conexión en nuestra consola con CTRL + C para detener el servidor, nuestro navegador dispara el manejador de errores y ahí veremos un nuevo mensaje:
Si hemos sido observadores podremos haber notado algo importante, en ningún momento para recibir respuestas hemos tenido que refrescar el navegador ni hacer una petición Ajax, todo ha sido bidireccional directamente con WebSockets, esto es lo que se denomina tiempo real.
Otras soluciones
Lo que hemos demostrado es una de las formas más rudimentarias y manuales que existen, sin embargo nos funciona para saber cómo es el flujo de trabajo, pero la funcionalidad real y lista para entornos de producción lo logramos con la librería socket.io, esta hace lo mismo que realizamos en el tutorial pero de forma mucho más compacta y menos propensa a errores por parte del desarrollador, lo que nos permite solamente concentrarnos en la lógica de la aplicación y no tanto en la parte técnica de la misma.
Para instalar socket.io simplemente debemos hacer un npm install socket.io y con ello desde el repositorio nos descargaremos la última versión estable de la librería, lo que nos permitirá iniciar nuestro desarrollo.
Con esto hemos finalizado este tutorial, con el cual hemos dado un paso importante dentro de Node.js al conocer cómo utilizar los Websockets, esta tecnología se está volviendo cada día más importante ya que nos ayuda a crear aplicaciones que jamás se pensaron en la web. Es importante además que nos documentemos acerca del protocolo ya que es una forma de entender el potencial de lo que podemos lograr simplemente desarrollando aplicaciones.
