Un websocket es una tecnología HTML5 que nos permite abrir sockets para una comunicación bidirecional, full-duplex, con baja latencia y que se basa en el protocolo TCP. Los Websockets están siendo estandarizado por la W3C mediante el Websocket API.

La versión del protocolo de Websockets más soportada en la actualidad es la versión 76.

Lo primero que tenemos que hacer es definir el Websocket. Para ello utilizamos la clase WebSocket, la cual recibe como parámetro la URI del Websocket.

var mysocket = new WebSocket("ws://echo.websocket.org");

Lo primero que vemos es que la URI del Websocket se caracteriza por el protocolo ws:// o wss:// si fuese una conexión segura.

En nuestro caso utilizamos la URI

ws://echo.websocket.org

que es un Websocket que responde con un eco de cada información enviada al servidor.

Una vez que hemos creado el Websocket lo siguiente que tenemos que hacer es definir las funciones de callback que controlarán el intercambio de información con el Websocket.

Las funciones de callback que hay que implementar son:

• onopen – cuándo se abre el Websocket.
• onmessage – para cuando recibimos un mensaje por el Websocket.
• onclose – cuándo se cierra el Websocket.
• onerror – si se produce un error en el Websocket.

Todas las funciones de callback del Websocket tienen la siguiente estructura:

mysocket.onxxx = function (evt){ ... };

Así, codificaremos las siguientes funciones de callback:

mysocket.onopen = function (evt){
   escribir("Websocket abierto");
};

mysocket.onmessage = function (evt){
  escribir("RECIBIDO: " + evt.data);	
};

mysocket.onclose = function (evt){
  escribir("Websocket cerrado");
};

mysocket.onerror = function (evt) {
  escribir("ERROR: " + evt.data);
}

Vemos que en todos los casos utilizamos la función escribir, la cual vuelca el contenido en una capa. De la siguiente forma:

function escribir(texto){
  valor = document.getElementById("caja").value;
  document.getElementById("caja").value = valor + texto + "\n";
}

Una vez que tenemos el Websocket abierto y con sus funciones de callback definidas empezamos a enviar mensajes. Para enviar mensajes al Websocket utilizamos el método .send()

function enviar(texto) {
  mysocket.send(texto);
  escribir("ENVIADO: " + texto);
}

Para finalizar nuestro cambio de mensajes con el Websocket utilizaremos el método .close() para cerrar el Websocket.

function desconectar(){		
  mysocket.close();
}

Solo nos quedará tener un pequeño layout que nos permita ejecutar las funciones enviar() y desconectar(). Así como tener una capa en la cual se vuelque el contenido.

<textarea id="caja" cols="100" rows="20"></textarea><br><input id="mensaje" size="105" type="text"> <button>Enviar</button> <button>Desconectar</button>

Por último que nos queda por saber es el soporte de los navegadores para los Websockets. En la actualidad los navegadores que soportan los Websockets son:

• Firefox 4
• Google Chrome 4
• Opera 11
• Safari 5