refactor(socket): load Socket.IO client via ESM

Author: KristjanESPERANTO

index.html

@@ -41,7 +41,6 @@
       <div class="region bottom right"><div class="container"></div></div>
     </div>
     <div class="region fullscreen above"><div class="container"></div></div>
-    <script type="text/javascript" src="socket.io/socket.io.js"></script>
     <script type="text/javascript" src="node_modules/nunjucks/browser/nunjucks.min.js"></script>
     <script type="text/javascript" src="js/vendor.js"></script>
     <script type="text/javascript" src="defaultmodules/defaultmodules.js"></script>

js/socketclient.js

@@ -1,18 +1,16 @@
+// eslint-disable-next-line import-x/no-unresolved -- Socket.IO serves this module at runtime.
+const { io } = await import(/* @vite-ignore */ "/socket.io/socket.io.esm.min.js");
+
 export const MMSocket = function (moduleName) {
 	if (typeof moduleName !== "string") {
 		throw new Error("Please set the module name for the MMSocket.");
 	}
 
-	const ioClient = globalThis.io;
-	if (typeof ioClient !== "function") {
-		throw new Error("socket.io client is not available.");
-	}
-
 	this.moduleName = moduleName;
 
 	// Private Methods
 	const base = globalThis.config?.basePath ?? "/";
-	this.socket = ioClient(`/${this.moduleName}`, {
+	this.socket = io(`/${this.moduleName}`, {
 		path: `${base}socket.io`,
 		pingInterval: 120000, // send pings every 2 mins
 		pingTimeout: 120000 // wait up to 2 mins for a pong
@@ -45,5 +43,8 @@ export const MMSocket = function (moduleName) {
 	};
 };
 
+// Legacy global bridge for third-party modules that reference io directly.
+globalThis.io = io;
+
 // Legacy global bridge for third-party modules that reference MMSocket directly.
 if (!globalThis.MMSocket) globalThis.MMSocket = MMSocket;

tests/utils/vitest-setup.js

@@ -6,6 +6,10 @@
 const Module = require("node:module");
 const path = require("node:path");
 
+vi.doMock(path.resolve(__dirname, "../..", "js", "socketclient.js"), () => ({
+	MMSocket () {}
+}));
+
 // Set test mode flag for application code to detect test environment
 process.env.mmTestMode = "true";