Introduccin a los WebSockets:

incorporacin de sockets a la Web

By Malte Ubl and Eiji Kitamura

Publicacin: octubre 20th, 2010
Comments: 47

El problema: conexiones de baja latencia

cliente-servidor y servidor-cliente
Internet se ha creado en gran parte a partir del llamado paradigma
solicitud/respuesta de HTTP. Un cliente carga una pgina web y no ocurre nada
hasta que el usuario hace clic en la pgina siguiente. All por 2005, AJAX empez
a hacer que Internet pareciera ms dinmico. An as, todas las comunicaciones
HTTP eran dirigidas por el cliente, lo que requera la interaccin del usuario o
haca necesario preguntarle peridicamente cada vez que se cargaban nuevos
datos del servidor.
Hace ya algn tiempo que existen tecnologas que permiten al servidor enviar
datos al cliente en el mismo momento que detecta que hay nuevos datos
disponibles. Se conocen como "Push" o "Comet". Uno de los trucos ms
comunes para crear la ilusin de una conexin iniciada por el servidor se
denomina Long Polling (sondeo largo). Con el Long Polling, el cliente abre una
conexin HTTP con el servidor, el cual la mantiene abierta hasta que se enve una
respuesta. Cada vez que el servidor tenga datos nuevos, enviar la respuesta
(otras tcnicas implican Flash, solicitudes XHR de varias partes y los
denominados htmlfiles). El Long Polling y las otra tcnicas funcionan bastante
bien. Se utilizan todos los das en aplicaciones como el chat de Gmail.
Sin embargo, todas estas soluciones comparten un problema: el exceso del
HTTP, lo que no las hace aptas para aplicaciones de baja latencia. Piensa por
ejemplo en los juegos multijugador de tiro en primera persona del navegador o en
cualquier otro juego online con un componente en tiempo real.

Introduccin a los WebSockets: incorporacin

de sockets a la Web
La especificacin WebSocket define un API que establece conexiones "socket"
entre un navegador web y un servidor. Dicho con otras palabras: existe una
conexin persistente entre el cliente y el servidor, y ambas partes pueden
empezar a enviar datos en cualquier momento.

Introduccin
Para abrir una conexin WebSocket, solo tienes que ejecutar el constructor
WebSocket:
var connection = new
WebSocket('ws://html5rocks.websocket.org/echo', ['soap',
'xmpp']);

Observa los elementos ws:. Este es el nuevo esquema de URL para las
conexiones WebSocket. Tambin hay wss:para conexiones WebSocket seguras,
de la misma forma que se utiliza https:para las conexiones HTTP seguras.
Adjuntar inmediatamente varios controladores a la conexin te permite saber
cundo est abierta la conexin, cundo ha recibido mensajes entrantes o
cundo hay un error.
El segundo argumento acepta subprotocolos opcionales. Puede ser una cadena
o una matriz de cadenas. Cada cadena debe representar a un nombre de
subprotocolo y el servidor acepta solo uno de los subprotocolos de la matriz.
Para determinar el subprotocolo aceptado, accede a la propiedad protocoldel
objeto WebSocket.
Los nombres de subprotocolos deben ser uno de los registrados en el registro de
IANA. A fecha de febrero de 2012, solo hay un nombre de subprotocolo
registrado (soap).
// When the connection is open, send some data to the server
connection.onopen = function () {
connection.send('Ping'); // Send the message 'Ping' to the
server
};
// Log errors
connection.onerror = function (error) {
console.log('WebSocket Error ' + error);

};

// Log messages from the server

connection.onmessage = function (e) {
console.log('Server: ' + e.data);
};

Comunicacin con el servidor

Cuando se establezca una conexin con el servidor (cuando el evento opense
active), podemos empezar a enviar datos al servidor con el mtodo send('your
message')en el objeto de conexin. Antes solo se admitan cadenas, pero la

ltima especificacin tambin permite enviar mensajes binarios. Para enviar

datos binarios, puedes usar un objeto Blobo ArrayBuffer.
// Sending String
connection.send('your message');
// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i];
}
connection.send(binary.buffer);
// Sending file as Blob
var file =
document.querySelector('input[type="file"]').files[0];
connection.send(file);

De la misma forma, el servidor puede enviarnos mensajes en cualquier momento.

Cada vez que esto ocurra, se activa la devolucin de llamada onmessage. La
devolucin de llamada recibe un objeto "event", lo que permite acceder al
mensaje actual mediante la propiedad data.
La ltima especificacin de WebSocket tambin permite recibir mensajes
binarios. Los marcos binarios se pueden recibir en formato Blobo ArrayBuffer.
Para especificar el formato del binario recibido, establece la propiedad
binaryType del objeto WebSocket en "blob" o en "arraybuffer". El formato
predeterminado es "blob" (no es necesario alinear el parmetro binaryType al
enviar).

// Setting binaryType to accept received binary as either

'blob' or 'arraybuffer'
connection.binaryType = 'arraybuffer';
connection.onmessage = function(e) {
console.log(e.data.byteLength); // ArrayBuffer object if
binary
};

Otra funcin recin incorporada a WebSocket son las extensiones. Las

extensiones permiten enviar marcos comprimidos, multiplexados, etc. Para
enviar extensiones que acepte el servidor, examina la propiedad de las
extensiones del objeto WebSocket despus de un evento "open". A fecha de
febrero de 2012 no se ha publicado ninguna especificacin oficial de
extensiones.
// Determining accepted extensions
console.log(connection.extensions);

Comunicaciones de origen cruzado

Las comunicaciones de origen cruzado son un protocolo moderno creado
directamente para WebSocket. Aunque sigue siendo necesario que te asegures
de que solo te comunicas con clientes y servidores de confianza, WebSocket
permite la comunicacin entre las partes de cualquier dominio. El servidor decide
si desea poner su servicio a disposicin de todos los clientes o solo de los que
estn alojados en un grupo de dominios bien definidos.

Servidores proxy
Toda nueva tecnologa trae consigo una nueva serie de problemas. En el caso de
WebSocket, se trata de la compatibilidad con los servidores proxy que median
las conexiones HTTP en la mayora de las redes corporativas. El protocolo
WebSocket utiliza el sistema de actualizacin de HTTP (normalmente utilizado
para HTTP/SSL) para "actualizar" una conexin HTTP a una conexin
WebSocket. A algunos servidores proxy no les gusta esto y cancelan la conexin.
Por tanto, aunque un cliente dado utilice el protocolo WebSocket, es posible que
no pueda establecer una conexin. Esto hace que la siguiente seccin sea an
ms importante :)

Uso actual de WebSockets

WebSocket sigue siendo una tecnologa joven y no est implementada
completamente en todos los navegadores. Sin embargo, actualmente puedes
utilizar WebSocket con las bibliotecas que usan una de las alternativas
mencionadas anteriormente si WebSocket no est disponible. Una biblioteca que
se ha hecho muy popular en este dominio es socket.io, que viene con una
implementacin cliente-servidor del protocolo e incluye alternativas (socket.io no
es compatible con mensajes binarios a fecha de febrero de 2012). Tambin hay
soluciones comerciales como PusherApp, que se puede integrar fcilmente en
cualquier entorno web con un API HTTP que enve mensajes WebSocket a los
clientes. Debido a la solicitud HTTP extra, siempre habr un exceso en
comparacin con el WebSocket puro.

En el servidor
Al utilizar WebSocket, se crea un patrn de uso completamente nuevo para las
aplicaciones de servidor. Aunque las pilas de servidor tradicionales como LAMP
estn diseadas a partir del ciclo de solicitud-respuesta de HTTP, a menudo dan
problemas si hay muchas conexiones WebSocket abiertas. Mantener un gran
nmero de conexiones abiertas de forma simultnea requiere una arquitectura
capaz de recibir un alto nivel de concurrencia sin consumir mucho rendimiento.
Estas arquitecturas suelen estar basadas en subprocesos o el denominado
sistema E/S asncrono.

Implementaciones en el servidor
Node.js
Socket.IO
WebSocket-Node
ws
Java
Jetty
Ruby
EventMachine
Python

pywebsocket
Tornado
Erlang
Shirasu
C++
libwebsockets
.NET
SuperWebSocket

Versiones de protocolos
El protocolo de transmisin (un protocolo de enlace y la transferencia de datos
entre cliente y servidor) para WebSocket ahora es RFC6455. Las ltimas
versiones de Chrome y Chrome para Android son completamente compatibles
con RFC6455, incluidos los mensajes binarios. Adems, Firefox es compatible a
partir de la versin 11 e Internet Explorer a partir de la versin 10. Puedes seguir
utilizando versiones ms antiguas del protocolo, pero no es recomendable, ya
que se ha demostrado que son vulnerables. Si has implementado versiones
anteriores del protocolo WebSocket en servidores, te recomendamos que las
actualices a la ltima versin.

Casos prcticos
Utiliza WebSocket siempre que necesites una conexin casi a tiempo real y de
latencia baja entre el cliente y el servidor. Ten en cuenta que esto podra
significar tener que replantearte cmo has desarrollado tus aplicaciones de
servidor, adoptando un nuevo enfoque en tecnologas como las colas de
eventos. Estos son algunos ejemplos de casos prcticos:
Juegos online multijugadores
Aplicaciones de chat
Rotativos de informacin deportiva
Actualizaciones en tiempo real de las actividades de tus amigos

Demos
Plink

Paint With Me
Pixelatr
Dashed
Massively multiplayer online crossword
Ping server (utilizada en los ejemplos anteriores)
HTML5demos sample

Referencias
El API WebSocket
El protocolo WebSocket
WebSockets - MDN