Stop refreshing the page on every socket.io error

client/css/style.css

@@ -1302,6 +1302,7 @@ button {
 	-webkit-flex: 0 0 auto;
 	flex: 0 0 auto;
 	padding: 5px;
+	position: relative;
 }
 
 #windows #form .input {
@@ -1317,6 +1318,27 @@ button {
 	align-items: flex-end;
 }
 
+#connection-error {
+	display: none;
+	align-items: center;
+	justify-content: center;
+	line-height: 1;
+	background: #f44336;
+	color: #fff;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	padding: 5px;
+	z-index: 30;
+	cursor: pointer;
+}
+
+#connection-error.shown {
+	display: flex;
+}
+
 [contenteditable]:focus {
 	outline: none;
 }

client/index.html

@@ -58,6 +58,7 @@
 				<div id="chat-container" class="window">
 					<div id="chat"></div>
 					<form id="form" method="post" action="">
+						<div id="connection-error"><span>Client connection lost. Click to reconnect.</span></div>
 						<div class="input">
 							<span id="nick">
 								<span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements

client/js/lounge.js

@@ -1,10 +1,12 @@
 "use strict";
 
 $(function() {
-	$("#loading-page-message").text("Connecting…");
-
 	var path = window.location.pathname + "socket.io/";
-	var socket = io({path: path});
+	var socket = io({
+		path: path,
+		autoConnect: false,
+		reconnection: false
+	});
 	var commands = [
 		"/close",
 		"/connect",
@@ -74,14 +76,29 @@ $(function() {
 		}
 	);
 
-	socket.on("error", function(e) {
-		console.log(e);
+	[
+		"connect_error",
+		"connect_failed",
+		"disconnect",
+		"error",
+	].forEach(function(e) {
+		socket.on(e, function(data) {
+			$("#loading-page-message").text("Connection failed: " + data);
+			$("#connection-error").addClass("shown").one("click", function() {
+				window.onbeforeunload = null;
+				window.location.reload();
+			});
+
+			console.error(data);
+		});
 	});
 
-	$.each(["connect_error", "disconnect"], function(i, e) {
-		socket.on(e, function() {
-			refresh();
-		});
+	socket.on("connecting", function() {
+		$("#loading-page-message").text("Connecting…");
+	});
+
+	socket.on("connect", function() {
+		$("#loading-page-message").text("Finalizing connection…");
 	});
 
 	socket.on("authorized", function() {
@@ -1343,11 +1360,6 @@ $(function() {
 		}
 	}
 
-	function refresh() {
-		window.onbeforeunload = null;
-		location.reload();
-	}
-
 	function sortable() {
 		sidebar.find(".networks").sortable({
 			axis: "y",
@@ -1491,4 +1503,7 @@ $(function() {
 			}
 		}
 	);
+
+	// Only start opening socket.io connection after all events have been registered
+	socket.open();
 });