Merge pull request #1471 from thelounge/xpaw/client-reconnection

Automatic client reconnection

client/css/style.css

@@ -1490,6 +1490,15 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 }
 
 #connection-error {
+	font-size: 12px;
+	line-height: 36px;
+	font-weight: bold;
+	letter-spacing: 1px;
+	word-spacing: 3px;
+	text-transform: uppercase;
+	background: #e74c3c;
+	color: #fff;
+	text-align: center;
 	display: none;
 }
 

client/index.html

@@ -63,7 +63,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>
+					<div id="connection-error"></div>
 					<form id="form" method="post" action="">
 						<div class="input">
 							<span id="nick">

client/js/lounge.js

@@ -588,9 +588,6 @@ $(function() {
 	}
 	setTimeout(updateDateMarkers, msUntilNextDay());
 
-	// Only start opening socket.io connection after all events have been registered
-	socket.open();
-
 	window.addEventListener("popstate", (e) => {
 		const {state} = e;
 		if (!state) {
@@ -604,4 +601,7 @@ $(function() {
 			});
 		}
 	});
+
+	// Only start opening socket.io connection after all events have been registered
+	socket.open();
 });

client/js/render.js

@@ -8,6 +8,7 @@ const utils = require("./utils");
 const sorting = require("./sorting");
 const constants = require("./constants");
 const condensed = require("./condensed");
+const helpers_parse = require("./libs/handlebars/parse");
 
 const chat = $("#chat");
 const sidebar = $("#sidebar");
@@ -27,14 +28,18 @@ module.exports = {
 	renderNetworks,
 };
 
-function buildChannelMessages(chanId, chanType, messages) {
+function buildChannelMessages(container, chanId, chanType, messages) {
 	return messages.reduce((docFragment, message) => {
 		appendMessage(docFragment, chanId, chanType, message);
 		return docFragment;
-	}, $(document.createDocumentFragment()));
+	}, container);
 }
 
 function appendMessage(container, chanId, chanType, msg) {
+	if (utils.lastMessageId < msg.id) {
+		utils.lastMessageId = msg.id;
+	}
+
 	let lastChild = container.children(".msg, .date-marker-container").last();
 	const renderedMessage = buildChatMessage(msg);
 
@@ -117,7 +122,7 @@ function renderChannel(data) {
 }
 
 function renderChannelMessages(data) {
-	const documentFragment = buildChannelMessages(data.id, data.type, data.messages);
+	const documentFragment = buildChannelMessages($(document.createDocumentFragment()), data.id, data.type, data.messages);
 	const channel = chat.find("#chan-" + data.id + " .messages").append(documentFragment);
 
 	const template = $(templates.unread_marker());
@@ -164,7 +169,7 @@ function renderChannelUsers(data) {
 	}
 }
 
-function renderNetworks(data) {
+function renderNetworks(data, singleNetwork) {
 	sidebar.find(".empty").hide();
 	sidebar.find(".networks").append(
 		templates.network({
@@ -172,15 +177,51 @@ function renderNetworks(data) {
 		})
 	);
 
+	let newChannels;
 	const channels = $.map(data.networks, function(n) {
 		return n.channels;
 	});
+
+	if (!singleNetwork && utils.lastMessageId > -1) {
+		newChannels = [];
+
+		channels.forEach((channel) => {
+			const chan = $("#chan-" + channel.id);
+
+			if (chan.length > 0) {
+				if (chan.data("type") === "channel") {
+					chan
+						.data("needsNamesRefresh", true)
+						.find(".header .topic")
+						.html(helpers_parse(channel.topic))
+						.attr("title", channel.topic);
+				}
+
+				if (channel.messages.length > 0) {
+					const container = chan.find(".messages");
+					buildChannelMessages(container, channel.id, channel.type, channel.messages);
+
+					if (container.find(".msg").length >= 100) {
+						container.find(".show-more").addClass("show");
+					}
+
+					container.trigger("keepToBottom");
+				}
+			} else {
+				newChannels.push(channel);
+			}
+		});
+	} else {
+		newChannels = channels;
+	}
+
 	chat.append(
 		templates.chat({
 			channels: channels
 		})
 	);
-	channels.forEach((channel) => {
+
+	newChannels.forEach((channel) => {
 		renderChannel(channel);
 
 		if (channel.type === "channel") {

client/js/socket-events/auth.js

@@ -3,8 +3,20 @@
 const $ = require("jquery");
 const socket = require("../socket");
 const storage = require("../localStorage");
+const utils = require("../utils");
 
 socket.on("auth", function(data) {
+	// If we reconnected and serverHash differs, that means the server restarted
+	// And we will reload the page to grab the latest version
+	if (utils.serverHash > -1 && data.serverHash > -1 && data.serverHash !== utils.serverHash) {
+		socket.disconnect();
+		$("#connection-error").text("Server restarted, reloading…");
+		location.reload(true);
+		return;
+	}
+
+	utils.serverHash = data.serverHash;
+
 	const login = $("#sign-in");
 	let token;
 	const user = storage.get("user");
@@ -12,6 +24,13 @@ socket.on("auth", function(data) {
 	login.find(".btn").prop("disabled", false);
 
 	if (!data.success) {
+		if (login.length === 0) {
+			socket.disconnect();
+			$("#connection-error").text("Authentication failed, reloading…");
+			location.reload();
+			return;
+		}
+
 		storage.remove("token");
 
 		const error = login.find(".error");
@@ -20,9 +39,15 @@ socket.on("auth", function(data) {
 		});
 	} else if (user) {
 		token = storage.get("token");
+
 		if (token) {
-			$("#loading-page-message").text("Authorizing…");
+			$("#loading-page-message, #connection-error").text("Authorizing…");
-			socket.emit("auth", {user: user, token: token});
+
+			socket.emit("auth", {
+				user: user,
+				token: token,
+				lastMessage: utils.lastMessageId,
+			});
 		}
 	}
 

client/js/socket-events/init.js

@@ -1,16 +1,28 @@
 "use strict";
 
 const $ = require("jquery");
+const escape = require("css.escape");
 const socket = require("../socket");
 const render = require("../render");
 const webpush = require("../webpush");
 const sidebar = $("#sidebar");
 const storage = require("../localStorage");
+const utils = require("../utils");
 
 socket.on("init", function(data) {
-	$("#loading-page-message").text("Rendering…");
+	$("#loading-page-message, #connection-error").text("Rendering…");
+
+	const lastMessageId = utils.lastMessageId;
+	let previousActive = 0;
+
+	if (lastMessageId > -1) {
+		previousActive = sidebar.find(".active").data("id");
+		sidebar.find(".networks").empty();
+	}
 
 	if (data.networks.length === 0) {
+		sidebar.find(".empty").show();
+
 		$("#footer").find(".connect").trigger("click", {
 			pushState: false,
 		});
@@ -18,6 +30,11 @@ socket.on("init", function(data) {
 		render.renderNetworks(data);
 	}
 
+	if (lastMessageId > -1) {
+		$("#connection-error").removeClass("shown");
+		$(".show-more-button, #input").prop("disabled", false);
+		$("#submit").show();
+	} else {
 		if (data.token) {
 			storage.set("token", data.token);
 		}
@@ -27,22 +44,40 @@ socket.on("init", function(data) {
 		$("body").removeClass("signed-out");
 		$("#loading").remove();
 		$("#sign-in").remove();
+	}
 
-	const id = data.active;
+	openCorrectChannel(previousActive, data.active);
-	const target = sidebar.find("[data-id='" + id + "']").trigger("click", {
+});
+
+function openCorrectChannel(clientActive, serverActive) {
+	let target;
+
+	// Open last active channel
+	if (clientActive > 0) {
+		target = sidebar.find("[data-id='" + clientActive + "']");
+	}
+
+	// Open window provided in location.hash
+	if (!target && window.location.hash) {
+		target = $("#footer, #sidebar").find("[data-target='" + escape(window.location.hash) + "']");
+	}
+
+	// Open last active channel according to the server
+	if (!target) {
+		target = sidebar.find("[data-id='" + serverActive + "']");
+	}
+
+	// If target channel is found, open it
+	if (target) {
+		target.trigger("click", {
 			replaceHistory: true
 		});
-	const dataTarget = document.querySelector("[data-target='" + window.location.hash + "']");
+
-	if (window.location.hash && dataTarget) {
+		return;
-		dataTarget.click();
+	}
-	} else if (target.length === 0) {
+
-		const first = sidebar.find(".chan")
+	// Open the connect window
-			.eq(0)
+	$("#footer .connect").trigger("click", {
-			.trigger("click");
+		pushState: false
-		if (first.length === 0) {
-			$("#footer").find(".connect").trigger("click", {
-				pushState: false,
 	});
 }
-	}
-});

client/js/socket-events/more.js

@@ -33,7 +33,7 @@ socket.on("more", function(data) {
 	}
 
 	// Add the older messages
-	const documentFragment = render.buildChannelMessages(data.chan, type, data.messages);
+	const documentFragment = render.buildChannelMessages($(document.createDocumentFragment()), data.chan, type, data.messages);
 	chan.prepend(documentFragment);
 
 	// Move unread marker to correct spot if needed

client/js/socket-events/network.js

@@ -6,7 +6,7 @@ const render = require("../render");
 const sidebar = $("#sidebar");
 
 socket.on("network", function(data) {
-	render.renderNetworks(data);
+	render.renderNetworks(data, true);
 
 	sidebar.find(".chan")
 		.last()
@@ -20,4 +20,3 @@ socket.on("network", function(data) {
 socket.on("network_changed", function(data) {
 	sidebar.find("#network-" + data.network).data("options", data.serverOptions);
 });
-

client/js/socket.js

@@ -2,52 +2,54 @@
 
 const $ = require("jquery");
 const io = require("socket.io-client");
+const utils = require("./utils");
 const path = window.location.pathname + "socket.io/";
+const status = $("#loading-page-message, #connection-error");
 
 const socket = io({
 	transports: $(document.body).data("transports"),
 	path: path,
 	autoConnect: false,
-	reconnection: false
+	reconnection: !$(document.body).hasClass("public")
 });
 
-[
+socket.on("disconnect", handleDisconnect);
-	"connect_error",
+socket.on("connect_error", handleDisconnect);
-	"connect_failed",
+socket.on("error", handleDisconnect);
-	"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
+socket.on("reconnecting", function(attempt) {
-		// cancel `inputhistory`, which overrides hitting Enter. `on` is then
+	status.text(`Reconnecting… (attempt ${attempt})`);
-		// 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();
-	});
 });
 
 socket.on("connecting", function() {
-	$("#loading-page-message").text("Connecting…");
+	status.text("Connecting…");
 });
 
 socket.on("connect", function() {
-	$("#loading-page-message").text("Finalizing connection…");
+	// Clear send buffer when reconnecting, socket.io would emit these
+	// immediately upon connection and it will have no effect, so we ensure
+	// nothing is sent to the server that might have happened.
+	socket.sendBuffer = [];
+
+	status.text("Finalizing connection…");
 });
 
 socket.on("authorized", function() {
-	$("#loading-page-message").text("Authorized, loading messages…");
+	status.text("Loading messages…");
 });
 
+function handleDisconnect(data) {
+	const message = data.message || data;
+
+	status.text(`Waiting to reconnect… (${message})`).addClass("shown");
+	$(".show-more-button, #input").prop("disabled", true);
+	$("#submit").hide();
+
+	// If the server shuts down, socket.io skips reconnection
+	// and we have to manually call connect to start the process
+	if (socket.io.skipReconnect) {
+		utils.requestIdleCallback(() => socket.connect(), 2000);
+	}
+}
+
 module.exports = socket;

client/js/utils.js

@@ -3,7 +3,12 @@
 const $ = require("jquery");
 const input = $("#input");
 
+var serverHash = -1;
+var lastMessageId = -1;
+
 module.exports = {
+	serverHash,
+	lastMessageId,
 	confirmExit,
 	forceFocus,
 	move,

client/themes/crypto.css

@@ -65,12 +65,8 @@ a:hover,
 	background: #00ff0e;
 }
 
-.btn-reconnect {
+#connection-error {
 	background: #f00;
-	color: #fff;
-	border: 0;
-	border-radius: 0;
-	margin: 0;
 }
 
 #settings .opt {

client/themes/example.css

@@ -46,14 +46,6 @@ 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

@@ -205,14 +205,6 @@ body {
 	color: #99a2b4;
 }
 
-.btn-reconnect {
-	background: #e74c3c;
-	color: #fff;
-	border: 0;
-	border-radius: 0;
-	margin: 0;
-}
-
 /* Form elements */
 
 #chat-container ::-moz-placeholder {

client/themes/zenburn.css

@@ -232,14 +232,6 @@ body {
 	color: #d2d39b;
 }
 
-.btn-reconnect {
-	background: #e74c3c;
-	color: #fff;
-	border: 0;
-	border-radius: 0;
-	margin: 0;
-}
-
 /* Form elements */
 
 #chat-container ::-moz-placeholder {

src/server.js

@@ -23,6 +23,9 @@ const authPlugins = [
 	require("./plugins/auth/local"),
 ];
 
+// A random number that will force clients to reload the page if it differs
+const serverHash = Math.floor(Date.now() * Math.random());
+
 var manager = null;
 
 module.exports = function() {
@@ -135,7 +138,10 @@ module.exports = function() {
 			if (config.public) {
 				performAuthentication.call(socket, {});
 			} else {
-				socket.emit("auth", {success: true});
+				socket.emit("auth", {
+					serverHash: serverHash,
+					success: true,
+				});
 				socket.on("auth", performAuthentication);
 			}
 		});
@@ -225,7 +231,7 @@ function index(req, res, next) {
 	res.render("index", data);
 }
 
-function initializeClient(socket, client, token) {
+function initializeClient(socket, client, token, lastMessage) {
 	socket.emit("authorized");
 
 	socket.on("disconnect", function() {
@@ -389,11 +395,24 @@ function initializeClient(socket, client, token) {
 	socket.join(client.id);
 
 	const sendInitEvent = (tokenToSend) => {
+		let networks = client.networks;
+
+		if (lastMessage > -1) {
+			// We need a deep cloned object because we are going to remove unneeded messages
+			networks = _.cloneDeep(networks);
+
+			networks.forEach((network) => {
+				network.channels.forEach((channel) => {
+					channel.messages = channel.messages.filter((m) => m.id > lastMessage);
+				});
+			});
+		}
+
 		socket.emit("init", {
 			applicationServerKey: manager.webPush.vapidKeys.publicKey,
 			pushSubscription: client.config.sessions[token],
 			active: client.lastActiveChannel,
-			networks: client.networks,
+			networks: networks,
 			token: tokenToSend
 		});
 	};
@@ -423,7 +442,7 @@ function performAuthentication(data) {
 	const socket = this;
 	let client;
 
-	const finalInit = () => initializeClient(socket, client, data.token || null);
+	const finalInit = () => initializeClient(socket, client, data.token || null, data.lastMessage || -1);
 
 	const initClient = () => {
 		client.ip = getClientIp(socket.request);