HTML5 WebSocket

WebSocket es un protocolo proporcionado por HTML5 que permite comunicación full-duplex sobre una única conexión TCP.

WebSocket hace que el intercambio de datos entre el cliente y el servidor sea más simple, permitiendo que el servidor empuje datos activamente al cliente. En la API de WebSocket, el navegador y el servidor solo necesitan completar un apretón de manos (handshake), y entre ellos se puede crear directamente una conexión persistente y realizar transmisión de datos bidireccional.

En la API de WebSocket, el navegador y el servidor solo necesitan realizar un apretón de manos, y luego se forma un canal rápido entre el navegador y el servidor. Ambos pueden transmitir datos directamente entre sí.

Actualmente, muchos sitios web utilizan la técnica de polling de Ajax para implementar la tecnología de empuje (push). El polling consiste en que, en intervalos de tiempo específicos (por ejemplo, cada 1 segundo), el navegador envía una solicitud HTTP al servidor, y luego el servidor devuelve los datos más recientes al navegador del cliente. Este modelo tradicional tiene desventajas obvias: el navegador necesita enviar solicitudes constantemente al servidor; sin embargo, las solicitudes HTTP pueden contener cabeceras largas, donde los datos realmente útiles pueden ser solo una pequeña parte, lo que evidentemente desperdicia mucho ancho de banda y otros recursos.

El protocolo WebSocket definido por HTML5 puede ahorrar mejor los recursos del servidor y el ancho de banda, y permite una comunicación más en tiempo real.

El navegador envía una solicitud al servidor a través de JavaScript para establecer una conexión WebSocket. Una vez establecida la conexión, el cliente y el servidor pueden intercambiar datos directamente a través de la conexión TCP.

Cuando obtengas la conexión WebSocket, puedes usar elsend()método para enviar datos al servidor, y a través delonmessageevento para recibir los datos devueltos por el servidor.

La siguiente API se utiliza para crear un objeto WebSocket.

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

El primer parámetro url en el código anterior especifica la URL de la conexión. El segundo parámetro protocol es opcional y especifica los subprotocolos aceptados.

Propiedades de WebSocket

Las siguientes son las propiedades del objeto WebSocket. Supongamos que hemos usado el código anterior para crear un objeto Socket:

Propiedad Descripción
Socket.readyState

Propiedad de solo lecturareadyStateIndica el estado de la conexión, puede ser uno de los siguientes valores:

  • 0 - Indica que la conexión aún no se ha establecido.

  • 1 - Indica que la conexión se ha establecido y se puede comunicar.

  • 2 - Indica que la conexión se está cerrando.

  • 3 - Indica que la conexión se ha cerrado o no se puede abrir.
Socket.bufferedAmount

Propiedad de solo lecturabufferedAmountEl número de bytes de texto UTF-8 que han sido puestos por send() en la cola de espera para transmisión, pero que aún no se han enviado.

Eventos de WebSocket

Los siguientes son los eventos relacionados con el objeto WebSocket. Supongamos que hemos usado el código anterior para crear un objeto Socket:

Evento Manejador de eventos Descripción
open Socket.onopen Se dispara cuando se establece la conexión
message Socket.onmessage Se dispara cuando el cliente recibe datos del servidor
error Socket.onerror Se dispara cuando ocurre un error de comunicación
close Socket.onclose Se dispara cuando se cierra la conexión

Métodos de WebSocket

Los siguientes son los métodos relacionados con el objeto WebSocket. Supongamos que hemos usado el código anterior para crear un objeto Socket:

Método Descripción
Socket.send()

Envía datos utilizando la conexión
Socket.close()

Cierra la conexión

Ejemplo de WebSocket

El protocolo WebSocket es esencialmente un protocolo basado en TCP.

Para establecer una conexión WebSocket, el navegador del cliente primero debe enviar una solicitud HTTP al servidor. Esta solicitud es diferente de las solicitudes HTTP normales, ya que contiene información de cabecera adicional. El campo de cabecera adicional 'Upgrade: WebSocket' indica que se trata de una solicitud HTTP para solicitar una actualización de protocolo. El servidor analiza esta información de cabecera adicional y genera una respuesta que devuelve al cliente. Así se establece la conexión WebSocket entre el cliente y el servidor, y ambas partes pueden intercambiar información libremente a través de este canal de conexión. Además, esta conexión persistirá hasta que el cliente o el servidor cierre activamente la conexión.

HTML y JavaScript del cliente

Actualmente la mayoría de los navegadores admiten la interfaz WebSocket(). Puedes probar el ejemplo en los siguientes navegadores: Chrome, Mozilla, Opera y Safari.

Contenido del archivo ejemplo_websocket.html

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>Ejemplo(example.com)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="WebSocketTest().html">运行 WebSocket</a>
      </div>
      
   </body>
</html>

Instalar pywebsocket

Antes de ejecutar el programa anterior, necesitamos crear un servicio que soporte WebSocket.pywebsocketDescarga mod_pywebsocket, o utiliza el comando git para descargarlo:

git clone https://github.com/googlearchive/pywebsocket
<p>
mod_pywebsocket  需要 python 环境支持</p>
mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展，安装步骤如下：</p>

<ul>
<li><p>解压下载的文件。</p></li>
<li><p>进入 <b>pywebsocket</b> 目录。</p></li>
<li><p>执行命令：</p>
<pre>$ python setup.py build
$ sudo python setup.py install

  • Consulta la documentación:

    $ pydoc mod_pywebsocket

    • Iniciar el servicio

    Enpywebsocket/mod_pywebsocketEjecuta el siguiente comando en el directorio:

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

    El comando anterior iniciará un servicio con el número de puerto 9998, usando -w para establecer el directorio donde se encuentra el manejador echo_wsh.py.

    Ahora podemos abrir el archivo ejemplo_websocket.html creado anteriormente en el navegador Chrome. Si tu navegador admite WebSocket(), haz clic en 'Ejecutar WebSocket', y podrás ver las ventanas emergentes de cada paso de todo el proceso. Demostración del proceso en GIF:

    Después de detener el servicio, aparecerá 'Conexión cerrada...'.

    Otras extensiones