From 0463541d9922d887dd19cd672628902fd3f4b44e Mon Sep 17 00:00:00 2001
From: Mary Hipp Rogers <maryhipp@gmail.com>
Date: Mon, 4 Dec 2023 16:01:49 -0500
Subject: [PATCH] dont set socketURL until socket is initialized (#5229)

* dont set socketURL until socket is initialized

* cleanup

* feat(ui): simplify `socketUrl` memo

no need to mutate the string; just return early if using baseUrl

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
---
 .../frontend/web/src/app/hooks/useSocketIO.ts | 89 +++++++------------
 1 file changed, 34 insertions(+), 55 deletions(-)

diff --git a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
index 91048fa63c..b2f08b2815 100644
--- a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
+++ b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
@@ -3,8 +3,8 @@ import { $authToken } from 'app/store/nanostores/authToken';
 import { $baseUrl } from 'app/store/nanostores/baseUrl';
 import { $isDebugging } from 'app/store/nanostores/isDebugging';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { MapStore, WritableAtom, atom, map } from 'nanostores';
-import { useEffect } from 'react';
+import { MapStore, atom, map } from 'nanostores';
+import { useEffect, useMemo } from 'react';
 import {
   ClientToServerEvents,
   ServerToClientEvents,
@@ -16,57 +16,10 @@ import { ManagerOptions, Socket, SocketOptions, io } from 'socket.io-client';
 declare global {
   interface Window {
     $socketOptions?: MapStore<Partial<ManagerOptions & SocketOptions>>;
-    $socketUrl?: WritableAtom<string>;
   }
 }
 
-const makeSocketOptions = (): Partial<ManagerOptions & SocketOptions> => {
-  const socketOptions: Parameters<typeof io>[0] = {
-    timeout: 60000,
-    path: '/ws/socket.io',
-    autoConnect: false, // achtung! removing this breaks the dynamic middleware
-    forceNew: true,
-  };
-
-  // if building in package mode, replace socket url with open api base url minus the http protocol
-  if (['nodes', 'package'].includes(import.meta.env.MODE)) {
-    const authToken = $authToken.get();
-    if (authToken) {
-      // TODO: handle providing jwt to socket.io
-      socketOptions.auth = { token: authToken };
-    }
-
-    socketOptions.transports = ['websocket', 'polling'];
-  }
-
-  return socketOptions;
-};
-
-const makeSocketUrl = (): string => {
-  const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-  let socketUrl = `${wsProtocol}://${window.location.host}`;
-  if (['nodes', 'package'].includes(import.meta.env.MODE)) {
-    const baseUrl = $baseUrl.get();
-    if (baseUrl) {
-      //eslint-disable-next-line
-      socketUrl = baseUrl.replace(/^https?\:\/\//i, '');
-    }
-  }
-  return socketUrl;
-};
-
-const makeSocket = (): Socket<ServerToClientEvents, ClientToServerEvents> => {
-  const socketOptions = makeSocketOptions();
-  const socketUrl = $socketUrl.get();
-  const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
-    socketUrl,
-    { ...socketOptions, ...$socketOptions.get() }
-  );
-  return socket;
-};
-
 export const $socketOptions = map<Partial<ManagerOptions & SocketOptions>>({});
-export const $socketUrl = atom<string>(makeSocketUrl());
 export const $isSocketInitialized = atom<boolean>(false);
 
 /**
@@ -74,23 +27,50 @@ export const $isSocketInitialized = atom<boolean>(false);
  */
 export const useSocketIO = () => {
   const dispatch = useAppDispatch();
-  const socketOptions = useStore($socketOptions);
-  const socketUrl = useStore($socketUrl);
   const baseUrl = useStore($baseUrl);
   const authToken = useStore($authToken);
+  const addlSocketOptions = useStore($socketOptions);
+
+  const socketUrl = useMemo(() => {
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    if (baseUrl) {
+      return baseUrl.replace(/^https?:\/\//i, '');
+    }
+
+    return `${wsProtocol}://${window.location.host}`;
+  }, [baseUrl]);
+
+  const socketOptions = useMemo(() => {
+    const options: Parameters<typeof io>[0] = {
+      timeout: 60000,
+      path: '/ws/socket.io',
+      autoConnect: false, // achtung! removing this breaks the dynamic middleware
+      forceNew: true,
+    };
+
+    if (authToken) {
+      options.auth = { token: authToken };
+      options.transports = ['websocket', 'polling'];
+    }
+
+    return { ...options, ...addlSocketOptions };
+  }, [authToken, addlSocketOptions]);
 
   useEffect(() => {
     if ($isSocketInitialized.get()) {
       // Singleton!
       return;
     }
-    const socket = makeSocket();
+
+    const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
+      socketUrl,
+      socketOptions
+    );
     setEventListeners({ dispatch, socket });
     socket.connect();
 
     if ($isDebugging.get()) {
       window.$socketOptions = $socketOptions;
-      window.$socketUrl = $socketUrl;
       console.log('Socket initialized', socket);
     }
 
@@ -99,11 +79,10 @@ export const useSocketIO = () => {
     return () => {
       if ($isDebugging.get()) {
         window.$socketOptions = undefined;
-        window.$socketUrl = undefined;
         console.log('Socket teardown', socket);
       }
       socket.disconnect();
       $isSocketInitialized.set(false);
     };
-  }, [dispatch, socketOptions, socketUrl, baseUrl, authToken]);
+  }, [dispatch, socketOptions, socketUrl]);
 };