WebSockets es una tecnología avanzada que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor. Con esta  API, puede enviar mensajes a un servidor y  recibir  respuestas controladas por eventos sin tener que consultar al servidor para una respuesta.

Creando un Objeto WebSocket

Para comunicarse utilizando  el protocolo webSocket, necesitarás crear un objeto WebSocket; este automáticamente abrirá una conexión temporal al servidor.

El constructor WebSocket requiere de un parámetro obligatorio y otro opcional:

url

La url a la que conectar; esta es la URL a la que el WebSocket responde.

protocols Optional

Un string o array de strings con el/los protocolos a usar. Estos strings son usados para indicar sub-protocolos, para que el servidor pueda implementar multiples sub-protocolos WebSocket (por ejemplo, puede necesitar usar un servidor para manejar diferentes tipos de interacciones dependiendo del protocolo especificado). Si no se especifica el string como protocolo, se asumirá un string vacío.

El constructor puede lanzar excepciones:

SECURITY_ERR

El puerto de la conexión está siendo bloqueado.

Errores de conexión

Si ocurre un error al intentar conectar, lo primero que recibiremos será un evento con el nombre de "error" en el objeto WebSocket (de este modo se invoca el manejador onerror), y luego CloseEvent es enviado al objeto WebSocket (de este modo se invoca el manejador onclose), para indicar la razón del cierre de la conexión.

A partir de Firefox 11, es normal recibir un mensaje de error descriptivo  en la consola de la plataforma Mozilla, y un código de cierre como está definido en el RFC 6455, Section 7.4 a través de un CloseEvent.

Ejemplos

En este ejemplo de crea un nuevo WebSocket, conectandose al servidor ws://www.example.com/socketserver. El nombre del protocolo "protocolOne"  es el utilizado para la consulta del socket, aunque puede ser omitido.

var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");

Como respuesta, exampleSocket.readyState es CONNECTING. El readyState será  OPEN una ves que la conexion este lista para transferir información.

Si se quiere establecer una conexión que soporte varios protocolos, se puede establecer un array de protolos:

var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);

Una vez que la conexión este establecida (readyState estará OPEN), exampleSocket.protocol te dirá qué protocolo ha seleccionado el servidor.

En los ejemplos anteriores ws sustituye http, y de igual manera wss sustituye a https. Al crear un WebSocket se hace uso del mecanismo Upgrade de HTTP, por lo que la petición de actualización del protocolo está implícita cuando accedemos al servidor HTTP con ws://www.example.como wss://www.example.com.

Enviando Información al servidor

Una ves la conexión esta abierta, se puede iniciar a enviar datos al servidor. Para hacer esto, simplemente se llama al metodo send() del objeto WebSocket, cada vez que se desea enviar un mensaje:

exampleSocket.send("Here's some text that the server is urgently awaiting!");

Como la conexión es asincronica y es propensa a fallar, no hay garantia de poder llamar al metodo send() inmediatamente despúes de haber creado el objeto WebSocket de manera exitosa. Para enviar información se debe estar seguro de que al menos una conexión ya esta abierta, usando el manejador onopen:

exampleSocket.onopen = function (event) {

  exampleSocket.send("Here's some text that the server is urgently awaiting!"); 

};

DEMOSTRACIÓN

En Visual Studio vamos a dar click en menú File à New à Project

En la Ventana emergente le damos click a Web y espacio Name colocamos el nombre del proyecto que para el Ejemplo es “Demo 12 20480” y luego presionamos el botón OK

En el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items

En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como nombre del archivo “WebSocketTest.html”, para luego presionar el botón Add.

En la página WebSocketTest.html tipiamos el siguiente código HTML

En las etiqueta Title colocamos el título de nuestro documento

Procedemos a borrar todo el código que viene por defecto en nuestra página y escribimos una etiqueta <SCRIPT></SCRIPT>

Después colocamos un titulo de tipo <H2></H2>

Después una etiqueta <DIV></DIV>

Dentro de la etiqueta <SCRIPT></SCRIPT>

Arriba de esta sentencia colocaremos dos variables, una que contendrán la información del servidor y otra que utilizaremos posteriormente.

Abajo colocaremos una función con la cual vamos a almacenar todo lo correspondiente al div y a su vez pasaremos a llamar a otro método.

Después escribiremos el método testWebSocket(), donde haremos el llamado para la apertura, el cierre, y cualquier error que se pueda producir en el web socket.

Y finalizamos escribiendo los métodos correspondientes

Y procedemos a ver nuestra página web: