Stop refreshing the page on every socket.io error

This commit is contained in:
Pavel Djundik 2016-12-10 11:33:36 +02:00 committed by Jérémie Astori
parent 5213853524
commit a8926e2ced
3 changed files with 52 additions and 14 deletions

View File

@ -1302,6 +1302,7 @@ button {
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: 5px; padding: 5px;
position: relative;
} }
#windows #form .input { #windows #form .input {
@ -1317,6 +1318,27 @@ button {
align-items: flex-end; align-items: flex-end;
} }
#connection-error {
display: none;
align-items: center;
justify-content: center;
line-height: 1;
background: #f44336;
color: #fff;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 5px;
z-index: 30;
cursor: pointer;
}
#connection-error.shown {
display: flex;
}
[contenteditable]:focus { [contenteditable]:focus {
outline: none; outline: none;
} }

View File

@ -58,6 +58,7 @@
<div id="chat-container" class="window"> <div id="chat-container" class="window">
<div id="chat"></div> <div id="chat"></div>
<form id="form" method="post" action=""> <form id="form" method="post" action="">
<div id="connection-error"><span>Client connection lost. Click to reconnect.</span></div>
<div class="input"> <div class="input">
<span id="nick"> <span id="nick">
<span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements <span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements

View File

@ -1,10 +1,12 @@
"use strict"; "use strict";
$(function() { $(function() {
$("#loading-page-message").text("Connecting…");
var path = window.location.pathname + "socket.io/"; var path = window.location.pathname + "socket.io/";
var socket = io({path: path}); var socket = io({
path: path,
autoConnect: false,
reconnection: false
});
var commands = [ var commands = [
"/close", "/close",
"/connect", "/connect",
@ -74,14 +76,29 @@ $(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();
});
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() { socket.on("authorized", function() {
@ -1343,11 +1360,6 @@ $(function() {
} }
} }
function refresh() {
window.onbeforeunload = null;
location.reload();
}
function sortable() { function sortable() {
sidebar.find(".networks").sortable({ sidebar.find(".networks").sortable({
axis: "y", axis: "y",
@ -1491,4 +1503,7 @@ $(function() {
} }
} }
); );
// Only start opening socket.io connection after all events have been registered
socket.open();
}); });