remove debug and add web worker

static/scorch.css

@@ -20,8 +20,7 @@ main {
 	grid-template-areas:
 		"h h h"
 		"a b c"
-		"f f f"
-		"d d d";
+		"f f f";
 }
 
 #header {
@@ -62,7 +61,3 @@ main {
 	padding-right: 1em;
 	padding-top: 8px;
 }
-
-#debugContainer {
-	grid-area: d;
-}

static/scorch.js

@@ -1,45 +1,28 @@
-var socket;
+var worker;
 
 function load() {
-	init_websocket();
+	init_worker();
 	document.querySelector('#player').addEventListener('ended', function() {
 		if (document.querySelector('#shuffle').checked) {
-			socket.send_event('random_track', {});
+			ww_send_event('random_track', {});
 		}
 	});
 }
 
-/* Websocket setup */
-function init_websocket() {
-	let _socket;
-	_socket = new WebSocket('wss://' + window.location.hostname + ws_uri);
-	_socket.send_event = send_event;
-	_socket.onopen = onopen;
-	_socket.onmessage = onmessage;
-	_socket.onclose = onclose;
-	_socket.onerror = onerror;
-	_socket.events = {};
-	_socket.events['artist_albums'] = artist_albums_recv;
-	_socket.events['album_tracks'] = album_tracks_recv;
-	_socket.events['track'] = track_recv;
-	window.socket = _socket;
+function init_worker() {
+	worker = new Worker('/static/scorchWorker.js');
+	worker.onmessage = ww_onmessage;
+	worker.events = {};
+	worker.events['artist_albums'] = artist_albums_recv;
+	worker.events['album_tracks'] = album_tracks_recv;
+	worker.events['track'] = track_recv;
 }
 
-function send_event(event_title, data) {
-	data = JSON.stringify({'event': event_title, 'data': data});
-	if (this.readyState == 0) {
-		console.log("Socket is still opening!");
-		return;
-	}
-	log_debug_message('debug', "Sending `" + event_title + "` event with following data: " + JSON.stringify(data));
-	this.send(data);
+function ww_send_event(event_title, data) {
+	worker.postMessage([event_title, data]);
 }
 
-function onopen(event) {
-	log_debug_message('debug', 'Websocket connected to server.');
-}
-
-function onmessage(event) {
+function ww_onmessage(event) {
 	let data;
 	let event_title;
 	try {
@@ -67,31 +50,12 @@ function onmessage(event) {
 		return;
 	}
 
-	if (socket.events[event_title] === undefined) {
+	if (worker.events[event_title] === undefined) {
 		console.log("Unknown socket event: " + event_title);
 		return;
 	}
-	log_debug_message('debug', "Received `" + event_title + "` event with following data: " + JSON.stringify(data));
-	socket.events[event_title](data);
-}
-
-async function onclose(event) {
-	log_debug_message('debug', 'Websocket lost connection to server.')
-	if (event.wasClean) { return; } // no need to reconnect
-	console.log(event);
-	console.log('Websocket lost connection to server. Re-trying...');
-	await sleep(3000);
-	init_websocket();
-}
-
-function sleep(ms) {
-	return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-function onerror(event) {
-	log_debug_message('error', 'Websocket encountered an error.')
-	console.log("Websocket error!")
-	console.log(event);
+	//console.log("Received `" + event_title + "` event with following data: " + JSON.stringify(data));
+	worker.events[event_title](data);
 }
 
 /* Websocket receive */
@@ -140,7 +104,7 @@ function select_artist(select) {
 	let data = {
 		'artist': select.value,
 	};
-	socket.send_event('select_artist', data);
+	ww_send_event('select_artist', data);
 }
 
 function select_album(select) {
@@ -148,7 +112,7 @@ function select_album(select) {
 		'artist': document.querySelector('#artistList').value, 
 		'album': select.value,
 	};
-	socket.send_event('select_album', data);
+	ww_send_event('select_album', data);
 }
 
 function select_track(select) {
@@ -158,22 +122,5 @@ function select_track(select) {
 		'discnumber': select.selectedOptions[0].dataset['discnumber'],
 		'tracknumber': select.selectedOptions[0].dataset['tracknumber'],
 	};
-	socket.send_event('select_track', data);
-}
-
-/* DOM */
-function show_debug(checkbox) {
-	if (checkbox.checked) {
-		document.querySelector('#debugLog').style.display = 'inherit';
-	} else {
-		document.querySelector('#debugLog').style.display = 'none';
-	}
-}
-
-function log_debug_message(log_level, message) {
-	let msg = new Date().toTimeString().replace(/ .*/, '') + ' ' + message;
-	let li = document.createElement('li');
-	li.className = log_level;
-	li.textContent = msg;
-	document.querySelector('#debugLog').appendChild(li);
+	ww_send_event('select_track', data);
 }

static/scorchWorker.js

@@ -0,0 +1,48 @@
+var socket;
+init_websocket();
+
+onmessage = ww_onmessage;
+function ww_onmessage(event) {
+	socket.send_event(event.data[0], event.data[1]);
+}
+
+/* Websocket setup */
+function init_websocket() {
+	let _socket;
+	_socket = new WebSocket('wss://' + self.location.hostname + '/scorch/ws');
+	_socket.send_event = ws_send_event;
+	_socket.onopen = ws_onopen;
+	_socket.onmessage = ws_onmessage;
+	_socket.onclose = ws_onclose;
+	_socket.onerror = ws_onerror;
+	self.socket = _socket;
+}
+
+function ws_send_event(event_title, data) {
+	data = JSON.stringify({'event': event_title, 'data': data});
+	if (this.readyState == 0) {
+		console.log("Websocket not ready.");
+		return;
+	}
+	//console.log("Sending `" + event_title + "` event with following data: " + JSON.stringify(data));
+	this.send(data);
+}
+
+function ws_onopen(event) {
+	console.log('Websocket connected to server.');
+}
+
+function ws_onmessage(event) {
+	postMessage(event.data);
+}
+
+function ws_onclose(event) {
+	console.log('Websocket lost connection to server.');
+	if (event.wasClean) { return; } // no need to reconnect
+	console.log('Connection break was unclean. Attempting to reconnect...');
+	self.setTimeout(init_websocket, 3000);
+}
+
+function ws_onerror(event) {
+	console.log("Websocket encountered an error.");
+}

templates/index.html

@@ -44,11 +44,6 @@
 					</div>
 				</span>
 			</div>
-			<div id="debugContainer">
-				<input type="checkbox" name="showDebug" id="showDebug" onchange="show_debug(this)">
-				<label for="showDebug">Show Debug Log</label>
-				<pre><ul id="debugLog" style="display:none"></ul></pre>
-			</div>
 		</main>
 	</body>
 </html>