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

Make connection-error a vue state

Browse Source
This commit is contained in:
Pavel Djundik 2018-08-31 13:43:21 +03:00
parent e2c65fd0de
commit 26dc37033c
6 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/Chat.vue
View File

@ -67,7 +67,9 @@
</div> </div>
</div> </div>
</div> </div>
<div id="connection-error" /> <div
v-if="this.$root.connectionError"
id="connection-error">{{ this.$root.connectionError }}</div>
<ChatInput <ChatInput
:network="network" :network="network"
:channel="channel" /> :channel="channel" />

5
client/css/style.css
View File

@ -1981,11 +1981,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
background: #e74c3c; background: #e74c3c;
color: #fff; color: #fff;
text-align: center; text-align: center;
display: none;
}
#connection-error.shown {
display: block;
cursor: pointer; cursor: pointer;
} }

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

@ -12,7 +12,8 @@ socket.on("auth", function(data) {
// And we will reload the page to grab the latest version // And we will reload the page to grab the latest version
if (utils.serverHash > -1 && data.serverHash > -1 && data.serverHash !== utils.serverHash) { if (utils.serverHash > -1 && data.serverHash > -1 && data.serverHash !== utils.serverHash) {
socket.disconnect(); socket.disconnect();
$("#connection-error").text("Server restarted, reloading…"); vueApp.connected = false;
vueApp.connectionError = "Server restarted, reloading…";
location.reload(true); location.reload(true);
return; return;
} }
@ -52,7 +53,8 @@ socket.on("auth", function(data) {
if (!data.success) { if (!data.success) {
if (login.length === 0) { if (login.length === 0) {
socket.disconnect(); socket.disconnect();
$("#connection-error").text("Authentication failed, reloading…"); vueApp.connected = false;
vueApp.connectionError = "Authentication failed, reloading…";
location.reload(); location.reload();
return; return;
} }
@ -67,7 +69,8 @@ socket.on("auth", function(data) {
token = storage.get("token"); token = storage.get("token");
if (token) { if (token) {
$("#loading-page-message, #connection-error").text("Authorizing…"); vueApp.connectionError = "Authorizing…";
$("#loading-page-message").text(vueApp.connectionError);
let lastMessage = -1; let lastMessage = -1;

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

@ -11,7 +11,8 @@ const utils = require("../utils");
const {vueApp, initChannel} = require("../vue"); const {vueApp, initChannel} = require("../vue");
socket.on("init", function(data) { socket.on("init", function(data) {
$("#loading-page-message, #connection-error").text("Rendering…"); vueApp.connectionError = "Rendering…";
$("#loading-page-message").text(vueApp.connectionError);
const previousActive = vueApp.activeChannel && vueApp.activeChannel.channel.id; const previousActive = vueApp.activeChannel && vueApp.activeChannel.channel.id;
@ -55,8 +56,7 @@ socket.on("init", function(data) {
vueApp.networks = data.networks; vueApp.networks = data.networks;
vueApp.connected = true; vueApp.connected = true;
vueApp.connectionError = false;
$("#connection-error").removeClass("shown");
if (!vueApp.initialized) { if (!vueApp.initialized) {
vueApp.initialized = true; vueApp.initialized = true;

16
client/js/socket.js
View File

@ -20,11 +20,13 @@ socket.on("connect_error", handleDisconnect);
socket.on("error", handleDisconnect); socket.on("error", handleDisconnect);
socket.on("reconnecting", function(attempt) { socket.on("reconnecting", function(attempt) {
$("#loading-page-message, #connection-error").text(`Reconnecting… (attempt ${attempt})`); vueApp.connectionError = `Reconnecting… (attempt ${attempt})`;
$("#loading-page-message").text(vueApp.connectionError);
}); });
socket.on("connecting", function() { socket.on("connecting", function() {
$("#loading-page-message, #connection-error").text("Connecting…"); vueApp.connectionError = "Connecting…";
$("#loading-page-message").text(vueApp.connectionError);
}); });
socket.on("connect", function() { socket.on("connect", function() {
@ -33,19 +35,21 @@ socket.on("connect", function() {
// nothing is sent to the server that might have happened. // nothing is sent to the server that might have happened.
socket.sendBuffer = []; socket.sendBuffer = [];
$("#loading-page-message, #connection-error").text("Finalizing connection…"); vueApp.connectionError = "Finalizing connection…";
$("#loading-page-message").text(vueApp.connectionError);
}); });
socket.on("authorized", function() { socket.on("authorized", function() {
$("#loading-page-message, #connection-error").text("Loading messages…"); vueApp.connectionError = "Loading messages…";
$("#loading-page-message").text(vueApp.connectionError);
}); });
function handleDisconnect(data) { function handleDisconnect(data) {
const message = data.message || data; const message = data.message || data;
vueApp.connected = false; vueApp.connected = false;
vueApp.connectionError = `Waiting to reconnect… (${message})`;
$("#loading-page-message, #connection-error").text(`Waiting to reconnect… (${message})`).addClass("shown"); $("#loading-page-message").text(vueApp.connectionError);
// If the server shuts down, socket.io skips reconnection // If the server shuts down, socket.io skips reconnection
// and we have to manually call connect to start the process // and we have to manually call connect to start the process

1
client/js/vue.js
View File

@ -23,6 +23,7 @@ const vueApp = new Vue({
data: { data: {
initialized: false, initialized: false,
connected: false, connected: false,
connectionError: false,
appName: document.title, appName: document.title,
activeChannel: null, activeChannel: null,
networks: [], networks: [],