Crear un Websocket

20/Dic/2010 HTML5 5 Comentarios

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.

  1. 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:

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

Así, codificaremos las siguientes funciones de callback:

  1. mysocket.onopen = function (evt){
  2. escribir("Websocket abierto");
  3. };
  4.  
  5. mysocket.onmessage = function (evt){
  6. escribir("RECIBIDO: " + evt.data);
  7. };
  8.  
  9. mysocket.onclose = function (evt){
  10. escribir("Websocket cerrado");
  11. };
  12.  
  13. mysocket.onerror = function (evt) {
  14. escribir("ERROR: " + evt.data);
  15. }

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

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

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()

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

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

  1. function desconectar(){
  2. mysocket.close();
  3. }

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.

  1. <textarea id="caja" cols="100" rows="20"></textarea><br/>
  2. <input id="mensaje" type="text" size="105"></input>
  3. <button onClick="enviar(document.getElementById('mensaje').value);">Enviar</button>
  4. <button onClick="desconectar()">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

Vídeos sobre HTML5


5 comentarios en “Crear un Websocket”

Víctor Cuervo

'or'

hola

Víctor Cuervo

carlos mollapaza

Hola amigo si esta bien explicado pero nose como se puede refrescar las dos paginas a lavez es decir abro una y alli escribo algo si abro otro navegador alli debe de verse lo que fue escrito

Víctor Cuervo

Andre

Hola tengo un sitio donde el cliente tiene que entrar y poder chatear con un vendedor por voz desde mi sitio, websocket ya lo permite?Gracias.

Saludos

Víctor Cuervo

jorge

function enviar() {
var texto = document.getElementById(‘mensaje’).value;
mysocket.send(texto);
Uncaught Error: INVALID_STATE_ERR: DOM Exception 11 (repeated 2 times)
escribir(“ENVIADO: ” + texto);
}
por que????
saludos. espero su respuesta

Víctor Cuervo

bx3

Hola, me encanto el articulo, pero como puedo montar mi servidor de sockets?

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*