De todas las novedades que nos ha traído HTML5 el API de WebSockets es probablemente una de las que más desapercibidas ha pasado, probablemente porque de cara al usuario no presenta ninguna novedad evidente. Sin embargo para los desarrolladores si supone una novedad importante a la hora de desarrollar nuestras aplicaciones web.

Durante la última década los desarrolladores de aplicaciones hemos estado buscando formas de comunicarnos con el navegador de una forma asíncrona y bidireccional, pero debido a que los navegadores no estaban pensados para enviar información la búsqueda no ha sido una tarea fácil. Han surjido varias tecnologías que de una u otra manera resuelven el problema, pero ninguna resuelve el problema completamente.

Los WebSockets de HTML5 han sido diseñados desde cero con el prósito de proveernos con una comunicación asíncrona y bidireccional con el navegador, independiente del tipo de datos que queramos enviar (binarios o texto). La comunicación con los WebSockets se realiza a través de una única conexión HTTP, por lo que además de ser una comunicación muy eficiente, funciona sin problemas a través de proxies, cortafuegos y demás parafernalia.

La especificación de los WebSockets es todavía un borrador, pero pese a ello muchos fabricantes de navegadores han implementado este API en sus productos. De esta manera podemos utilizar WebSockets sin problemas en Chrome, Safari y Firefox.

En el siguiente ejemplo vemos como podemos utilizar el API WebSockets en nuestra página web:

<html>
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script>
      $(document).ready(function(){
        function debug(str){ $("#debug").append("<p>"+str+"</p>"); };
          ws = new WebSocket("ws://localhost:8080/websocket");
          ws.onmessage = function(evt) { $("#msg").append("<p>"+evt.data+"</p>"); };
          ws.onclose = function() { debug("socket closed"); };
          ws.onopen = function() {
          debug("conectado...");
          ws.send("Hola, servidor!");
        };
      });
    </script>
  </head>
  <body>
    <div id="debug"></div>
    <div id="msg"></div>
  </body>
</html>

En esta página vemos como al cargarse el documento se ejecuta el código javascript que nos conectará con el servidor de WebSockets. Lo primero que debemos hacer para iniciar la comunicación es crear un objeto WebSocket y especificar la url donde se encuentra el servicio al que queremos conectarnos. Una vez hecho esto podemos especificar las acciones que realizaremos cuando nos llegue un mensaje, cuando se cree la conexión o cuando se cierre. También podemos ver claramente la naturaleza bidireccional de los Websocket, con el método send podemos enviar mensajes al servidor, mientras que con el método onmessage recibimos los datos del servidor en cuanto son enviados.

Seguramente no habréis visto ningún mensaje que no sea "socket closed". Esto es porque no hemos arrancado la parte servidora de esta aplicación, por lo que no tiene manera de funcionar.

Los Websockets funcionan como una extensión de HTTP, por lo que a través de un intercambio de mensajes habilitaremos una conexión con el navegador del usuario. Esto es parecido a una conexión TCP directa, pero con algunas limitaciones para mantener la seguridad del navegador. Pensemos que si un servidor externo pudiera abrir una conexión TCP desde el navegador podría utilizarse esto con fines como mandar spam, o cosas aún menos éticas.

Para iniciar un servidor de WebSockets vamos a utilizar la gem em-websocket de Ruby. Con unas pocas línes podemos tener nuestro servidor listo:

require 'em-websocket'

EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |ws|
  ws.onopen    { ws.send "Hola, mundo!"}
  ws.onmessage { |msg| ws.send "Pong: #{msg}" }
  ws.onclose   { puts "WebSocket cerrado" }
end

Este código inicia el servidor, envía el mensage "Hola, mundo!", y en caso de recibir un mensage del navegador escribe "Pong". Si lo ejecutáis y recargáis el HTML del ejemplo anterior veréis cómo ya no aparece el mensaje de error y veréis los mensajes.

Este es un ejemplo muy básico de cómo podemos utilizar los Websockets para enviar mensajes entre un servidor y el navegador, pero realmente la parte del navegador es opcional. Si tuvieramos un cliente HTTP compatible con Websockets podríamos utilizar éstos para comunicación asíncrona entre aplicaciones. La versión actual de EventMachine, la gem que hemos utilizado para construir este ejemplo, no soporta WebSockets, por lo que no podemos utilizarla para crear un ejemplo de cliente, pero esperemos que pronto tengan una versión que los soporte.

De todas maneras el uso para el que se pensaron los WebSockets es su uso con el navegador, por lo que podemos utilizarlos sin problemas para aplicaciones "convencionales".

Publicado por Rubén el 24/05/2013 a las 12:10


Comentarios:

Enviado por Johnd394

el 28/12/2015 a las 14:26

requirements. Recognitions pro suggestion like operative, balanced, explanatory as well as moreover exuberance thinkings about this issue to Gloria. eaeaggdkaefa

Enviado por Pharmf992

el 29/12/2015 a las 05:18

Very nice site! [url=http://apxoiey2.com/qovst/2.html]cheap goods[/url]

Enviado por Pharmg386

el 30/12/2015 a las 11:15

Very nice site! [url=http://apeoixy2.com/xqqst/2.html]cheap goods[/url]

Enviado por Pharmk643

el 31/12/2015 a las 17:23

Very nice site! cheap goods

Enviado por Pharmd772

el 31/12/2015 a las 17:23

Very nice site! [url=http://oieypxa2.com/kyaskk/2.html]cheap goods[/url]

Enviado por Pharmb27

el 03/01/2016 a las 05:25

Very nice site! cheap goods

Enviado por Pharmg694

el 03/01/2016 a las 05:27

Very nice site! [url=http://ypxoiea2.com/qyaskq/2.html]cheap goods[/url]

Enviado por Pharmd915

el 04/01/2016 a las 11:21

Very nice site! cheap goods

Enviado por Pharme969

el 05/01/2016 a las 17:20

Very nice site! [url=http://apeoixy2.com/tqsov/2.html]cheap goods[/url]


Publicar comentario: