Come attendere readyState di un WebSocket per cambiare

Question

Sto cercando di implementare un WebSocket con un fallback polling. Se la connessione WebSocket ha esito positivo, readyState diventa 1, ma se non riesce, readyState è 3 e dovrei iniziare il polling.

Ho provato qualcosa di simile:

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

mi aspettavo socket.readyState per aggiornare in modo asincrono, e mi permette di leggere immediatamente. Tuttavia, quando eseguo questo, il mio browser si blocca (l'ho lasciato aperto per circa mezzo minuto prima di mollare).

Ho pensato che forse c'era un evento onreadyStateChanged, ma non ne ho visto uno nel riferimento MDN.

Come dovrei attuando questo? Apparentemente un ciclo vuoto non funzionerà, e non c'è nessun evento per questo.

Answer 1

vostro ciclo while è probabilmente chiudendo il tuo thread. Prova con:

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

Answer 2

Proprio come è stato definito un onmessage gestore, è anche possibile definire un onerror gestore. Questo verrà chiamato quando la connessione fallisce.

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

Answer 3

Ecco una spiegazione più elaborata. Per prima cosa, controlla l'API del browser specifica, poiché non tutti i browser si troveranno nell'ultima RFC. È possibile consultare il

Non si desidera eseguire un ciclo per controllare costantemente lo stato readystate, è un overhead aggiuntivo di cui non si ha bisogno. Un approccio migliore consiste nel comprendere tutti gli eventi rilevanti per un cambiamento di stato pronto e quindi collegarli in modo appropriato. Sono i seguenti:

onclose Un listener di eventi da chiamare quando il readyState della connessione WebSocket passa a CLOSED. Il listener riceve un CloseEvent denominato "close".

onerror Un listener di eventi di essere chiamato in caso di errore. Questo è un semplice evento chiamato "errore".

onmessage Un listener di eventi da chiamare quando viene ricevuto un messaggio dal server. Il listener riceve un MessageEvent chiamato "messaggio".

onopen Un listener di eventi da chiamare quando il readyState della connessione WebSocket passa a OPEN; questo indica che la connessione è pronta per inviare e ricevere dati. L'evento è semplice con il nome "aperto".

JS è interamente basato su eventi, quindi è sufficiente collegare tutti questi eventi e verificare la disponibilità, in questo modo è possibile passare da WS a polling di conseguenza.

vi consiglio di guardare al riferimento di Mozilla, è più facile da leggere che il documento RFC e che vi darà una buona panoramica delle API e come funziona: vedi https://developer.mozilla.org/en-US/docs/WebSockets/WebSockets_reference/WebSocket

Non dimenticare di fare un callback per un tentativo se si dispone di un errore e il polling fino a quando non viene attivata la richiamata per una riconnessione riuscita.

Answer 4

sguardo sul http://dev.w3.org/html5/websockets/

La ricerca di "gestore di eventi" e trovare la tabella.

SuApertura -> aperto
onMessage -> messaggio
onerror -> errore
OnClose -> close

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

ws.onmessage = update; 

Answer 5

Questo è semplice e funziona perfettamente ... è possibile aggiungere condizioni circa il tempo massimo, o il numero di provare a renderlo più 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

Nel mio caso d'uso, volevo mostrare un errore sullo schermo se la connessione fallisce.

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

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

Si noti che in Safari (9.1.2) non error evento viene attivato - altrimenti mi avrebbe messo questo nel gestore di errori.

Answer 7

Non sto utilizzando il pooling. Invece, uso la coda. Per prima cosa ho creare nuova funzione di invio e una coda:

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

poi ho bisogno di leggere e inviare quando la connessione viene stabilito in primo luogo:

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

connessione WebSocket in questo esempio viene creato solo sulla prima clic. Di solito, sui secondi messaggi iniziano ad essere inviati direttamente.