Merge pull request #784 from thelounge/xpaw/stop-page-refresh

Stop refreshing the page on every socket.io error

client/css/style.css

@@ -1317,6 +1317,14 @@ button {
 	align-items: flex-end;
 }
 
+#connection-error {
+	display: none;
+}
+
+#connection-error.shown {
+	display: block;
+}
+
 [contenteditable]:focus {
 	outline: none;
 }

client/index.html

@@ -57,6 +57,7 @@
 				</div>
 				<div id="chat-container" class="window">
 					<div id="chat"></div>
+					<button id="connection-error" class="btn btn-reconnect">Client connection lost &mdash; Click here to reconnect</button>
 					<form id="form" method="post" action="">
 						<div class="input">
 							<span id="nick">

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,41 @@ $(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();
+			});
+
+			// Disables sending a message by pressing Enter. `off` is necessary to
+			// cancel `inputhistory`, which overrides hitting Enter. `on` is then
+			// necessary to avoid creating new lines when hitting Enter without Shift.
+			// This is fairly hacky but this solution is not permanent.
+			$("#input").off("keydown").on("keydown", function(event) {
+				if (event.which === 13 && !event.shiftKey) {
+					event.preventDefault();
+				}
+			});
+			// Hides the "Send Message" button
+			$("#submit").remove();
+
+			console.error(data);
+		});
 	});
 
-	$.each(["connect_error", "disconnect"], function(i, e) {
+	socket.on("connecting", function() {
-		socket.on(e, function() {
+		$("#loading-page-message").text("Connecting…");
-			refresh();
+	});
-		});
+
+	socket.on("connect", function() {
+		$("#loading-page-message").text("Finalizing connection…");
 	});
 
 	socket.on("authorized", function() {
@@ -1343,11 +1372,6 @@ $(function() {
 		}
 	}
 
-	function refresh() {
-		window.onbeforeunload = null;
-		location.reload();
-	}
-
 	function sortable() {
 		sidebar.find(".networks").sortable({
 			axis: "y",
@@ -1491,4 +1515,7 @@ $(function() {
 			}
 		}
 	);
+
+	// Only start opening socket.io connection after all events have been registered
+	socket.open();
 });

client/themes/crypto.css

@@ -58,6 +58,14 @@ a:hover,
 	background: #00ff0e;
 }
 
+.btn-reconnect {
+	background: #f00;
+	color: #fff;
+	border: 0;
+	border-radius: 0;
+	margin: 0;
+}
+
 #settings .opt {
 	line-height: 20px;
 	font-size: 12px;

client/themes/example.css

@@ -46,6 +46,14 @@ body {
 	border-radius: 2px;
 }
 
+.btn-reconnect {
+	background: #e74c3c;
+	color: #fff;
+	border: 0;
+	border-radius: 0;
+	margin: 0;
+}
+
 @media (max-width: 768px) {
 	#sidebar {
 		left: -220px;

client/themes/morning.css

@@ -227,3 +227,11 @@ body {
 #chat .toggle-content .body {
 	color: #99a2b4;
 }
+
+.btn-reconnect {
+	background: #e74c3c;
+	color: #fff;
+	border: 0;
+	border-radius: 0;
+	margin: 0;
+}

client/themes/zenburn.css

@@ -253,3 +253,11 @@ body {
 #chat .toggle-content .body {
 	color: #d2d39b;
 }
+
+.btn-reconnect {
+	background: #e74c3c;
+	color: #fff;
+	border: 0;
+	border-radius: 0;
+	margin: 0;
+}