English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 WebSocket

WebSocket es un protocolo de HTML5 es un protocolo que comienza a proporcionar una comunicación de comunicación dúplex completa en 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 pueda enviar datos al cliente de manera activa. En el API WebSocket, el navegador y el servidor solo necesitan completar una vez el apretón de manos, y luego pueden crear una conexión persistente entre sí y realizar el传输 de datos bidireccional.

En el API WebSocket, el navegador y el servidor solo necesitan realizar un gesto de 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 Ajax para implementar tecnologías de push. La programación de repetición es en intervalos específicos de tiempo (por ejemplo, cada1segundo), 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 una clara desventaja, es que el navegador necesita enviar solicitudes al servidor continuamente, sin embargo, las solicitudes HTTP pueden contener una cabecera larga, de la cual los datos efectivos pueden ser solo una pequeña parte, lo que obviamente resulta en un desperdicio de muchos recursos de ancho de banda y otros.

HTML5 El protocolo WebSocket definido puede ahorrar recursos del servidor y ancho de banda mejor, y puede realizar comunicaciones en tiempo real de manera más efectiva.

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

Después de obtener la conexión WebSocket, puedes usar send() un método para enviar datos al servidor y a través de onmessage para recibir los datos devueltos por el servidor.

El 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 protocolo es opcional y especifica el subprotocolo aceptado.

Propiedades WebSocket

A continuación se muestran las propiedades del objeto WebSocket. Supongamos que hemos creado el objeto Socket utilizando el código anterior:

AtributoDescripción
Socket.readyState

Atributo de solo lectura readyState Indica el estado de la conexión y 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 realizar la comunicación.

  • 2 - Indica que la conexión está en proceso de cierre.

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

Socket.bufferedAmount

Atributo de solo lectura bufferedAmount UTF que ha sido colocado en la cola de espera para la transmisión por el send(), pero aún no ha sido emitido-8 Número de bytes de texto.

Eventos WebSocket

A continuación se muestran los eventos relacionados con el objeto WebSocket. Supongamos que hemos creado el objeto Socket utilizando el código anterior:

EventoManejador de eventosDescripción
openSocket.onopenSe dispara cuando se establece la conexión
messageSocket.onmessageSe dispara cuando el cliente recibe datos del servidor
errorSocket.onerrorSe dispara cuando ocurre un error en la comunicación
closeSocket.oncloseSe dispara cuando se cierra la conexión

Métodos WebSocket

A continuación se muestran los métodos relacionados con el objeto WebSocket. Supongamos que hemos creado el objeto Socket utilizando el código anterior:

MétodoDescripción
Socket.send()

Enviar datos usando la conexión

Socket.close()

Cerrar 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 debe enviar una solicitud HTTP al servidor primero. Esta solicitud HTTP es diferente de las solicitudes HTTP habituales, ya que contiene información de encabezado adicional. La información de encabezado adicional "Upgrade: WebSocket" indica que esta es una solicitud HTTP de solicitud de actualización de protocolo. El servidor analiza estas información de encabezado adicional y genera una respuesta devuelta al cliente, luego se establece la conexión WebSocket entre el cliente y el servidor. Ambos pueden transmitir información libremente a través de este canal de conexión y esta conexión persistirá hasta que uno de los dos lados de la conexión cierre la conexión de manera activa.

HTML y JavaScript del cliente

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

w3Contenido del archivo codebox_websocket.html

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>Métodos de uso de WebSocket, sitio web de tutorial básico(oldtoolbag.com)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
         var x = document.getElementById("websocket");
            if ("WebSocket" in window)
            {
               x.innerHTML="Su navegador admite WebSocket!";
               
               // Abrir un websocket
               var ws = new WebSocket("ws://echo.websocket.org");
                
               ws.onopen = function()
               {
                  // WebSocket conectado, enviar datos usando el método send()
                  ws.send("Enviar datos");
                  x.innerHTML="Enviando datos...";
               };
                
               ws.onmessage = function(evt) 
               { 
                  var received_msg = evt.data;
                  x.innerHTML="Datos recibidos, tutorial básico(oldtoolbag.com)...";
               };
                
               ws.onclose = function()
               { 
                  // Cerrar websocket
                  x.innerHTML="Conexión cerrada..."; 
               };
            }
            
            else
            {
               // Navegador no admite WebSocket
               x.innerHTML="Su navegador no admite WebSocket!";
            }
         }
      </script>
        
   </head>
   <body>
       
      <div id="sse">
         <input type="button" onclick="WebSocketTest()" value="Ejecutar WebSocket">
      </div>
      <div id="websocket"></div>
      
   </body>
</html>
Prueba mira ‹/›

Los resultados de la prueba se muestran en la siguiente imagen:

Diferencias entre websocket y socket

La comunicación de software tiene una estructura de siete capas, las tres capas inferiores se inclinan hacia la comunicación de datos, las tres capas superiores se inclinan hacia el procesamiento de datos, y la capa de transmisión es el puente entre las tres capas superior e inferior, realizando diferentes trabajos en cada capa, las cuales dependen de las capas inferiores. Basado en el concepto de esta estructura de comunicación.
Socket no es realmente un protocolo, es una comunicación de aplicación a nivel de TCP/La familia de protocolos IP es una capa intermedia de software de comunicación, que es un conjunto de interfaces. Cuando dos hosts se comunican, permite que Socket organice los datos para que se ajusten a los protocolos especificados. La conexión TCP depende más del protocolo IP subyacente, mientras que la conexión IP depende de capas más bajas como la de enlaces.
WebSocket es un protocolo de aplicación típico.

  • Socket es un protocolo de control de transmisión

  • WebSocket es un protocolo de aplicación