So verbinden Sie sich nach einer engen Verbindung wieder mit dem Websocket [duplicate]

Question 1

Ich baue meine Websocket-Verbindung mit diesem Code auf (z. B.):

var socket = new WebSocket("ws://94.12.176.177:8080");

Und ich schließe die Verbindung mit diesem:

socket.close();

Aber wie stelle ich die Verbindung wieder her?

Ich habe etwas recherchiert und mehrere Methoden ausprobiert. Diese Frage konnte mir nicht helfen: Socket.io beim Trennen erneut verbinden? Es ist das einzige Ergebnis, das dem, was ich suche, nahe kommt.

Der Grund, warum ich dies tun möchte, besteht darin, Benutzern zu ermöglichen, das Senden von Daten an das Web vorübergehend zu stoppen und nach einer bestimmten Zeit erneut zu senden. Ohne erneute Verbindung muss der Benutzer die Seite aktualisieren, um erneut zu senden. Dies kann dazu führen, dass einige Daten verloren gehen. Vielen Dank.

Question 2

Wenn der Server die Verbindung schließt, der Client nicht versuchen Sie, sich wieder zu verbinden. Mit einigen JS-Frameworks vielleicht, aber die Frage war zum Zeitpunkt dieser Antwort als einfaches Vanilla-JS gekennzeichnet.

Ich bin etwas frustriert, weil die akzeptierte, positiv bewertete Antwort eindeutig falsch ist und es mich einige Zeit gekostet hat, die richtige Lösung zu finden.

Welches ist hier: Wiederverbindung des Clients, wenn der Server in WebSocket neu gestartet wird

Question 3

Ich habe auf dieser Seite eine großartige Lösung gefunden: sam-low.com

Nachdem die ursprüngliche Verbindung geschlossen wurde, müssen Sie ein neues WebSocket-Objekt mit neuen Ereignis-Listenern erstellen

function startWebsocket() {
  var ws = new WebSocket('ws://localhost:8080')

  ws.onmessage = function(e){
    console.log('websocket message event:', e)
  }

  ws.onclose = function(){
    // connection closed, discard old websocket and create a new one in 5s
    ws = null
    setTimeout(startWebsocket, 5000)
  }
}

startWebsocket();

Beachten Sie, dass das neue WebSocket-Objekt bei einem erneuten Verbindungsproblem weiterhin ein weiteres Schließereignis empfängt, was bedeutet, dass onclose() wird ausgeführt, auch wenn es nie technisch geöffnet wurde. Aus diesem Grund ist die Verzögerung von fünf Sekunden sinnvoll – ohne sie könnten Sie feststellen, dass Sie Tausende von Websocket-Verbindungen mit einer Geschwindigkeit erstellen und zerstören, die wahrscheinlich etwas kaputt machen würde.

Question 4

HINWEIS: Die Frage ist markiert socket.io Diese Antwort bezieht sich also speziell auf socket.io.
Wie viele Leute darauf hingewiesen haben, gilt diese Antwort nicht für Vanilla-Websockets, die unter keinen Umständen versuchen, die Verbindung wiederherzustellen.

Websockets versuchen nicht automatisch, die Verbindung wiederherzustellen. Sie müssen den Socket neu erstellen, um eine neue Verbindung zu erhalten. Das einzige Problem dabei ist, dass Sie Ihre Handler neu anhängen müssen.

Aber wirklich, Websockets sind so konzipiert, dass sie offen bleiben.

Eine bessere Methode wäre, die zu haben Server beendet die Verbindung. Auf diese Weise wird der Websocket eine auslösen onclose Ereignis, versucht aber weiterhin, die Verbindung herzustellen. Wenn der Server wieder zuhört, wird die Verbindung automatisch wiederhergestellt.

Question 5

Einwandfreie Umsetzung:

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

Um es zu testen:

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

Bearbeiten: Beachten Sie die Exponential Backoff-Implementierung (im verlinkten Thread durch den obersten Kommentar: https://stackoverflow.com/a/37038217/8805423), nicht im obigen Code, ABER SEHR SEHR WICHTIG.

Nochmals editieren: Auschecken back aus primus: https://www.npmjs.com/package/backes ist eine flexible sexy Implementierung.

Question 6

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.