feat: early connect to the server to improve connect times

packages/frontend/package.json

@@ -18,6 +18,7 @@
         "@ih3t/shared": "workspace:*",
         "@tanstack/react-query": "^5.91.2",
         "clsx": "^2.1.1",
+        "engine.io-client": "^6.6.4",
         "immer": "^10.2.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",

packages/frontend/src/earlySocketConnection.ts

@@ -0,0 +1,68 @@
+import { getSocketUrl } from "./query/apiClient"
+
+export type EarlySocket = {
+    socketUrl: string,
+    socket: WebSocket,
+
+    consumeTimeout: ReturnType<typeof setTimeout>,
+    events: (() => void)[],
+}
+
+function createEarlySocket(url: string): EarlySocket {
+    let targetUrl = url
+        .replace("https://", "wss://")
+        .replace("http://", "ws://")
+
+    if (!targetUrl.endsWith("/")) {
+        targetUrl = `${targetUrl}/`
+    }
+
+    const socketUrl = `${targetUrl}socket.io/?EIO=4&transport=websocket`
+    const socket = new WebSocket(socketUrl)
+
+    const earlySocket: EarlySocket = {
+        socketUrl,
+        socket,
+
+        consumeTimeout: setTimeout(() => {
+            console.warn(`Early connect to ${targetUrl} has not been used!`);
+            socket.close();
+        }, 30_000),
+        events: [],
+    };
+
+    socket.onerror = event => { earlySocket.events.push(() => socket.onerror?.(event)) }
+    socket.onopen = event => { earlySocket.events.push(() => socket.onopen?.(event)) }
+    socket.onmessage = event => { earlySocket.events.push(() => socket.onmessage?.(event)) }
+    socket.onclose = event => { earlySocket.events.push(() => socket.onclose?.(event)) }
+
+    console.log(`Early connect to ${targetUrl}`);
+    return earlySocket;
+}
+
+function consumeEarlySocket(socket: EarlySocket): WebSocket {
+    clearTimeout(socket.consumeTimeout);
+    setTimeout(() => {
+        for (const eventCallback of socket.events) {
+            eventCallback()
+        }
+    }, 0);
+
+    return socket.socket;
+}
+
+let earlyWebSocket: EarlySocket | null = null;
+export function takeEarlyWebSocket(url: string): WebSocket | null {
+    if (url !== earlyWebSocket?.socketUrl) {
+        return null;
+    }
+
+    const socket = earlyWebSocket;
+    earlyWebSocket = null;
+    return consumeEarlySocket(socket);
+}
+
+if (!import.meta.env.SSR) {
+    /* do not create the web socket in SSR mode */
+    earlyWebSocket = createEarlySocket(getSocketUrl());
+}

packages/frontend/src/earlySocketTransport.ts

@@ -0,0 +1,14 @@
+import { WebSocket } from "engine.io-client"
+import { takeEarlyWebSocket } from "./earlySocketConnection";
+
+export class EarlyWebSocket extends WebSocket {
+    createSocket(uri: string, protocols: string | string[] | undefined, opts: Record<string, any>) {
+        const socket = takeEarlyWebSocket(uri);
+        if (socket && socket.readyState < window.WebSocket.CLOSING) {
+            console.info(`Used early socket for socker.io connection. Early socket state ${socket.readyState}.`);
+            return socket;
+        }
+
+        return super.createSocket(uri, protocols, opts)
+    }
+}

packages/frontend/src/entry-web.tsx

@@ -1,6 +1,7 @@
 import './index.css'
 import 'react-toastify/dist/ReactToastify.css'
 import { installSoundEffects } from './soundEffects'
+import "./earlySocketConnection";
 
 installSoundEffects()
 

packages/frontend/src/liveGameClient.ts

@@ -12,6 +12,7 @@ import { queryClient } from './query/queryClient'
 import { buildSessionPath } from './routes/archiveRouteState'
 import { sortLobbySessions } from './utils/lobby'
 import { queryKeys } from './query/queryDefinitions'
+import { EarlyWebSocket } from './earlySocketTransport'
 
 let socket: Socket<ServerToClientEvents, ClientToServerEvents> | null = null
 let shouldHandleDisconnect = true
@@ -58,7 +59,7 @@ export function startLiveGameClient() {
       versionHash: APP_VERSION_HASH
     },
     withCredentials: true,
-    transports: ["websocket"]
+    transports: [EarlyWebSocket],
   })
 
   socket.on('connect_error', (error) => {

packages/frontend/src/main.tsx

@@ -1,9 +1,9 @@
-import { StrictMode } from "react";
-import { createClientRouter } from "./router";
-import { getDehydratedStateFromWindow } from "./ssrState";
-import { queryClient } from "./query/queryClient";
-import { createRoot, hydrateRoot } from "react-dom/client";
-import App from "./App";
+import { StrictMode } from "react";
+import { createClientRouter } from "./router";
+import { getDehydratedStateFromWindow } from "./ssrState";
+import { queryClient } from "./query/queryClient";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import App from "./App";
 
 let root = document.getElementById('root');
 if (!root) {
@@ -26,4 +26,4 @@ if (root.hasChildNodes()) {
     hydrateRoot(root, app)
 } else {
     createRoot(root).render(app)
-}
+}

packages/frontend/src/query/apiClient.ts

@@ -15,7 +15,7 @@ export function getApiBaseUrl() {
   return 'http://localhost:3001'
 }
 
-export function getSocketUrl() {
+export function getSocketUrl(): string {
   return import.meta.env.VITE_SOCKET_URL ?? getApiBaseUrl()
 }