Updates websocket in controller to match display.

src/controller/controller.ts

@@ -2,20 +2,47 @@ import * as THREE from 'three';
 // @ts-ignore
 import { UpdateRequest, Update } from "/proto/mmelodies.proto";
 
-const url = new URL("/api", location.href);
-const send = document.querySelector("#send");
+// Subscribe to the audioprocess event
+let socket: WebSocket | null = null;
+function connect_ws() {
+	const url = new URL("/api", location.href);
 
-url.protocol = "ws";
-if (location.protocol.startsWith("https")) {
-	url.protocol = "wss";
+	url.protocol = "ws";
+	if (location.protocol.startsWith("https")) {
+		url.protocol = "wss";
+	}
+
+	const ws = new WebSocket(url);
+	ws.binaryType = "arraybuffer";
+
+	ws.addEventListener("open", () => {
+		const message = UpdateRequest.create({ paramRefresh: true});
+		const request = UpdateRequest.encode(message).finish();
+		if (socket) {
+			socket.send(request);
+		}
+	});
+
+	ws.addEventListener("error", (event) => {
+		console.log(event);
+	});
+
+	ws.addEventListener("close", () => {
+		socket = null;
+		setTimeout(() => {
+			socket = connect_ws();
+		}, 2500);
+	});
+
+	// Listen for messages
+	ws.addEventListener("message", (event) => {
+		const message = Update.decode(new Uint8Array(event.data));
+		console.log(message);
+	});
+
+	return ws;
 }
-const socket = new WebSocket(url);
-socket.binaryType = 'arraybuffer'
-
-socket.addEventListener("message", (event) => {
-	const message = Update.decode(new Uint8Array(event.data));
-	console.log(message);
-});
+socket = connect_ws();
 
 // Select all range input elements
 const sliders = document.querySelectorAll(
@@ -27,10 +54,12 @@ sliders.forEach((slider, i) => {
 	slider.addEventListener("input", function () {
 		console.log(`Slider ${this.id} position: ${this.value}`);
 
-		const message = UpdateRequest.create({ paramChanges: [{ id: i, value: this.value }] });
-		const buffer = UpdateRequest.encode(message).finish();
+		if (socket) {
+			const message = UpdateRequest.create({ paramChanges: [{ id: i, value: this.value }] });
+			const buffer = UpdateRequest.encode(message).finish();
 
-		socket.send(buffer);
+			socket.send(buffer);
+		}
 	});
 });
 
@@ -256,4 +285,4 @@ if (window.AbsoluteOrientationSensor) {
 } else {
 	// Log a message to the console if AbsoluteOrientationSensor is not supported
 	console.log('AbsoluteOrientationSensor is not supported in this browser.');
-}
+}