See also the <a href='./'>non-websocket version</a> which reports your IP address and does not break when your connection changes.<br>
<tt>TODO: also send packets from server to client to check if those arrive while the uplink is blocked.</tt><br>
<br>
Status: <span id=statusdiv>loading page</span><br>
Local time offset: <input style='width: 50px' id=offset type=number step=1 value=0>ms<br>
Columns: received time, time_server-time_sent, time_received-time_server, time_sent-time_received
<div id='out'></div>

<script>
	var socket = new WebSocket(`wss://${location.host}:83`);
	var queue = {};
	var id = 10;

	var statusdiv = document.getElementById('statusdiv');
	var offset = document.getElementById('offset');
	var out = document.getElementById('out');

	var statusInterval = setInterval(function() {
		var s;
		if (socket.readyState == socket.CONNECTING) { s = 'establishing connection'; }
		else if (socket.readyState == socket.OPEN) { s = 'connected'; }
		else if (socket.readyState == socket.CLOSING) { s = 'closing'; }
		else if (socket.readyState == socket.CLOSED) {
			s = 'connection closed';
			out.innerHTML = getTimeStr(new Date()) + ' websocket connection closed<br>\n' + out.innerHTML;
			clearInterval(statusInterval);
			clearInterval(txInterval);
		}

		statusdiv.innerHTML = `${s}; pending transmission: ${socket.bufferedAmount}B; pending responses: ${Object.keys(queue).length}`;
	}, 100);

	socket.addEventListener('message', function (event) {
		var d = new Date();
		var recvtime = (d.getTime() / 1000) % 999;
		var data = event.data.split(',');
		var senttime = queue[data[0]];
		var serverrecvtime = parseFloat(data[1]);

		delete queue[data[0]];

		if (offset.value.replace('-','').length > 0) {
			senttime -= parseInt(offset.value) / 1000;
			recvtime -= parseInt(offset.value) / 1000;
		}

		var ms1 = Math.round((serverrecvtime - senttime) * 1000);
		var ms2 = Math.round((recvtime - serverrecvtime) * 1000);
		var tot = Math.round((recvtime - senttime) * 1000);

		out.innerHTML = `${getTimeStr(d)} ${ms1}ms ${ms2}ms &Sigma;${tot}ms<br>\n` + out.innerHTML;
	});

	var txInterval = setInterval(function() {
		socket.send(id);
		queue[id.toString()] = (new Date().getTime() % 999000) / 1000;
		id++;
		if (id >= 100) {
			id = 10;
		}
		if (Object.keys(queue).length >= 90) {
			out.innerHTML = 'Queue was full... cleared.<br>' + out.innerHTML;
			queue = {};
		}
	}, 1000);

	function lz(n) {
		return (n < 10 ? '0' : '') + n;
	}

	function getTimeStr(d) {
		return `${lz(d.getHours())}:${lz(d.getMinutes())}:${lz(d.getSeconds())}`;
	}
</script>