dag10/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />

	<title>MG Connection Test</title>

	<style>
		body {
			display: flex;
			flex-direction: column;
			margin: 0;
			height: 100vh;
			font-family: monospace;
		}

		.top-row {
			border-bottom: solid 1px black;
			display: flex;
		}

		.top-row>* {
			margin: 0.5em;
		}

		.top-row>button {
			width: 4em;
			font-weight: bold;
		}

		button.add {
			background: rgb(229, 248, 229);
		}

		button.remove {
			background: rgb(248, 229, 229);
		}

		.top-row #summary {
			flex-grow: 1;
			font-variant-numeric: tabular-nums;
			display: flex;
		}

		.top-row #summary>span {
			flex-grow: 1;
			text-align: center;
		}

		#status {
			flex-grow: 1;
			overflow-y: scroll;
		}
	</style>

	<script>
		let connections = []; // tuples of type [idx, ws]
		let nextIdx = 1;

		const wsReadyStateName = (rs) => {
			switch (rs) {
				case WebSocket.CONNECTING: return "CONNECTING";
				case WebSocket.OPEN: return "OPEN";
				case WebSocket.CLOSING: return "CLOSING";
				case WebSocket.CLOSED: return "CLOSED";
				default: return "UNKNOWN";
			}
		}

		const updateStatus = () => {
			let counts = {};
			counts[WebSocket.CONNECTING] = 0;
			counts[WebSocket.OPEN] = 0;
			counts[WebSocket.CLOSING] = 0;
			counts[WebSocket.CLOSED] = 0;

			connections.forEach((conn) => {
				const ws = conn[1];
				counts[ws.readyState]++;
			});

			document.getElementById("summary").innerHTML = `
				<span>Total: ${counts[WebSocket.CONNECTING] + counts[WebSocket.OPEN] + counts[WebSocket.CLOSING]}</span>
				<span>Connecting: ${counts[WebSocket.CONNECTING]}</span>
				<span>Open: ${counts[WebSocket.OPEN] + counts[WebSocket.CLOSING]}</span>
			`;

			document.getElementById("status").innerHTML = connections.map((conn) => {
				const idx = conn[0];
				const ws = conn[1];

				return `
					Connection ${idx + 1}: ${wsReadyStateName(ws.readyState)}<br />
				`;
			}).join("");
		}

		const addConnections = (count) => {
			for (let i = 0; i < count; i++) {
				const idx = nextIdx++;
				const ws = new WebSocket(`${window.location.origin.replace("http", "ws")}/websockettest/${idx}`);
				ws.onclose = updateStatus;
				ws.onerror = updateStatus;
				ws.onopen = updateStatus;
				connections.push([idx, ws]);
			}

			updateStatus();
		}

		const removeConnections = (count) => {
			for (let i = 0; i < count; i++) {
				if (connections.length == 0) {
					return;
				}

				const conn = connections.shift();
				const ws = conn[1];
				ws.close();
			}
		}

		document.addEventListener('DOMContentLoaded', updateStatus, false);
	</script>
</head>

<body>
	<div class="top-row">
		<button class="remove" onClick="removeConnections(1)">-1</button>
		<button class="add" onClick="addConnections(1)">+1</button>
		<button class="add" onClick="addConnections(10)">+10</button>
		<button class="add" onClick="addConnections(20)">+20</button>
		<div id="summary"></div>
	</div>

	<div id="status"></div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />

	<title>MG Connection Test</title>

	<style>
	body {
	display: flex;
	flex-direction: column;
	margin: 0;
	height: 100vh;
	font-family: monospace;
	}

	.top-row {
	border-bottom: solid 1px black;
	display: flex;
	}

	.top-row>* {
	margin: 0.5em;
	}

	.top-row>button {
	width: 4em;
	font-weight: bold;
	}

	button.add {
	background: rgb(229, 248, 229);
	}

	button.remove {
	background: rgb(248, 229, 229);
	}

	.top-row #summary {
	flex-grow: 1;
	font-variant-numeric: tabular-nums;
	display: flex;
	}

	.top-row #summary>span {
	flex-grow: 1;
	text-align: center;
	}

	#status {
	flex-grow: 1;
	overflow-y: scroll;
	}
	</style>

	<script>
	let connections = []; // tuples of type [idx, ws]
	let nextIdx = 1;

	const wsReadyStateName = (rs) => {
	switch (rs) {
	case WebSocket.CONNECTING: return "CONNECTING";
	case WebSocket.OPEN: return "OPEN";
	case WebSocket.CLOSING: return "CLOSING";
	case WebSocket.CLOSED: return "CLOSED";
	default: return "UNKNOWN";
	}
	}

	const updateStatus = () => {
	let counts = {};
	counts[WebSocket.CONNECTING] = 0;
	counts[WebSocket.OPEN] = 0;
	counts[WebSocket.CLOSING] = 0;
	counts[WebSocket.CLOSED] = 0;

	connections.forEach((conn) => {
	const ws = conn[1];
	counts[ws.readyState]++;
	});

	document.getElementById("summary").innerHTML = `
	<span>Total: ${counts[WebSocket.CONNECTING] + counts[WebSocket.OPEN] + counts[WebSocket.CLOSING]}</span>
	<span>Connecting: ${counts[WebSocket.CONNECTING]}</span>
	<span>Open: ${counts[WebSocket.OPEN] + counts[WebSocket.CLOSING]}</span>
	`;

	document.getElementById("status").innerHTML = connections.map((conn) => {
	const idx = conn[0];
	const ws = conn[1];

	return `
	Connection ${idx + 1}: ${wsReadyStateName(ws.readyState)}<br />
	`;
	}).join("");
	}

	const addConnections = (count) => {
	for (let i = 0; i < count; i++) {
	const idx = nextIdx++;
	const ws = new WebSocket(`${window.location.origin.replace("http", "ws")}/websockettest/${idx}`);
	ws.onclose = updateStatus;
	ws.onerror = updateStatus;
	ws.onopen = updateStatus;
	connections.push([idx, ws]);
	}

	updateStatus();
	}

	const removeConnections = (count) => {
	for (let i = 0; i < count; i++) {
	if (connections.length == 0) {
	return;
	}

	const conn = connections.shift();
	const ws = conn[1];
	ws.close();
	}
	}

	document.addEventListener('DOMContentLoaded', updateStatus, false);
	</script>
	</head>

	<body>
	<div class="top-row">
	<button class="remove" onClick="removeConnections(1)">-1</button>
	<button class="add" onClick="addConnections(1)">+1</button>
	<button class="add" onClick="addConnections(10)">+10</button>
	<button class="add" onClick="addConnections(20)">+20</button>
	<div id="summary"></div>
	</div>

	<div id="status"></div>
	</body>

	</html>