Cerrar WebSocket correctamente (HTML5, Javascript)

5 minutos de lectura

Cerrar WebSocket correctamente HTML5 Javascript
andy hin

Estoy jugando con HTML5 WebSockets. Me preguntaba, ¿cómo cierro la conexión con gracia? Por ejemplo, ¿qué sucede si el usuario actualiza la página o simplemente cierra el navegador?

Hay un comportamiento extraño cuando un usuario simplemente actualiza la página sin llamar websocket.close() – cuando regresen después de la actualización, tocará el websocket.onclose evento.

Cerrar WebSocket correctamente HTML5 Javascript
canaca

De acuerdo con la especificación de protocolo v76 (que es la versión que implementa el navegador con soporte actual):

Para cerrar la conexión limpiamente, se envía una trama que consta de solo un byte 0xFF seguido de un byte 0x00 desde un par para solicitar que el otro par cierre la conexión.

Si está escribiendo un servidor, debe asegurarse de enviar un cuadro de cierre cuando el servidor cierra una conexión de cliente. El método normal de cierre del socket TCP a veces puede ser lento y hacer que las aplicaciones piensen que la conexión aún está abierta, incluso cuando no lo está.

El navegador realmente debería hacer esto por usted cuando cierre o vuelva a cargar la página. Sin embargo, puede asegurarse de que se envíe un cuadro de cierre capturando el evento beforeunload:

window.onbeforeunload = function() {
    websocket.onclose = function () {}; // disable onclose handler first
    websocket.close();
};

No estoy seguro de cómo puede obtener un evento onclose después de actualizar la página. El objeto websocket (con el controlador onclose) ya no existirá una vez que la página se vuelva a cargar. Si intenta establecer inmediatamente una conexión WebSocket en su página mientras se carga la página, es posible que se encuentre con un problema en el que el servidor rechaza una nueva conexión poco después de que la anterior se haya desconectado (o el navegador no está listo para hacer conexiones en el punto en el que intenta conectarse) y obtiene un evento onclose para el nuevo objeto websocket.

  • Es posible que en Firefox la conexión parezca demorarse en la carga de la siguiente página. No puedo encontrar una referencia, pero creo que puede haber un error al respecto. La otra posibilidad es que el onclose El evento se activa inesperadamente, o tal vez a propósito, mientras el usuario navega/la página se vuelve a cargar. Publiqué una pregunta sobre cuál debería ser el comportamiento esperado, qué navegador lo hace bien y cómo implementamos la reconexión automática.

    – calcetero

    10 jun.


  • considerar estos problemas con onbeforeunload evento

    – artkoenig

    16 ene.

1641823685 956 Cerrar WebSocket correctamente HTML5 Javascript
teobe

La cuestión es que hay 2 versiones de protocolo principales de WebSockets en uso hoy en día. La versión antigua que utiliza el [0x00][message][0xFF] protocolo, y luego está la nueva versión usando Paquetes con formato Hybi.

Opera y iPod/iPad/iPhones utilizan la versión anterior del protocolo, por lo que es realmente importante que se implemente la compatibilidad con versiones anteriores en los servidores WebSockets. Con estos navegadores que usan el protocolo anterior, descubrí que actualizar la página, navegar fuera de la página o cerrar el navegador, todo hace que el navegador cierre automáticamente la conexión. ¡¡Estupendo!!

Sin embargo, con los navegadores que utilizan la nueva versión del protocolo (por ejemplo, Firefox, Chrome y eventualmente IE10), solo cerrar el navegador hará que el navegador cierre automáticamente la conexión. Es decir, si actualiza la página o navega fuera de la página, el navegador NO cierra automáticamente la conexión. Sin embargo, lo que hace el navegador es enviar un paquete hybi al servidor con el primer byte (el proto ident) siendo 0x88 (más conocido como el marco de datos cerrado). Una vez que el servidor recibe este paquete, puede cerrar la conexión a la fuerza, si así lo desea.

  • un ejemplo práctico en el lado del servidor cómo administrar este paquete hybi?

    – albanx

    09 ene.

  • Parece una locura que no cierre la conexión. La variable WebSocket se borra al volver a cargar la página, entonces, ¿por qué la conexión permanecería abierta si no se puede acceder a ella? Reutilizar la conexión tampoco tendría sentido.

    – Triynko

    09 ago.

  • @albanx revisa mi respuesta a continuación

    – artkoenig

    17 ene.

  • Cualquier ejemplo de código sobre cómo enviar un marco cerrado desde un cliente websocket (es decir, un navegador). Estoy usando el módulo ws npm

    –Shaik Syed Ali

    21 feb. 19 a las 5:23

Cerrar WebSocket correctamente HTML5 Javascript
carlos

Muy simple, lo cierras 🙂

var myWebSocket = new WebSocket("ws://example.org"); 
myWebSocket.send("Hello Web Sockets!"); 
myWebSocket.close();

¿Revisaste también el siguiente sitio y revisa el artículo de introducción de Opera

1641823686 421 Cerrar WebSocket correctamente HTML5 Javascript
artkoenig

Como lo menciona teobe, algunos navegadores no cierran los websockets automáticamente. No intente manejar ningún evento de “cerrar ventana del navegador” en el lado del cliente. Actualmente no existe una forma confiable de hacerlo, si considera el soporte de los principales equipos de escritorio. Y navegadores móviles (por ejemplo, onbeforeunload no funcionará en Mobile Safari). Tuve una buena experiencia con el manejo de este problema del lado del servidor. Por ejemplo, si usa Java EE, eche un vistazo a javax.websocket.Endpoint, dependiendo del navegador ya sea el OnClose método o el OnError se llamará al método si cierra/recarga la ventana del navegador.

por favor usa esto

var uri = "ws://localhost:5000/ws";
var socket = new WebSocket(uri);
socket.onclose = function (e){
    console.log(connection closed);
};
window.addEventListener("unload", function () {
    if(socket.readyState == WebSocket.OPEN)
        socket.close();
});

Cerrar el navegador no activa el evento de cierre de websocket. Debe llamar a socket.close() manualmente.

Al usar el método de cierre del socket web, donde puede escribir cualquier función de acuerdo con los requisitos.

var connection = new WebSocket('ws://127.0.0.1:1337');
    connection.onclose = () => {
            console.log('Web Socket Connection Closed');
        };

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad