jQuery(document).ready(function($){
    let ws = null;

    $('#reconnectButton').click(function(ev){
        ev.preventDefault();

        if (ws) {
            $('#reconnectButton').text('Connect');
            ws.close();
            ws = null;
        } else {
            $('#reconnectButton').text('Disconnect');
            setWsStatus('Connecting');
            ws = new WebSocket(window.location.href.replace(/^http/, "ws"));
            ws.onopen = function(event) {
                setWsStatus('Connected');
                $('#sendForm input').focus();
            }
            ws.onclose = function(event) {
                setWsStatus('Closed');
                $('#reconnectButton').text('Connect');
                ws.close();
                ws = null;
            }
            ws.onerror = function(event) {
                setWsStatus('Error');
            }
            ws.onmessage = function(event) {
                if (typeof event.data == 'string') {
                    pushLine('Received ' + event.data);
                } else if (typeof event.data == 'object') {
                    pushLine('Received binary message!');
                } else {
                    pushLine('Unknown msg data type ' + typeof event.data);
                }
            };
        }
    }).click();

    $('#sendForm').submit(function(ev){
        ev.preventDefault();

        if (!ws) {
            alert('please connect first');
            return;
        }

        const input = $('#sendForm input');
        const val = input.val();
        pushLine('Sending ' + val);
        ws.send(val);
        input.val('').focus();
    });
});

function pushLine(line) {
    $('#logView').append($('<p>').text(new Date().toLocaleTimeString() + ': ' + line));
}

function setWsStatus(status) {
    $('#wsStatus').text(status);
    pushLine('Status changed to ' + status);
}