modify room init

src/excalidraw-app/collab/Collab.tsx

@@ -257,13 +257,6 @@ class Collab extends PureComponent<Props, CollabState> {
       ),
     );
 
-    if (this.portal.socket && this.fallbackInitializationHandler) {
-      this.portal.socket.off(
-        "connect_error",
-        this.fallbackInitializationHandler,
-      );
-    }
-
     if (!keepRemoteState) {
       LocalData.fileStorage.reset();
       this.destroySocketClient();
@@ -359,8 +352,6 @@ class Collab extends PureComponent<Props, CollabState> {
     }
   };
 
-  private fallbackInitializationHandler: null | (() => any) = null;
-
   startCollaboration = async (
     existingRoomLinkData: null | { roomId: string; roomKey: string },
   ): Promise<ImportedDataState | null> => {
@@ -399,7 +390,6 @@ class Collab extends PureComponent<Props, CollabState> {
         scenePromise.resolve(scene);
       });
     };
-    this.fallbackInitializationHandler = fallbackInitializationHandler;
 
     try {
       const socketServerData = await getCollabServer();
@@ -429,11 +419,11 @@ class Collab extends PureComponent<Props, CollabState> {
         fallbackInitializationHandler();
       });
 
-      this.portal.socket.once("connect_error", (err: any) => {
+      this.portal.socket.on("connect_error", () => {
+        fallbackInitializationHandler();
         this.setState({
           errorMessage: t("errors.socketConnectionError"),
         });
-        fallbackInitializationHandler();
       });
     } catch (error: any) {
       console.error(error);
@@ -461,6 +451,7 @@ class Collab extends PureComponent<Props, CollabState> {
       this.saveCollabRoomToFirebase(getSyncableElements(elements));
     }
 
+    clearTimeout(this.socketInitializationTimer!);
     // fallback in case you're not alone in the room but still don't receive
     // initial SCENE_INIT message
     this.socketInitializationTimer = window.setTimeout(
@@ -571,12 +562,12 @@ class Collab extends PureComponent<Props, CollabState> {
       }
     | { fetchScene: false; roomLinkData?: null }) => {
     clearTimeout(this.socketInitializationTimer!);
-    if (this.portal.socket && this.fallbackInitializationHandler) {
-      this.portal.socket.off(
-        "connect_error",
-        this.fallbackInitializationHandler,
-      );
+
+    if (!this.portal.socket || this.portal.socketInitialized) {
+      return null;
     }
+    this.portal.socketInitialized = true;
+
     if (fetchScene && roomLinkData && this.portal.socket) {
       this.excalidrawAPI.resetScene();
 
@@ -599,11 +590,7 @@ class Collab extends PureComponent<Props, CollabState> {
       } catch (error: any) {
         // log the error and move on. other peers will sync us the scene.
         console.error(error);
-      } finally {
-        this.portal.socketInitialized = true;
       }
-    } else {
-      this.portal.socketInitialized = true;
     }
     return null;
   };

src/excalidraw-app/collab/Portal.tsx

@@ -64,6 +64,7 @@ class Portal {
       return;
     }
     this.queueFileUpload.flush();
+    this.socket.off();
     this.socket.close();
     this.socket = null;
     this.roomId = null;