fernandoabolafio/ws_client.html

## ws_client.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Websocket Client</title>
<script type="text/javascript">
window.onload = function () {
    var conn;
    var msg = document.getElementById("msg");
    var log = document.getElementById("log");
    var btnConnect = document.getElementById("connect");
    var btnClose = document.getElementById("close");
    var btnSubsInex = document.getElementById("subs-inex");
    var btnSendInvalid = document.getElementById("send-invalid");
    var btnSubsPing = document.getElementById("subs-ping")

    const MSG_ERROR = 0;
    const MSG_SENT = 1;
    const MSG_RECEIVED = 2;

    function appendLog(message, msgType) {
        var item = document.createElement("div");
        item.innerText = message;
        switch (msgType) {
            case MSG_ERROR:
                item.style = "color: red;"
                break;
            case MSG_SENT:
                item.style = "color: green;"
                break;
            case MSG_RECEIVED:
                item.style = "color: blue;"
                break;
            default:
                break;
        }

        var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
        log.appendChild(item);
        if (doScroll) {
            log.scrollTop = log.scrollHeight - log.clientHeight;
        }
    }

    btnConnect.onclick = e => {
        e.preventDefault();
        connectWebSocket();
    }

    btnClose.onclick = e => {
        e.preventDefault();
        closeWebSocket();
    }

    btnSubsPing.onclick = e => {
        e.preventDefault();
        sendMessage({ command: "subscribe", id: "1" }, { rpcs: ["ping"] });
    }

    btnSubsInex.onclick = e => {
        e.preventDefault();
        sendMessage({ command: "subscribe", id: "1" }, { rpcs: ["pingo"] });
    }

    btnSendInvalid.onclick = e => {
        e.preventDefault();
        sendMessage({ command: "invalid", id: "1" }, { rpcs: [ "ping" ] })
    }

    function connectWebSocket() {
        if (window["WebSocket"]) {
            conn = new WebSocket("wss://localhost:4443/v1/ws");
            conn.onopen = () => {
                appendLog("Websocked connected!");
            }
            conn.onclose = function (evt) {
                appendLog("Connection closed");
            }
            conn.onmessage = function (evt) {
                var messages = evt.data.split('\n');
                for (var i = 0; i < messages.length; i++) {
                    appendLog(messages[i], MSG_RECEIVED);
                }
            }
            conn.onerror = function(evt) {
                var messages = evt.data.split('\n');
                for (var i = 0; i < messages.length; i++) {
                    appendLog(messages[i], MSG_RECEIVED);
                }
            }
        } else {
            appendLog("Your browser does not support WebSockets");
        }
    }

    function closeWebSocket() {
        if (conn && conn.readyState === 1) {
            conn.close();
        } else {
            appendLog("Websocket is already closed");
        }
    }


    const sendMessage = (header, payload) => {
        if (!conn || conn.readyState !== 1) {
            appendLog("Connection is closed!", MSG_ERROR)
            return;
        }
        const headerSerialized = JSON.stringify(header);
        const payloadSerialized = JSON.stringify(payload);
        appendLog("Sending \n header: " +  headerSerialized +  "\n payload: " + payloadSerialized, MSG_SENT);
        conn.send(headerSerialized);
        conn.send(payloadSerialized);
    }
};
</script>
<style type="text/css">
html {
    overflow: hidden;
}
body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: gray;
}
#log {
    background: white;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    right: 0.5em;
    bottom: 3em;
    overflow: auto;
}
</style>
</head>
<body>

<div id="log">
        <button id="connect">Connect socket</button>
        <button id="close">Close socket</button>
        <button id="send-invalid">Send invalid command</button>
        <button id="subs-inex">Subscribe to inexistent rpc</button>
        <button id="subs-ping">Subscribe to ping</button>
        <button id="clear">Clear</button>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Websocket Client</title>
	<script type="text/javascript">
	window.onload = function () {
	var conn;
	var msg = document.getElementById("msg");
	var log = document.getElementById("log");
	var btnConnect = document.getElementById("connect");
	var btnClose = document.getElementById("close");
	var btnSubsInex = document.getElementById("subs-inex");
	var btnSendInvalid = document.getElementById("send-invalid");
	var btnSubsPing = document.getElementById("subs-ping")

	const MSG_ERROR = 0;
	const MSG_SENT = 1;
	const MSG_RECEIVED = 2;

	function appendLog(message, msgType) {
	var item = document.createElement("div");
	item.innerText = message;
	switch (msgType) {
	case MSG_ERROR:
	item.style = "color: red;"
	break;
	case MSG_SENT:
	item.style = "color: green;"
	break;
	case MSG_RECEIVED:
	item.style = "color: blue;"
	break;
	default:
	break;
	}

	var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
	log.appendChild(item);
	if (doScroll) {
	log.scrollTop = log.scrollHeight - log.clientHeight;
	}
	}

	btnConnect.onclick = e => {
	e.preventDefault();
	connectWebSocket();
	}

	btnClose.onclick = e => {
	e.preventDefault();
	closeWebSocket();
	}

	btnSubsPing.onclick = e => {
	e.preventDefault();
	sendMessage({ command: "subscribe", id: "1" }, { rpcs: ["ping"] });
	}

	btnSubsInex.onclick = e => {
	e.preventDefault();
	sendMessage({ command: "subscribe", id: "1" }, { rpcs: ["pingo"] });
	}

	btnSendInvalid.onclick = e => {
	e.preventDefault();
	sendMessage({ command: "invalid", id: "1" }, { rpcs: [ "ping" ] })
	}

	function connectWebSocket() {
	if (window["WebSocket"]) {
	conn = new WebSocket("wss://localhost:4443/v1/ws");
	conn.onopen = () => {
	appendLog("Websocked connected!");
	}
	conn.onclose = function (evt) {
	appendLog("Connection closed");
	}
	conn.onmessage = function (evt) {
	var messages = evt.data.split('\n');
	for (var i = 0; i < messages.length; i++) {
	appendLog(messages[i], MSG_RECEIVED);
	}
	}
	conn.onerror = function(evt) {
	var messages = evt.data.split('\n');
	for (var i = 0; i < messages.length; i++) {
	appendLog(messages[i], MSG_RECEIVED);
	}
	}
	} else {
	appendLog("Your browser does not support WebSockets");
	}
	}

	function closeWebSocket() {
	if (conn && conn.readyState === 1) {
	conn.close();
	} else {
	appendLog("Websocket is already closed");
	}
	}


	const sendMessage = (header, payload) => {
	if (!conn \|\| conn.readyState !== 1) {
	appendLog("Connection is closed!", MSG_ERROR)
	return;
	}
	const headerSerialized = JSON.stringify(header);
	const payloadSerialized = JSON.stringify(payload);
	appendLog("Sending \n header: " + headerSerialized + "\n payload: " + payloadSerialized, MSG_SENT);
	conn.send(headerSerialized);
	conn.send(payloadSerialized);
	}
	};
	</script>
	<style type="text/css">
	html {
	overflow: hidden;
	}
	body {
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background: gray;
	}
	#log {
	background: white;
	margin: 0;
	padding: 0.5em 0.5em 0.5em 0.5em;
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	right: 0.5em;
	bottom: 3em;
	overflow: auto;
	}
	</style>
	</head>
	<body>

	<div id="log">
	<button id="connect">Connect socket</button>
	<button id="close">Close socket</button>
	<button id="send-invalid">Send invalid command</button>
	<button id="subs-inex">Subscribe to inexistent rpc</button>
	<button id="subs-ping">Subscribe to ping</button>
	<button id="clear">Clear</button>
	</div>
	</body>
	</html>