javascript - example - websocket nodejs express

Cómo esperar a que el ReadyState de un WebSocket cambie

Question

Estoy tratando de implementar un WebSocket con un respaldo al sondeo. Si la conexión de WebSocket tiene éxito, readyState convierte en 1, pero si falla, readyState es 3, y debería comenzar el sondeo.

Probé algo como esto:

var socket = new WebSocket(url);
socket.onmessage = onmsg;
while (socket.readyState == 0)
{
}
if (socket.readyState != 1)
{
    // fall back to polling
    setInterval(poll, interval);
}

Esperaba que socket.readyState actualice de forma asíncrona y me permita leerlo inmediatamente. Sin embargo, cuando ejecuto esto, mi navegador se congela (lo dejé abierto durante aproximadamente medio minuto antes de rendirme).

Pensé que tal vez había un evento onreadyStateChanged , pero no vi uno en la referencia de MDN.

¿Cómo debo implementar esto? Al parecer, un bucle vacío no funciona, y no hay ningún evento para esto.

Answer 1

Al igual que definió un controlador onmessage , también puede definir un controlador onerror . Este será llamado cuando la conexión falla.

let $connectionError = document.getElementById("connection-error");

setTimeout( () => {
  if (ws.readyState !== 1) {
    $connectionError.classList.add( "show" );
  }
}, 100 );  // ms

Answer 2

Aquí hay una explicación más elaborada. En primer lugar, verifique la API específica del navegador, ya que no todos los navegadores estarán en la última versión de RFC. Puedes consultar el

No desea ejecutar un bucle para verificar constantemente el estado de preparación, es una sobrecarga adicional que no necesita. Un mejor enfoque es comprender todos los eventos relevantes para un cambio de estado, y luego conectarlos de manera apropiada. Son los siguientes:

onclose Un detector de eventos al que se llamará cuando la conexión de WebSocket readyState cambie a CERRADO. El oyente recibe un CloseEvent llamado "cerrar".

onerror Un detector de eventos que debe llamarse cuando se produce un error. Este es un evento simple llamado "error".

onmessage Un detector de eventos al que se llama cuando se recibe un mensaje del servidor. El oyente recibe un mensaje de evento llamado "mensaje".

onopen Un detector de eventos al que se llamará cuando el estado de conexión de WebSocket readyState cambie a OPEN; esto indica que la conexión está lista para enviar y recibir datos. El evento es simple con el nombre "abierto".

JS es totalmente impulsado por eventos, por lo que solo necesita conectar todos estos eventos y verificar el estado del estado, de esta manera puede cambiar de WS a sondeo en consecuencia.

Le recomiendo que consulte la referencia de Mozilla, es más fácil de leer que el documento RFC y le proporcionará una buena descripción general de la API y su funcionamiento: consulte https://developer.mozilla.org/en-US/docs/WebSockets/WebSockets_reference/WebSocket

No olvide realizar una devolución de llamada para un reintento si tiene una falla y realice una encuesta hasta que se active la devolución de llamada para una reconexión exitosa.

Answer 3

Busque en http://dev.w3.org/html5/websockets/

Busque "Controlador de eventos" y busque la tabla.

onopen -> abierto
mensaje onmessage ->
onerror -> error
onclose -> cerrar

function update(e){ /*Do Something*/};
var ws = new WebSocket("ws://localhost:9999/");

ws.onmessage = update;

Answer 4

En mi caso de uso, quería mostrar un error en la pantalla si falla la conexión.

setTimeout(function(){
    if(socket.readyState === 0) {
        //do nothing
    } else if (socket.readyState !=1) {
        //fallback
        setInterval(poll, interval);
    }
}, 50);

Tenga en cuenta que en Safari (9.1.2) no se activa ningún evento de error ; de lo contrario, habría colocado esto en el controlador de errores.

Answer 5

Esto es simple y funciona perfectamente ... puede agregar condiciones sobre el tiempo máximo, o la cantidad de intentos para hacerlo más robusto ...

function sendMessage(msg){
    // Wait until the state of the socket is not ready and send the message when it is...
    waitForSocketConnection(ws, function(){
        console.log("message sent!!!");
        ws.send(msg);
    });
}

// Make the function wait until the connection is made...
function waitForSocketConnection(socket, callback){
    setTimeout(
        function () {
            if (socket.readyState === 1) {
                console.log("Connection is made")
                if(callback != null){
                    callback();
                }
                return;

            } else {
                console.log("wait for connection...")
                waitForSocketConnection(socket, callback);
            }

        }, 5); // wait 5 milisecond for the connection...
}

Answer 6

No estoy usando la agrupación en absoluto. En su lugar, uso la cola. Primero creo una nueva función de envío y una cola:

var msgs = []
function send (msg) {
  if (ws.readyState !== 1) {
    msgs.push(msg)
  } else {
    ws.send(msg)
  }
}

Luego necesito leer y enviar cuando la conexión se establece por primera vez:

function my_element_click () {
  if (ws == null){
    ws = new WebSocket(websocket_url)
    ws.onopen = function () {
      while (msgs.length > 0) {
        ws.send(msgs.pop())
      }
    }
    ws.onerror = function(error) {
      // do sth on error
    }
  } 
  msg = {type: ''mymessage'', data: my_element.value}
  send(JSON.stringify(msg))
}

La conexión WebSocket en este ejemplo se crea solo en el primer clic. Por lo general, en los segundos mensajes comienzan a ser enviados directamente.

Answer 7

Tu bucle while probablemente está bloqueando tu hilo. Trate de usar:

var socket = new WebSocket(url);
socket.onmessage = onmsg;
socket.onerror = function(error) {
    // connection failed - try polling
}