diff --git a/client/js/socket-events/auth.js b/client/js/socket-events/auth.js index 296a8f97..632d828b 100644 --- a/client/js/socket-events/auth.js +++ b/client/js/socket-events/auth.js @@ -9,7 +9,7 @@ let lastServerHash = null; socket.on("auth:success", function() { store.commit("currentUserVisibleError", "Loading messages…"); - $("#loading-page-message").text(store.state.currentUserVisibleError); + updateLoadingMessage(); }); socket.on("auth:failed", function() { @@ -48,7 +48,7 @@ socket.on("auth:start", function(serverHash) { // If we have user and token stored, perform auth without showing sign-in first if (doFastAuth) { store.commit("currentUserVisibleError", "Authorizing…"); - $("#loading-page-message").text(store.state.currentUserVisibleError); + updateLoadingMessage(); let lastMessage = -1; @@ -91,3 +91,11 @@ function reloadPage(message) { store.commit("currentUserVisibleError", message); location.reload(true); } + +function updateLoadingMessage() { + const loading = document.getElementById("loading-page-message"); + + if (loading) { + loading.textContent = store.state.currentUserVisibleError; + } +} diff --git a/client/js/socket-events/connection.js b/client/js/socket-events/connection.js new file mode 100644 index 00000000..50cdcc8b --- /dev/null +++ b/client/js/socket-events/connection.js @@ -0,0 +1,59 @@ +const store = require("../store").default; +const socket = require("../socket"); + +socket.on("disconnect", handleDisconnect); +socket.on("connect_error", handleDisconnect); +socket.on("error", handleDisconnect); + +socket.on("reconnecting", function(attempt) { + store.commit("currentUserVisibleError", `Reconnecting… (attempt ${attempt})`); + updateLoadingMessage(); +}); + +socket.on("connecting", function() { + store.commit("currentUserVisibleError", `Connecting…`); + updateLoadingMessage(); +}); + +socket.on("connect", function() { + // 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 = []; + + store.commit("currentUserVisibleError", "Finalizing connection…"); + updateLoadingMessage(); +}); + +function handleDisconnect(data) { + const message = data.message || data; + + store.commit("isConnected", false); + store.commit("currentUserVisibleError", `Waiting to reconnect… (${message})`); + updateLoadingMessage(); + + // If the server shuts down, socket.io skips reconnection + // and we have to manually call connect to start the process + // However, do not reconnect if TL client manually closed the connection + if (socket.io.skipReconnect && message !== "io client disconnect") { + requestIdleCallback(() => socket.connect(), 2000); + } +} + +function requestIdleCallback(callback, timeout) { + if (window.requestIdleCallback) { + // During an idle period the user agent will run idle callbacks in FIFO order + // until either the idle period ends or there are no more idle callbacks eligible to be run. + window.requestIdleCallback(callback, {timeout}); + } else { + callback(); + } +} + +function updateLoadingMessage() { + const loading = document.getElementById("loading-page-message"); + + if (loading) { + loading.textContent = store.state.currentUserVisibleError; + } +} diff --git a/client/js/socket-events/index.js b/client/js/socket-events/index.js index a46ef27a..902aaf1f 100644 --- a/client/js/socket-events/index.js +++ b/client/js/socket-events/index.js @@ -1,5 +1,6 @@ "use strict"; +require("./connection"); require("./auth"); require("./commands"); require("./init"); diff --git a/client/js/socket.js b/client/js/socket.js index 1295ef80..02d831ba 100644 --- a/client/js/socket.js +++ b/client/js/socket.js @@ -1,65 +1,12 @@ "use strict"; -const $ = require("jquery"); const io = require("socket.io-client"); const socket = io({ - transports: $(document.body).data("transports"), + transports: JSON.parse(document.body.dataset.transports), path: window.location.pathname + "socket.io/", autoConnect: false, - reconnection: !$(document.body).hasClass("public"), + reconnection: !document.body.classList.contains("public"), }); module.exports = socket; - -const store = require("./store").default; - -socket.on("disconnect", handleDisconnect); -socket.on("connect_error", handleDisconnect); -socket.on("error", handleDisconnect); - -socket.on("reconnecting", function(attempt) { - store.commit("currentUserVisibleError", `Reconnecting… (attempt ${attempt})`); - $("#loading-page-message").text(store.state.currentUserVisibleError); -}); - -socket.on("connecting", function() { - store.commit("currentUserVisibleError", `Connecting…`); - $("#loading-page-message").text(store.state.currentUserVisibleError); -}); - -socket.on("connect", function() { - // 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 = []; - - store.commit("currentUserVisibleError", "Finalizing connection…"); - $("#loading-page-message").text(store.state.currentUserVisibleError); -}); - -function handleDisconnect(data) { - const message = data.message || data; - - store.commit("isConnected", false); - - store.commit("currentUserVisibleError", `Waiting to reconnect… (${message})`); - $("#loading-page-message").text(store.state.currentUserVisibleError); - - // If the server shuts down, socket.io skips reconnection - // and we have to manually call connect to start the process - // However, do not reconnect if TL client manually closed the connection - if (socket.io.skipReconnect && message !== "io client disconnect") { - requestIdleCallback(() => socket.connect(), 2000); - } -} - -function requestIdleCallback(callback, timeout) { - if (window.requestIdleCallback) { - // During an idle period the user agent will run idle callbacks in FIFO order - // until either the idle period ends or there are no more idle callbacks eligible to be run. - window.requestIdleCallback(callback, {timeout}); - } else { - callback(); - } -}