Cerrar WebSocket correctamente (HTML5, Javascript)

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.

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.

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.

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

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');
        };