websocket reconnects automatically

static/scorch.css

@@ -16,11 +16,12 @@ main {
 	height: 100%;
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: auto 1fr auto;
+	grid-template-rows: auto 1fr auto auto;
 	grid-template-areas:
 		"h h h"
 		"a b c"
-		"f f f";
+		"f f f"
+		"d d d";
 }
 
 #header {
@@ -61,3 +62,7 @@ main {
 	padding-right: 1em;
 	padding-top: 8px;
 }
+
+#debugContainer {
+	grid-area: d;
+}

static/scorch.js

@@ -1,7 +1,7 @@
 var socket;
 
 function load() {
-	socket = init_websocket();
+	init_websocket();
 	document.querySelector('#player').addEventListener('ended', function() {
 		if (document.querySelector('#shuffle').checked) {
 			socket.send_event('random_track', {});
@@ -11,16 +11,18 @@ function load() {
 
 /* Websocket setup */
 function init_websocket() {
-	let socket = new WebSocket('wss://' + window.location.hostname + ws_uri);
-	socket.send_event = send_event;
-	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;
-	return socket;
+	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 send_event(event_title, data) {
@@ -29,9 +31,14 @@ function send_event(event_title, data) {
 		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 onopen(event) {
+	log_debug_message('debug', 'Websocket connected to server.');
+}
+
 function onmessage(event) {
 	let data;
 	let event_title;
@@ -64,15 +71,17 @@ function onmessage(event) {
 		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);
-	socket = init_websocket();
+	init_websocket();
 }
 
 function sleep(ms) {
@@ -80,6 +89,7 @@ function sleep(ms) {
 }
 
 function onerror(event) {
+	log_debug_message('error', 'Websocket encountered an error.')
 	console.log("Websocket error!")
 	console.log(event);
 }
@@ -152,3 +162,18 @@ function select_track(select) {
 }
 
 /* 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);
+}

templates/index.html

@@ -44,6 +44,11 @@
 					</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>