WebSockets – Dashboard colaborativa

Desde hace unos años, se han puesto de moda la tecnología WebSocket.
Esta tecnología es una extensión del protocolo HTTP para simular un socket. Comunmente un sócket de comunicación es un recurso que se utiliza para poder transferir datos entre aplicaciones/máquinas. Existen varios tipos de sockets: UDP,TCP,RAW,UNIX,… cada uno se utiliza para una determinada función.

Por ejemplo, UDP se va muy bien para transferir grandes cantidades de datos ya que reduce el overhead introducido por cabeceras, Los sockets TCP se usan para las aplicaciones que no toleran errores en transmisión ya que posee un buen sistema de control de flujo y errores. En ambos casos existe un evidente problema: se necesitan abrir puertos específicos en los firewalls para poder establecer la conexión. Por defecto, el puerto 80/443 que utiliza el servidor de WebSocket suele estar abierto ya que son los puertos estándares de cualquier servidor HTTP.

Diagrama de Websockets

Este diagrama muestra la negociación y uso del protocolo de websockets

Este tipo de socket se utiliza en los navegadores para poder mantener un flujo de comunicación constante por lo facilita la operativa a los programadores web para tener el contenido actualizado en sus páginas. El clásico ejemplo de uso de websockets es construir una sala de chat en la que en tiempo real se reciben y envían mensajes (Hangouts utiliza websockets), las notificaciones de Facebook utilizan websockets.

Ejemplo básico de uso de Webcoskets con node JS
Servidor:

var server = require('websocket').server, http = require('http');

var socket = new server({
    httpServer: http.createServer().listen(1337)
});

socket.on('request', function(request) {
    var connection = request.accept(null, request.origin);

    connection.on('message', function(message) {
        console.log(message.utf8Data);
        connection.sendUTF('pong');
        setTimeout(function() {
            connection.sendUTF('[!] Server Event happended');
        }, 1000);
    });

    connection.on('close', function(connection) {
        console.log('connection closed');
    });
}); 

Cliente:

<div id="content"></div>

<script type="text/javascript">
    var content = document.getElementById('content');
    var socket = new WebSocket('ws://localhost:1337');
    socket.onopen = function () {
        setTimeout(function() {
                socket.send('ping');
        }, 1000);
    };
    socket.onmessage = function (message) {
        content.innerHTML += message.data +'<br />';
    };

    socket.onerror = function (error) {
        console.log('WebSocket error: ' + error);
    };
</script>

Fuente: http://hawkee.com/snippet/16051/

Para los que trabajamos en grupo en determinadas ocasiones necesitamos sincronizar determinadas tareas, como el reinicio y arranque de determinados servidores. Por ello poder avisar a los compañeros de que has iniciado la tarea y que lo reciban en tiempo real es importante, en esto nos ayudan los websockets. Si alguien quiere ver la potencia que ofrece este tipo de tecnología recomiendo ver una dashboard de ejemplo colaborativa que he diseñado para este fin. El código es libre y susceptible de aceptar mejoras:

https://github.com/berni69/ws-dashboard

Deja un comentario