Create a Websocket client in Javascript using a web worker

let socket = null; // contains the socket object
let shouldReconnect = true; // a flag when we want to auto reconnect
let reconnectTimeout = null; // contains the reconnect timer
let wsServerUrl = '' // the URL to our WebSocket server

onmessage = function (e) {   
    const data = e.data;
    handlingWebSocket(data);
};

function handlingWebSocket(data) {}

 switch (data.type) {
    case 'connect':
        // Logic to open the connection to the websocket server
        break;

    case 'send':
        // sending a message to the web socket server
        break;

    case 'disconnect':
        // disconnet and do some clean up
        break;
    }
}

case 'connect':
    // save URL in local variable
    wsServerUrl = data.wsServerUrl

    // set auto reconnect, so when a connection could not be established it will try to reconnect again
    shouldReconnect = true

    // be sure that there is not still a WebSocket server object
    if (socket && socket.readyState !== WebSocket.CLOSED && socket.readyState !== WebSocket.CLOSING) {
        return;
    }

    // to be save the object is empty
    socket = null;

    // call the function to open the connection
    connectToWebSocket(wsServerUrl);
    break;

function connectToWebSocket(wsServerUrl) {
    console.dir("Start connection to WebsocketServer...");

    // open the connection to the WebSocket server
    socket = new WebSocket(wsServerUrl);

    // event which triggered when the connection has been established
    socket.onopen = () => {
        // clear the timeout when the connection was established
        clearTimeout(reconnectTimeout);

        // send message to parent function that the connection was established
        postMessage({ type: 'connected' });
    };

    // event when a message comes from the WebSocket server
    socket.onmessage = (event) => {
        try {
            const msgContent = JSON.parse(event.data);
            postMessage({ type: 'data', payload: msgContent });
        } catch (err) {
            postMessage({ type: 'error', payload: "Error at parsing message datas" });
        }
    };

    // event will be triggered when an error with the WebSocket interfaces raised
    socket.onerror = (err) => {
        postMessage({ type: 'error', payload: err.message });
    };

    // event which triggered when the connection to the WebSocket server will be closed
    socket.onclose = () => {
        postMessage({ type: 'closed' });

        // clean up before try to reconnect
        disposeWebSocket()   

        // check if reconnection should be running
        if (shouldReconnect) {
            postMessage({ type: 'reconnect' });

            // set a timeout every 5sec for trying to reconnect
            reconnectTimeout = setTimeout(
            () => connectToWebSocket(wsServerUrl),
                5000);
        }     
    };
}

function disposeWebSocket() {
    clearTimeout(reconnectTimeout);

    if (socket) {
        socket.onopen = null;
        socket.onmessage = null;
        socket.onerror = null;
        socket.onclose = null;

        socket = null;
    }
}

case 'send':
    // check if the connection still open before sending datas
    if (socket && socket.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify(data.payload));
    }
    break;

case 'disconnect':
    // prevent auto reconnect when the connection was active closed
    shouldReconnect = false

    if (socket) {
        // we call the close method and pass a status code.
        // code 1000 means normal closure
        socket.close(1000, "Client closing connection");
        console.dir("Sent CLOSE-connection request to server");
    }

    // call the dispose function to clean up
    disposeWebSocket();

    // set the command to end up the web worker semselfe
    self.close();

    break;

    
    


    
WebSocket Worker
    
Connecting...

    
    send datas to WSS

    

const wsWorker = new Worker('websocketHandler.worker.js');

wsWorker.postMessage({ type: 'connect', wsServerUrl: 'ws://192.168.100.150:4040' });

wsWorker.onmessage = (event) => {
    const { type, payload } = event.data;
    const statusEl = document.getElementById('status');

    if (type === 'connected') {
        statusEl.textContent = "#### CONNECTION to WebSocketServer ESTABLISHED ####";
    } else if (type === 'data') {
        console.dir('Data incomming: ' + JSON.stringify(payload));
    } else if (type === 'error') {
        statusEl.textContent = "Error: " + JSON.stringify(payload);
    } else if (type === 'closed') {
        statusEl.textContent = "WebSocket is closed";
    }else if (type === 'reconnect'){
        statusEl.textContent = "Connection to WebSocketServer closed - Try to reconnect...";
    }
};

function sendDatasToWss(){
    console.log("Sending datas to WSS");
    wsWorker.postMessage({ type: 'send', msgContent: 'SomeDatas you need in the WSS' });
}

window.addEventListener('beforeunload', () => {
    wsWorker.postMessage({ type: 'disconnect' });

    // Give the worker time to clean up before terminate the web worker
    setTimeout(
        () => wsWorker.terminate(),
    10);
});