la solution donnée par Andrew ne fonctionne pas parfaitement car, en cas de perte de connexion, le serveur peut envoyer plusieurs événements proches.

dans ce cas, vous mettrez plusieurs setTimout. La solution donnée par Andrew ne peut fonctionner que si le serveur est prêt avant cinq secondes.

alors, basé sur Andrew solution, retravaillé, j'ai fait usage de setInterval attachant L'ID à l'objet fenêtre (de cette façon il est disponible "partout"):

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 */
 /* ... */
}

ReconnectingWebSocket

GitHub héberge une petite bibliothèque JavaScript qui décore l'API WebSocket pour fournir une connexion WebSocket qui se reconnectera automatiquement si la connexion est abandonnée.

Minifiés de la bibliothèque avec la compression gzip est à moins de 600 octets.

le dépôt officiel est disponible ici:

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

Si un grand nombre de clients connectés au serveur lorsqu'il redémarre. Il peut être utile de gérer les temps de reconnexion des clients en utilisant un algorithme de retour exponentiel.

L'algorithme fonctionne comme ceci:

1. Pour k tentatives, la génération aléatoire de l'intervalle de temps entre 0 et 2^k - 1,
2. si vous êtes capable de vous reconnecter, réinitialisez k à 1,
3. si la reconnexion échoue, k augmente de 1 et le processus recommence à l'étape 1,
4. pour tronquer l'intervalle max, lorsqu'un certain nombre d'essais k a été atteint, k cesse d'augmenter après chaque essai.

Référence:

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

ReconnectingWebSocket ne gère pas les reconnections en utilisant cet algorithme.

j'ai utilisé ce patten pendant un certain temps pour pur vanilla JavaScript, et il soutient quelques cas plus que les autres réponses.

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


});

ce sera réessayer dès que le serveur ferme la connexion, et il vérifiera la connexion pour s'assurer qu'elle est en place toutes les 5 secondes également.

donc si le serveur n'est pas opérationnel au moment de l'exécution ou au moment de l'événement onclose, la connexion reviendra quand même une fois qu'elle sera de nouveau en ligne.

NOTE: L'utilisation de ce script ne vous permettra jamais d'arrêter d'essayer d'ouvrir une connexion... mais je pense que c'est ce que vous voulez?

ci-dessous sont les codes que j'ai utilisés dans mon projet qui fonctionne à 100%.

1. mettez tout le code websocket à l'intérieur de la fonction init.
2. à l'intérieur de l'onclose, rappelez l'init.
3. appelle enfin la fonction init à l'intérieur de la fonction document ready.

var nom = sessionStorage.getItem ("nom");

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

ne peut pas commenter, mais le suivant:

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

Plus https://www.npmjs.com/package/back est déjà assez bon:)