I can't get the websocket to automatically reconnect unless I refresh the browser tab

Question

I can't get the websocket to automatically reconnect unless I refresh the browser tab

Currently, I have a web server running websockets on an ESP8266. The operations are smooth on both the client and server sides, with data being sent and received. However, when the server side disconnects due to a power cycle or code upload, the client (Chrome) fails to reconnect to the websocket. Even though the console log indicates that it is attempting to connect to the websocket after reloading or refreshing the web page, the reconnection does not occur. The only workaround I have discovered is to close the tab and start a new session.

My code is largely based on the tutorial provided by Random Nerd Tutorials

var gateway = `ws://${window.location.hostname}/ws`;
var websocket;

function initWebSocket() {
  console.log('Trying to establish a WebSocket connection...');
  websocket = new WebSocket(gateway);
  websocket.onopen    = onOpen;
  websocket.onclose   = onClose;
  websocket.onmessage = onMessage; // <-- add this line
}

function onOpen(event) {
  console.log('Connection established');
}

function onClose(event) {
  console.log('Connection closed');
  setTimeout(initWebSocket, 2000);
}

Does the code above lack any necessary components to enhance its reliability?

javascript websocket esp8266

Answer 1

Answer №1

If you're encountering difficulties, consider utilizing the setInterval method. Give this code snippet a try, and feel free to adjust it as needed.

var endpoint = `ws://${window.location.hostname}/ws`;
var webSocket, timer = null;

function initializeWebSocket() {
  console.log('Attempting to establish a WebSocket connection...');
  webSocket = new WebSocket(endpoint);
  webSocket.onopen    = onOpen;
  webSocket.onerror    = onError;    //  new
  webSocket.onclose   = onClose;
  webSocket.onmessage = onMessage; // <-- include this line
}

function onOpen(event) {    
  clearInterval(timer) // <= improved
  console.log('Connection established');
}

function onError() {   // <= New
       timer = setInterval(initializeWebSocket, 1000 * 60);        
};

function onClose(event) {
  console.log('Connection terminated');
  timer = setInterval(initializeWebSocket, 1000 * 60); // <=new
}

Answer 2

If you're encountering difficulties, consider utilizing the setInterval method. Give this code snippet a try, and feel free to adjust it as needed.

var endpoint = `ws://${window.location.hostname}/ws`;
var webSocket, timer = null;

function initializeWebSocket() {
  console.log('Attempting to establish a WebSocket connection...');
  webSocket = new WebSocket(endpoint);
  webSocket.onopen    = onOpen;
  webSocket.onerror    = onError;    //  new
  webSocket.onclose   = onClose;
  webSocket.onmessage = onMessage; // <-- include this line
}

function onOpen(event) {    
  clearInterval(timer) // <= improved
  console.log('Connection established');
}

function onError() {   // <= New
       timer = setInterval(initializeWebSocket, 1000 * 60);        
};

function onClose(event) {
  console.log('Connection terminated');
  timer = setInterval(initializeWebSocket, 1000 * 60); // <=new
}

I can't get the websocket to automatically reconnect unless I refresh the browser tab

Answer №1

Similar questions

Tips on retrieving a specified string from within an array of strings

Ways to customize easypiechart appearance with CSS styling

javascript: unable to modify currentTime in <audio> tag

Incorporating an element into a nested array

Is it a mistake? Using React and ES6 without Babel may not be the

Placing files in the "Dist" folder is causing an issue by disrupting the functionality of the Angular 2 app

The state update is triggering a soft refresh of the page within Next.js

The angular view is lacking a CSS class

react-swiper does not trigger a re-render

Say goodbye to my HTML5 creations

Rerender not occurring after array splice with React hooks setter

What steps should I take to address the issues with my quiz project?

Getting Started with NPM Package Initialization in Vue

Creating custom ExpectedConditions with Protractor for detecting attribute changes

Capture a snapshot of a webpage that includes an embedded iframe

Google Analytics in Next.js Missing Page Title Configuration

Why isn't my List<string> being retrieved from the MVC Controller in an $ajax request?

Tips for validating a dynamically created form with Bootstrap tabs using jQuery

Is there a method to retrieve a value from a node.js server when a div is clicked?

Unable to utilize console.log and alert functions within the Next.js application