GUI/index.html

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

<head>
	<meta charset="utf-8" />
	<title>Database connected to CanvasJS</title>
	<script src="socket.io.js"></script>
	<script src="jquery-3.5.1.js"></script>
	<script src="canvasjs.min.js"></script>
	<!-- <script src="https://cdn.socket.io/3.1.1/socket.io.min.js"></script> -->
</head>

<body>
	<div id="chartContainer" style="height: 150px; width: 100%;"></div>
	<div id="chartContainer2" style="height: 150px; width: 100%;"></div>
	<div id="chartContainer3" style="height: 150px; width: 100%;"></div>
	<div id="chartContainer4" style="height: 150px; width: 100%;"></div>
	<div id="chartContainer5" style="height: 150px; width: 100%;"></div>
	<script>
		let socket = new WebSocket("ws://localhost:8011/");
		console.log(socket)
		socket.onopen = function (e) {
			console.log("[open] Connection established");
			console.log("Sending to server");
			socket.send("Client Connected");
		};

		socket.onmessage = function (event) {
			console.log(`[message] Data received from server: ${event.data}`);
		};

		socket.onclose = function (event) {
			if (event.wasClean) {
				console.log(`[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
				console.log('[close] Connection died');
			}
		};

		socket.onerror = function (error) {
			console.log(`[error] ${error.message}`);
		};
	</script>
</body>

</html>