Separate connection event handlers from socket.js

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

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

client/js/socket-events/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+require("./connection");
 require("./auth");
 require("./commands");
 require("./init");

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