HTML5: WebSockets

WebSockets es una tecnología de comunicación bidireccional de próxima generación para aplicaciones web que opera en un solo socket y se expone a través de una interfaz JavaScript en navegadores compatibles con HTML 5.

Una vez que obtenga una conexión Web Socket con el servidor web, puede enviar datos desde el navegador al servidor llamando a un send() y recibir datos del servidor al navegador mediante un onmessage controlador de eventos.

A continuación se muestra la API que crea un nuevo objeto WebSocket.

var Socket = new WebSocket(url, [protocal] );

Aquí el primer argumento, url, especifica la URL a la que conectarse. El segundo atributo, el protocolo, es opcional y, si está presente, especifica un subprotocolo que el servidor debe admitir para que la conexión sea exitosa.

Atributos de WebSocket

A continuación se muestran los atributos del objeto WebSocket. Suponiendo que creamos el objeto Socket como se mencionó anteriormente:

No Señor. Atributo y descripción
1

Socket.readyState

El atributo de solo lectura readyState representa el estado de la conexión. Puede tener los siguientes valores:

  • Un valor de 0 indica que la conexión aún no se ha establecido.

  • Un valor de 1 indica que la conexión está establecida y la comunicación es posible.

  • Un valor de 2 indica que la conexión está pasando por el protocolo de enlace de cierre.

  • Un valor de 3 indica que la conexión se ha cerrado o no se pudo abrir.

2

Socket.bufferedAmount

El atributo de solo lectura búferAmount representa el número de bytes de texto UTF-8 que se han puesto en cola mediante el método send ().

Eventos de WebSocket

A continuación se muestran los eventos asociados con el objeto WebSocket. Suponiendo que creamos el objeto Socket como se mencionó anteriormente:

Evento Controlador de eventos Descripción
abierto Socket.onopen Este evento ocurre cuando se establece la conexión de socket.
mensaje Socket.onmessage Este evento ocurre cuando el cliente recibe datos del servidor.
error Socket.onerror Este evento ocurre cuando hay algún error en la comunicación.
cerca Socket.onclose Este evento ocurre cuando se cierra la conexión.

Métodos de WebSocket

A continuación se muestran los métodos asociados con el objeto WebSocket. Suponiendo que creamos el objeto Socket como se mencionó anteriormente:

No Señor. Método y descripción
1

Socket.send()

El método de envío (datos) transmite datos mediante la conexión.

2

Socket.close()

El método close () se usaría para terminar cualquier conexión existente.

Ejemplo de WebSocket

Un WebSocket es un socket TCP bidireccional estándar entre el cliente y el servidor. El socket comienza como una conexión HTTP y luego se "actualiza" a un socket TCP después de un protocolo de enlace HTTP. Después del apretón de manos, ambos lados pueden enviar datos.

Código HTML y JavaScript del lado del cliente

En el momento de escribir este tutorial, solo hay unos pocos navegadores web compatibles con la interfaz WebSocket (). Puede probar el siguiente ejemplo con la última versión de Chrome, Mozilla, Opera y Safari.

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

Instalar pywebsocket

Antes de probar el programa cliente anterior, necesita un servidor que admita WebSocket. Descargue mod_pywebsocket-xxxtar.gz de pywebsocket, que tiene como objetivo proporcionar una extensión de Web Socket para el servidor HTTP Apache e instálelo siguiendo estos pasos.

  • Descomprime y descomprime el archivo descargado.

  • Ve adentro pywebsocket-x.x.x/src/ directorio.

  • $ python setup.py compilación

  • $ sudo python setup.py instalar

  • Luego lea el documento por -

    • $ pydoc mod_pywebsocket

Esto lo instalará en su entorno de Python.

Iniciar el servidor

Ve a la pywebsocket-x.x.x/src/mod_pywebsocket carpeta y ejecute el siguiente comando:

$sudo python standalone.py -p 9998 -w ../example/

Esto iniciará la escucha del servidor en el puerto 9998 y usará el handlers directorio especificado por la opción -w donde reside nuestro echo_wsh.py.

Ahora, usando el navegador Chrome, abra el archivo html que creó al principio. Si su navegador es compatible con WebSocket (), recibirá una alerta que indica que su navegador es compatible con WebSocket y, finalmente, cuando haga clic en "Ejecutar WebSocket", recibirá un mensaje de despedida enviado por el script del servidor.