Reconexão do cliente quando o servidor for reinicializado no WebSocket


93

Estou usando o web socket usando PHP5 e o navegador Chrome como cliente. Peguei o código do site http://code.google.com/p/phpwebsocket/ .

Eu executo o servidor e o cliente também está conectado. Eu também posso conversar. Agora, quando eu reinicio o servidor (matando-o e iniciando-o novamente), o cliente obtém as informações desconectadas, mas automaticamente não se reconecta ao servidor quando envio a mensagem.

Como fazer isso? Por exemplo, quando recebo as informações desconectadas, devo verificá-las e enviá-las ao JavaScript para atualizar a página ou reconectar?

Respostas:


143

Quando o servidor é reinicializado, a conexão do Web Socket é fechada, portanto, o oncloseevento JavaScript é disparado. Aqui está um exemplo que tenta se reconectar a cada cinco segundos.

function start(websocketServerLocation){
    ws = new WebSocket(websocketServerLocation);
    ws.onmessage = function(evt) { alert('message received'); };
    ws.onclose = function(){
        // Try to reconnect in 5 seconds
        setTimeout(function(){start(websocketServerLocation)}, 5000);
    };
}

3
Eu esperava que houvesse uma maneira mais elegante, sem construir um novo objeto e definir ações de evento ...
ciembor

3
Após 5 minutos, o navegador congela. Eu sou o único?
Marc

16
Você deve adicionar "ws = null;" antes de setTimeout () para evitar a multiplicação de objetos ws e eventHandligs
Máx.

8
Corrija-me se eu estiver errado, mas este código é meio perigoso, pois uma certa quantidade de desconexões causará um estouro de pilha. Isso porque você chama startrecursivamente, sem nunca retornar.
Forivin

10
@Forivin Nenhum problema de stackoverflow aqui. Uma vez que existe apenas um único thread em Javascript executando nosso código a qualquer momento, setTimeout () agenda a função passada para ser executada no futuro quando aquele único thread estiver livre novamente. Depois que setTimeout () é chamado aqui, o thread retorna da função (limpando a pilha) e vai processar o próximo evento na fila. Eventualmente, ele chegará à nossa função anônima que chama start e que será chamada como o quadro superior da pilha.
Stinky,

39

A solução dada por Andrew não está funcionando perfeitamente porque, em caso de perda de conexão, o servidor pode enviar vários eventos de fechamento.

Nesse caso, você definirá vários setTimout's. A solução dada por Andrew só pode funcionar se o servidor estiver pronto antes de cinco segundos.

Então, com base na solução Andrew, retrabalhada, usei setInterval anexando o ID ao objeto janela (dessa forma, ele está disponível "em qualquer lugar"):

var timerID=0;

var socket;

/* Initiate what has to be done */

socket.onopen=function(event){
 /* As what was before */
 if(window.timerID){ /* a setInterval has been fired */
   window.clearInterval(window.timerID);
   window.timerID=0;
 }
 /* ... */
}

socket.onclose=function(event){
  /* ... */
 if(!window.timerID){ /* Avoid firing a new setInterval, after one has been done */
  window.timerID=setInterval(function(){start(websocketServerLocation)}, 5000);
 }
 /* That way, setInterval will be fired only once after losing connection */
 /* ... */
}

você ainda pode usar setTimeoutse aplicar a ideia "id do cronômetro global" a eles;)
RozzA

3
“A solução dada por Andrew só pode funcionar se o servidor estiver pronto antes de cinco segundos.” - A afirmação não é verdadeira. Se o servidor ainda estiver indisponível após cinco segundos, seu cliente não conseguirá abrir uma conexão WebSocket e o oncloseevento será disparado novamente.
Sourav Ghosh

36

ReconnectingWebSocket

O GitHub hospeda uma pequena biblioteca JavaScript que decora a API WebSocket para fornecer uma conexão WebSocket que será reconectada automaticamente se a conexão for interrompida.

A biblioteca reduzida com compactação gzip tem menos de 600 bytes.

O repositório oficial está disponível aqui:

https://github.com/joewalnes/reconnecting-websocket

Inundação de servidor

Se um grande número de clientes estiver conectado ao servidor quando ele for reinicializado. Pode valer a pena gerenciar os tempos de reconexão dos clientes usando um algoritmo Exponential Backoff.

O algoritmo funciona assim:

  1. Para k tentativas, gere um intervalo de tempo aleatório entre 0 e 2 ^ k - 1,
  2. Se você conseguir se reconectar, redefina k para 1,
  3. Se a reconexão falhar, k aumenta em 1 e o processo é reiniciado na etapa 1,
  4. Para truncar o intervalo máximo, quando um certo número de tentativas k for atingido, k para de aumentar após cada tentativa.

Referência:

http://blog.johnryding.com/post/78544969349/how-to-reconnect-web-sockets-in-a-realtime-web-app

ReconnectingWebSocket não lida com reconexões usando este algoritmo.


Ótima resposta, especialmente porque menciona o risco de uma alta carga do servidor quando o servidor fecha as conexões de soquete da web e todos os clientes (que podem ser centenas ou milhares) tentam se reconectar ao mesmo tempo. Em vez de backoff exponencial, você também pode randomizar o atraso como entre 0 e 10 segundos. Isso também distribuirá a carga no servidor.
Jochem Schulenklopper

30

Estou usando esse padrão há algum tempo para JavaScript puro e simples e ele suporta mais alguns casos do que as outras respostas.

document.addEventListener("DOMContentLoaded", function() {

  'use strict';

  var ws = null;

  function start(){

    ws = new WebSocket("ws://localhost/");
    ws.onopen = function(){
      console.log('connected!');
    };
    ws.onmessage = function(e){
      console.log(e.data);
    };
    ws.onclose = function(){
      console.log('closed!');
      //reconnect now
      check();
    };

  }

  function check(){
    if(!ws || ws.readyState == 3) start();
  }

  start();

  setInterval(check, 5000);


});

Isso tentará novamente assim que o servidor fechar a conexão e verificará a conexão para ter certeza de que também está ativa a cada 5 segundos.

Portanto, se o servidor não estiver ativo quando isso for executado ou no momento do evento onclose, a conexão ainda voltará quando estiver online novamente.

NOTA: Usar este script não vai permitir que você pare de tentar abrir uma conexão ... mas acho que é isso que você quer?


7
Eu mudaria apenas: function check () {if (! Ws || ws.readyState === WebSocket.CLOSED) start (); }
dieresys

1
Essa abordagem, além de uma técnica de keep-alive descrita aqui , parece funcionar bem para mim.
Pedro

@Peter, não tenho certeza se o estado ws está aberto, você precisa (ou deveria) pingar, se estou correto, ele já está no protocolo websocket. Este exagero acabou de carregar no seu servidor ...
comte

@comte alguns servidores ws o desconectam após um 'período ocioso', sem que nenhuma mensagem seja enviada do cliente e, para manter a conexão aberta, o ping é uma necessidade maligna.
RozzA

2

Abaixo estão os códigos que usei no meu projeto que funcionam 100%.

  1. Coloque todo o código do websocket dentro da função init.
  2. Dentro do callback onclose, chame o init novamente.
  3. Finalmente, chame a função init dentro da função de documento pronto.

var name = sessionStorage.getItem ('nome');

wsUri =  "ws://localhost:8080";   
var websocket;
$(function() {  
    init();  
    $("#chat_text_box").on("keypress", function(e) {         
        if (e.keyCode == 13) {   //For Enter Button    
            e.preventDefault();
            var mymessage = $('#chat_text_box').val();               
            if(mymessage){
                var msg = {  type: 'chat_text',  data : {  name:name,  msg:mymessage }  };                
                console.log(msg);
                websocket.send(JSON.stringify(msg));
                $('#chat_text_box').val('');
            }               
            return false;                       
        }        
    });      
});     
function init() { 
    websocket = new WebSocket(wsUri);      
    websocket.onopen = function(ev) { /*connection is open */    } 
    websocket.onmessage = function(ev) {        
        var data = JSON.parse(ev.data); //PHP sends Json data        
        var type = data.type;//alert(JSON.stringify(data));
        switch(type) {
            case "chat_text":
                var text = "<div><span class='user'>"+data.data.sender_name+" : </span><span class='msg'>"+data.data.msg+"</span></div>";
                $('#chat-messages').append(text);
                break;            
            default:
                break;

        }        

    };     
    websocket.onerror   = function(ev){}; 
    websocket.onclose = function(ev) {   init();   };  
}

2

Não posso comentar, mas o seguinte:

var socket;

const socketMessageListener = (event) => {
  console.log(event.data);
};

const socketOpenListener = (event) => {
  console.log('Connected');
  socket.send('hello');
};

const socketCloseListener = (event) => {
  if (socket) {
    console.error('Disconnected.');
  }
  socket = new WebSocket('ws://localhost:8080');
  socket.addEventListener('open', socketOpenListener);
  socket.addEventListener('message', socketMessageListener);
  socket.addEventListener('close', socketCloseListener);
};

socketCloseListener();

// for testing
setTimeout(()=>{
  socket.close();
},5000);

Além disso, https://www.npmjs.com/package/back já é bom o suficiente :)


1

function wsConnection(url){
    var ws = new WebSocket(url);
    var s = (l)=>console.log(l);
	ws.onopen = m=>s(" CONNECTED")
    ws.onmessage = m=>s(" RECEIVED: "+JSON.parse(m.data))
    ws.onerror = e=>s(" ERROR")
    ws.onclose = e=>{
        s(" CONNECTION CLOSED");
        setTimeout((function() {
            var ws2 = new WebSocket(ws.url);
			ws2.onopen=ws.onopen;
            ws2.onmessage = ws.onmessage;
            ws2.onclose = ws.onclose;
            ws2.onerror = ws.onerror;
            ws = ws2
        }
        ).bind(this), 5000)
    }
    var f = m=>ws.send(JSON.stringify(m)) || "Sent: "+m;
    f.ping = ()=>ws.send(JSON.stringify("ping"));
    f.close = ()=>ws.close();
    return f
}

c=new wsConnection('wss://echo.websocket.org');
setTimeout(()=>c("Hello world...orld...orld..orld...d"),5000);
setTimeout(()=>c.close(),10000);
setTimeout(()=>c("I am still alive!"),20000);
<pre>
This code will create a websocket which will 
reconnect automatically after 5 seconds from disconnection.

An automatic disconnection is simulated after 10 seconds.


0

Finalmente, eu faço ws reconectar automaticamente em vue + ts, semelhante ao seguinte:

private async mounted() {
    // Connect to WebSocket
    const sn = "sb1234567890";
    const host =
        window.location.protocol == "https:"
            ? "wss://www.xxx.net"
            : process.env.DEV_TYPE === "fullstack"
            ? "ws://10.0.0.14:8528"
            : "ws://www.xxx.net:8528";
    const wsUri = host + "/feed-home/" + sn;
    await this.startWs(wsUri, sn);
    // !!!Deprecated: failed to reconnect
    // let ws = new WebSocket();
    // console.log(ws);
    // ws.onopen = async function(event) {
    //     console.log(event, "openEvent");
    //     clearInterval(that.timer);
    // };
    // ws.onclose = async function(event) {
    //     console.log(event, "close");
    //     that.timer = setInterval(() => {
    //         console.log("Heart Beat");
    //         ws.send("HeartBeat");
    //         // ws = new WebSocket("ws://10.0.0.14:8528/feed-home/" + sn);
    //         console.log(ws);
    //     }, 60000);
    // };
    // ws.onmessage = async function(event) {
    //     console.log(event, "ws");
    //     alert("get it!");
    //     await alert("please update!");
    //     await that.getHome(sn);
    // };
}
private wsReconnected: boolean = false; // check whether WebSocket is reconnected
private async startWs(uri: string, sn: string) {
    let that = this;
    let ws = new WebSocket(uri);
    ws.onopen = async () => {
        if (that.wsReconnected) {
            await that.getHome(sn); // Refresh api data after reconnected
        }
        ws.send("Current client version: " + window.version);
    };
    ws.onmessage = async evt => {
        await that.getHome(sn);
        that.$message({
            type: "success",
            message: evt.data,
            showClose: true,
            center: true,
            duration: 20 * 1000
        });
    };
    ws.onclose = async () => {
        that.wsReconnected = true;
        await that.startWs(uri, sn);
        const sleep = (seconds: number) => {
            return new Promise(resolve =>
                setTimeout(resolve, seconds * 1000)
            );
        };
        await sleep(10); // Try to reconnect in 10 seconds
        // !!!Deprecated: Use timer will cause multiply ws connections
        // if (!that.wsTimer) {
        //     // Try to reconnect in 10 seconds
        //     that.wsTimer = setInterval(async () => {
        //         console.log("reconnecting websocket...");
        //         await that.startWs(uri, sn);
        //     }, 10 * 1000);
        // }
    };
}

0

O evento de fechamento do lado do cliente para WebSocket tem uma propriedade wasClean , que foi útil para mim. Parece que está definido como verdadeiro nos casos em que o computador cliente entra em modo de suspensão etc. ou quando o servidor é interrompido inesperadamente etc. É definido como falso se você fechar manualmente o soquete, caso em que não deseja abrir o soquete automaticamente novamente. Abaixo o código de um projeto Angular 7. Eu tenho esse código em um serviço, então ele pode ser usado em qualquer componente.

    notifySocketClose(event) { 

        if (!event.wasClean) { 
            setTimeout(() => {
                this.setupSocket()
            }, 1000);       
        }
    }

    setupSocket() { // my function to handle opening of socket, event binding etc.
    .....
    .....

            this.websocketConnection = this.websocketConnection ? this.websocketConnection : new WebSocket(socketUrl);
            this.websocketConnection.onclose = this.notifySocketClose.bind(this);   
        } 
    }
    .....
    .....
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.