No podemos negar que Internet está creciendo, tanto en número de usuario, como en número de servicios que ofrece, así como en número de dispositivos que están conectados. Esto hace que las necesidades también sean mayores y las aplicaciones se adapten a cada una de ellas.
Hoy día, estamos acostumbrados a trabajar con aplicaciones cada vez más dinámicas. Donde el proceso de comunicación sea cada vez más transparente al usuario, de forma que no se perciba el constante diálogo con el servidor web. Estamos cada vez más familiarizados con aplicaciones que nos muestran información en tiempo real, ya sea el estado de la bolsa o el tiempo meteorológico de nuestra zona, aplicaciones que nos muestran notificaciones y se actualiza nuestra bandeja de correo electrónico, así como chats donde podemos conversar con otros usuarios.Una tecnología reciente que permite tener una comunicación bidireccional y persistente entre nuestras aplicaciones web y el servidor web, recibe el nombre de Websocket.
Calentando motores
Cuando accedemos a recursos usando nuestro cliente web utilizamos el protocolo HTTP, dicho protocolo establece las reglas para que nuestro navegador web y el servidor web, sepan cómo comunicarse y se entiendan.El proceso habitual en una petición web, requiere que ambas entidades (servidor y cliente) se "saluden", el cliente solicite el contenido, el servidor sirva el contenido, ambos se "despiden" y eliminan el vínculo. Todo ello explicado de una forma muy resumida.
El caso anterior, ocurre cuando accedemos a una web, el navegador web, empieza a solicitar todos los recursos, ya sean hojas de estilo, javascript o recursos ajax. Para cada recurso se debe repetir el ciclo anterior.
Una mejora que se incorporó en HTTP/2 es HTTP keep-alive, que permite suprimir el proceso de establecer la conexión y cierre de conexión para peticiones que se producen en el mismo intervalo de tiempo.
AJAX
Una de los paradigmas más potentes que permite hacer la comunicación entre cliente y servidor de forma más transparente al usuario, se conoce como peticiones AJAX. Muy resumidamente AJAX permite realizar peticiones desde una aplicación web en "background", es decir evitando tener que recargar todo el contenido que teníamos ya cargado anteriormente.AJAX, por definición funciona de forma asíncrona, aunque como vimos en el post (Interfaces AJAX: Peticiones de Javascript síncronas), también puede funcionar de forma síncrona.
Obviamente AJAX sigue el comportamiento HTTP que hemos comentado anteriormente.
¿Qué son los Websocket?
En el año 2011, se incorporó al estándar la tecnología websocket, que como podemos intuir la palabra está formada por web + socket. Socket, literalmente significa "enchufe" y es una tecnología con gran recorrido desde los inicios de Internet y permite conectar varias máquinas remotas a través de Internet. La palabra Web, se refiere a las tecnologías que hacen posible la programación de aplicaciones web que conforman la gran telaraña, entre ellas el protocolo HTTP que hemos introducido anteriormente.
El objetivo es crear conexiones persistentes y bidireccionales entre un cliente web y un servidor web. De esta forma una vez negociada la conexión y establecida, se abre un canal por el que tanto servidor como cliente puede enviar mensajes en tiempo real.
Todo ello utilizando el puerto estándar HTTP 80, y pudiendo añadir una capa adicional de seguridad mediante HTTPS.
El objetivo es crear conexiones persistentes y bidireccionales entre un cliente web y un servidor web. De esta forma una vez negociada la conexión y establecida, se abre un canal por el que tanto servidor como cliente puede enviar mensajes en tiempo real.
Todo ello utilizando el puerto estándar HTTP 80, y pudiendo añadir una capa adicional de seguridad mediante HTTPS.
Comparativa entre HTTP y Websocket
A estas alturas quizá puedas estar pensando que debemos usar websocket para todas las conexiones con el servidor y que todo son ventajas, pues esto no es cierto. Es una tecnología que requiere bastantes recursos y por ello sólo es aplicable en los casos que lo requieran y controlando muy bien el volumen de usuarios que van a trabajar con la aplicación de forma simultánea.HTTP, al no tener conexiones persistentes el servidor permite atender a más usuarios, websocket por el contrario cada usuario que se conecta empieza a consumir recursos del servidor.
Por hacer una comparativa cómica entre ambas tecnologías, hacer peticiones HTTP típicas se asemeja a acudir al supermercado, comprar tu bebida favorita e irte, las conexiones websocker por el contrario se asemejan a acudir al bar más cercano, sentarte en la barra y empezar a pedir al camarero que te sirva tu bebida favorita.
El primer caso, vemos que es más incómodo para el usuario, pero en el momento que termina su compra y sale por la puerta, permite que más clientes puedan comprar, en el segundo caso vemos que es una situación más cómoda para el cliente, dado que el camarero está dispuesto a servir tu bebida preferida en cualquier momento, por contra cada usuario ocupa un lugar en el bar y poco a poco se va llenando hasta el momento de no admitir más clientes.
Por lo tanto, es recomendable usar websocket solo en situaciones que lo requieran, aplicaciones donde se vea una necesidad de tener un flujo constante de información, como por ejemplo un chat, un sistema de monitorización, un juego en tiempo real.
Jugando con Websocket
Para poner en contexto todo lo anterior me gustaría proponer un ejemplo muy simple de uso.
Imaginemos que tenemos un servidor que recoge datos meteorológicos de nuestro barrio en tiempo real, este servidor admite conexiones a través de un websocket en el puerto 80. Y por el momento no incorpora mecanismo de autenticación.
Imaginemos que tenemos un servidor que recoge datos meteorológicos de nuestro barrio en tiempo real, este servidor admite conexiones a través de un websocket en el puerto 80. Y por el momento no incorpora mecanismo de autenticación.
Se nos solicita implementar una aplicación web donde poder ver en tiempo real, los diferentes parámetros, como puede ser la temperatura, el viento, la presión atmosférica, la humedad etc.
Existen diferentes alternativas para poder incorporar conexiones websocket a nuestras aplicaciones, quizá una de las más interesantes es Angular Websocket, módulo de conexión para Angular JS 1.x.
Este módulo se puede instalar muy fácilmente usando bower:
> bower install angular-websocket --save
> bower install angular-websocket --save
Una de las ventajas es que la API es bastante simple como veremos a continuación.
Así pues nos ponemos manos a la obra, y implementamos nuestro servicio Angular, que puede tener una pinta como la del siguiente fragmento de código.
Y el esqueleto de nuestro controlador principal:
Una vez solucionado el escollo de la comunicación podemos dedicarnos a trabajar sobre la visualización de los datos. Para este tipo de representaciones un paquete muy interesante es Highcharts.
Se autodefine con la siguiente frase:
"Highcharts makes it easy for developers to set up interactive charts in their web pages"
"Highcharts makes it easy for developers to set up interactive charts in their web pages"
Highcharts no depende de ningún framework frontend, pero para nuestro caso nos puede interesar hacer uso de "highcharts-ng" que es una wrapper de highcharts para proyectos Angular JS 1.x e implementa usa serie de directivas que nos facilitan el desarrollo.
Se instala con bower:
Para ayudarnos "highcharts-ng" en su documentación nos proporciona diferentes ejemplo. Enlace a ejemplo.
Y por último aquí podemos ver un ejemplo de como se puede visualizar la información que nos proporciona nuestro servidor meteorológico mediante websocket.
Y por último aquí podemos ver un ejemplo de como se puede visualizar la información que nos proporciona nuestro servidor meteorológico mediante websocket.
Si te resulta interesante el tema y crees que puede ser útil para otros lectores, no dudes en compartirlo en las redes sociales y en dejar un comentario si quieres complementar el post ;-)
No hay comentarios:
Publicar un comentario