supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/css/style.css
View File

@ -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;
}

2
client/index.html
View File

@ -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">

6
client/js/lounge.js
View File

@ -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();
});

51
client/js/render.js
View File

@ -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") {

29
client/js/socket-events/auth.js
View File

@ -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…");
socket.emit("auth", {user: user, token: token});
$("#loading-page-message, #connection-error").text("Authorizing…");
socket.emit("auth", {
user: user,
token: token,
lastMessage: utils.lastMessageId,
});
}
}

65
client/js/socket-events/init.js
View File

@ -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;
const target = sidebar.find("[data-id='" + id + "']").trigger("click", {
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
});
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,
return;
}
// Open the connect window
$("#footer .connect").trigger("click", {
pushState: false
});
}
}
});

2
client/js/socket-events/more.js
View File

@ -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

3
client/js/socket-events/network.js
View File

@ -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);
});

58
client/js/socket.js
View File

@ -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")
});
[
"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();
});
socket.on("disconnect", handleDisconnect);
socket.on("connect_error", handleDisconnect);
socket.on("error", handleDisconnect);
// 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();
});
socket.on("reconnecting", function(attempt) {
status.text(`Reconnecting… (attempt ${attempt})`);
});
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;

5
client/js/utils.js
View File

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

6
client/themes/crypto.css
View File

@ -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 {

8
client/themes/example.css
View File

@ -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;

8
client/themes/morning.css
View File

@ -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 {

8
client/themes/zenburn.css
View File

@ -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 {

27
src/server.js
View File

@ -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);