client.js

"use strict";
let tm;

let sock;

let ping = function() {
    if(sock.readyState != WebSocket.OPEN) return;
    sock.send('__ping__');
    tm = setTimeout(function () {
        // close connection and reattempt
        sock.close();
        sock = newsocket();
    }, 1000);
};

let pong = function() {
    clearTimeout(tm);
};


let newsocket = function() {

    let socket = new WebSocket("ws://localhost:8280");

    socket.onopen = function(e) {
        let msg1 = document.createElement('div');
        let msg2 = document.createElement('div');
        msg1.textContent = "[open] Connection established";
        msg2.textContent = "Sending to server";
        let messages = document.getElementById('messages');
        messages.append(msg1);
        messages.append(msg2);
        socket.send("My name is Bob.\n");
    };

    socket.onclose = function(event) {
        let messages = document.getElementById('messages');
        let msg = document.createElement('div');
        if (event.wasClean) {
            msg.textContent =`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`;
        } else {
            // e.g. server process killed or network down
            // event.code is usually 1006 in this case
            msg.textContent = '[close] Connection died';
        }
        messages.append(msg);

        msg = document.createElement('div');
        msg.textContent = `[close] attempting reconnection...`;
        messages.append(msg);

        setTimeout(function() {
            sock = newsocket(); // auto reconnect
        }, 1000);
    };

    socket.onerror = function(error) {
        let msg = document.createElement('div');
        msg.textContent = `[error] ${error.message}`;
        document.getElementById('messages').append(msg);
    };

    // message received - show the message in div#messages
    socket.onmessage = function(event) {
        let message = event.data;
        if(message == '__pong__') {
            pong();
            return;
        }

        let messageElem = document.createElement('div');
        messageElem.textContent = message;
        document.getElementById('messages').append(messageElem);
    };

    return socket;
};



sock = newsocket();
setInterval(ping, 1100);

// send message from the form
document.forms.publish.onsubmit = function() {
    if(sock.readyState != WebSocket.OPEN) return false;
    let outgoingMessage = this.message.value;

    sock.send(outgoingMessage);
    return false; // this prevents standard HTML submission
};

// https://stackoverflow.com/questions/3780511/reconnection-of-client-when-server-reboots-in-websocket?noredirect=1&lq=1
// https://stackoverflow.com/questions/22431751/websocket-how-to-automatically-reconnect-after-it-dies