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

Automatic client reconnection
This commit is contained in:
Jérémie Astori 2017-09-20 00:05:37 -04:00 committed by GitHub
commit 637949ea55
15 changed files with 208 additions and 101 deletions

View File

@ -1490,6 +1490,15 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
} }
#connection-error { #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; display: none;
} }

View File

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

View File

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

View File

@ -8,6 +8,7 @@ const utils = require("./utils");
const sorting = require("./sorting"); const sorting = require("./sorting");
const constants = require("./constants"); const constants = require("./constants");
const condensed = require("./condensed"); const condensed = require("./condensed");
const helpers_parse = require("./libs/handlebars/parse");
const chat = $("#chat"); const chat = $("#chat");
const sidebar = $("#sidebar"); const sidebar = $("#sidebar");
@ -27,14 +28,18 @@ module.exports = {
renderNetworks, renderNetworks,
}; };
function buildChannelMessages(chanId, chanType, messages) { function buildChannelMessages(container, chanId, chanType, messages) {
return messages.reduce((docFragment, message) => { return messages.reduce((docFragment, message) => {
appendMessage(docFragment, chanId, chanType, message); appendMessage(docFragment, chanId, chanType, message);
return docFragment; return docFragment;
}, $(document.createDocumentFragment())); }, container);
} }
function appendMessage(container, chanId, chanType, msg) { function appendMessage(container, chanId, chanType, msg) {
if (utils.lastMessageId < msg.id) {
utils.lastMessageId = msg.id;
}
let lastChild = container.children(".msg, .date-marker-container").last(); let lastChild = container.children(".msg, .date-marker-container").last();
const renderedMessage = buildChatMessage(msg); const renderedMessage = buildChatMessage(msg);
@ -117,7 +122,7 @@ function renderChannel(data) {
} }
function renderChannelMessages(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 channel = chat.find("#chan-" + data.id + " .messages").append(documentFragment);
const template = $(templates.unread_marker()); 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(".empty").hide();
sidebar.find(".networks").append( sidebar.find(".networks").append(
templates.network({ templates.network({
@ -172,15 +177,51 @@ function renderNetworks(data) {
}) })
); );
let newChannels;
const channels = $.map(data.networks, function(n) { const channels = $.map(data.networks, function(n) {
return n.channels; 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( chat.append(
templates.chat({ templates.chat({
channels: channels channels: channels
}) })
); );
channels.forEach((channel) => {
newChannels.forEach((channel) => {
renderChannel(channel); renderChannel(channel);
if (channel.type === "channel") { if (channel.type === "channel") {

View File

@ -3,8 +3,20 @@
const $ = require("jquery"); const $ = require("jquery");
const socket = require("../socket"); const socket = require("../socket");
const storage = require("../localStorage"); const storage = require("../localStorage");
const utils = require("../utils");
socket.on("auth", function(data) { 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"); const login = $("#sign-in");
let token; let token;
const user = storage.get("user"); const user = storage.get("user");
@ -12,6 +24,13 @@ socket.on("auth", function(data) {
login.find(".btn").prop("disabled", false); login.find(".btn").prop("disabled", false);
if (!data.success) { if (!data.success) {
if (login.length === 0) {
socket.disconnect();
$("#connection-error").text("Authentication failed, reloading…");
location.reload();
return;
}
storage.remove("token"); storage.remove("token");
const error = login.find(".error"); const error = login.find(".error");
@ -20,9 +39,15 @@ socket.on("auth", function(data) {
}); });
} else if (user) { } else if (user) {
token = storage.get("token"); token = storage.get("token");
if (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,
});
} }
} }

View File

@ -1,16 +1,28 @@
"use strict"; "use strict";
const $ = require("jquery"); const $ = require("jquery");
const escape = require("css.escape");
const socket = require("../socket"); const socket = require("../socket");
const render = require("../render"); const render = require("../render");
const webpush = require("../webpush"); const webpush = require("../webpush");
const sidebar = $("#sidebar"); const sidebar = $("#sidebar");
const storage = require("../localStorage"); const storage = require("../localStorage");
const utils = require("../utils");
socket.on("init", function(data) { 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) { if (data.networks.length === 0) {
sidebar.find(".empty").show();
$("#footer").find(".connect").trigger("click", { $("#footer").find(".connect").trigger("click", {
pushState: false, pushState: false,
}); });
@ -18,31 +30,54 @@ socket.on("init", function(data) {
render.renderNetworks(data); render.renderNetworks(data);
} }
if (data.token) { if (lastMessageId > -1) {
storage.set("token", data.token); $("#connection-error").removeClass("shown");
} $(".show-more-button, #input").prop("disabled", false);
$("#submit").show();
webpush.configurePushNotifications(data.pushSubscription, data.applicationServerKey); } else {
if (data.token) {
$("body").removeClass("signed-out"); storage.set("token", data.token);
$("#loading").remove();
$("#sign-in").remove();
const id = data.active;
const target = sidebar.find("[data-id='" + id + "']").trigger("click", {
replaceHistory: true
});
const dataTarget = document.querySelector("[data-target='" + window.location.hash + "']");
if (window.location.hash && dataTarget) {
dataTarget.click();
} else if (target.length === 0) {
const first = sidebar.find(".chan")
.eq(0)
.trigger("click");
if (first.length === 0) {
$("#footer").find(".connect").trigger("click", {
pushState: false,
});
} }
webpush.configurePushNotifications(data.pushSubscription, data.applicationServerKey);
$("body").removeClass("signed-out");
$("#loading").remove();
$("#sign-in").remove();
} }
openCorrectChannel(previousActive, data.active);
}); });
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
});
return;
}
// Open the connect window
$("#footer .connect").trigger("click", {
pushState: false
});
}

View File

@ -33,7 +33,7 @@ socket.on("more", function(data) {
} }
// Add the older messages // 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); chan.prepend(documentFragment);
// Move unread marker to correct spot if needed // Move unread marker to correct spot if needed

View File

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

View File

@ -2,52 +2,54 @@
const $ = require("jquery"); const $ = require("jquery");
const io = require("socket.io-client"); const io = require("socket.io-client");
const utils = require("./utils");
const path = window.location.pathname + "socket.io/"; const path = window.location.pathname + "socket.io/";
const status = $("#loading-page-message, #connection-error");
const socket = io({ const socket = io({
transports: $(document.body).data("transports"), transports: $(document.body).data("transports"),
path: path, path: path,
autoConnect: false, 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() { socket.on("connecting", function() {
$("#loading-page-message").text("Connecting…"); status.text("Connecting…");
}); });
socket.on("connect", function() { 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() { 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; module.exports = socket;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -23,6 +23,9 @@ const authPlugins = [
require("./plugins/auth/local"), 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; var manager = null;
module.exports = function() { module.exports = function() {
@ -135,7 +138,10 @@ module.exports = function() {
if (config.public) { if (config.public) {
performAuthentication.call(socket, {}); performAuthentication.call(socket, {});
} else { } else {
socket.emit("auth", {success: true}); socket.emit("auth", {
serverHash: serverHash,
success: true,
});
socket.on("auth", performAuthentication); socket.on("auth", performAuthentication);
} }
}); });
@ -225,7 +231,7 @@ function index(req, res, next) {
res.render("index", data); res.render("index", data);
} }
function initializeClient(socket, client, token) { function initializeClient(socket, client, token, lastMessage) {
socket.emit("authorized"); socket.emit("authorized");
socket.on("disconnect", function() { socket.on("disconnect", function() {
@ -389,11 +395,24 @@ function initializeClient(socket, client, token) {
socket.join(client.id); socket.join(client.id);
const sendInitEvent = (tokenToSend) => { 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", { socket.emit("init", {
applicationServerKey: manager.webPush.vapidKeys.publicKey, applicationServerKey: manager.webPush.vapidKeys.publicKey,
pushSubscription: client.config.sessions[token], pushSubscription: client.config.sessions[token],
active: client.lastActiveChannel, active: client.lastActiveChannel,
networks: client.networks, networks: networks,
token: tokenToSend token: tokenToSend
}); });
}; };
@ -423,7 +442,7 @@ function performAuthentication(data) {
const socket = this; const socket = this;
let client; let client;
const finalInit = () => initializeClient(socket, client, data.token || null); const finalInit = () => initializeClient(socket, client, data.token || null, data.lastMessage || -1);
const initClient = () => { const initClient = () => {
client.ip = getClientIp(socket.request); client.ip = getClientIp(socket.request);