Merge pull request #3434 from JdeRobot/improve-ram-connection

Reduce number of failed connections with Robotics Backend

Author: javizqh

react_frontend/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react_frontend",
-  "version": "1.0.0",
+  "version": "6.1.0",
   "description": "React frontend for Robotics Academy",
-  "main": "index.js",
+  "main": "src/index.tsx",
   "author": "Javier Izquierdo <javizqh@pm.me>",
-  "license": "MIT",
+  "license": "GPL-3.0-only",
   "scripts": {
     "dev": "webpack --mode development --output-path ./static/react_frontend --watch",
     "build": "webpack --mode production --output-path ./static/react_frontend",
@@ -62,7 +62,7 @@
     "@types/styled-components": "^5.1.34",
     "axios": "^1.12.0",
     "glob": "^8.0.3",
-    "jderobot-commsmanager": "1.0.16",
+    "jderobot-commsmanager": "1.0.24",
     "jderobot-ide-interface": "0.2.137",
     "jszip": "^3.10.1",
     "react-router-dom": "^7.12.0",

react_frontend/src/components/buttons/PlayPause.tsx

@@ -37,9 +37,7 @@ const PlayPauseButton = ({
   const entrypointRef = useRef<Entry | undefined>(undefined);
   const runningFilesRef = useRef<Entry[]>([]);
   const runningEntrypointRef = useRef<Entry | undefined>(undefined);
-  const [state, setState] = useState<string>(
-    CommsManager.getInstance().getState()
-  );
+  const [state, setState] = useState<string>(states.IDLE);
   const [loading, setLoading] = useState<boolean>(false);
   const isCodeUpdatedRef = useRef<boolean | undefined>(undefined);
   const [, _updateCode] = useState<boolean | undefined>(false);

react_frontend/src/components/exercise/WebGUIContainer.tsx

@@ -44,7 +44,7 @@ export const connectApplication = (
   resizeRef?: MutableRefObject<HTMLImageElement | null>,
   resizeObserver?: ResizeObserver
 ) => {
-  const ref = useRef<NodeJS.Timer>();
+  const intRef = useRef<number | null>(null);
 
   const onStateChange = (message: ManagerMsg) => {
     const state = message.data.state as string;
@@ -95,19 +95,20 @@ export const connectApplication = (
       return;
     }
 
-    ref.current = setInterval(() => {
+    const timer = window.setInterval(async () => {
       try {
-        manager.send("gui", "start");
+        await manager.send("gui", "start");
       } catch {
-        end();
+        window.clearInterval(timer);
       }
     }, 1000);
+    intRef.current = timer;
   };
 
   const end = () => {
-    if (ref.current !== undefined) {
-      clearInterval(ref.current);
-      ref.current = undefined;
+    if (intRef.current !== null) {
+      window.clearInterval(intRef.current);
+      intRef.current = null;
     }
   };
 };

react_frontend/src/components/layouts/ExerciseContainer.tsx

@@ -19,7 +19,7 @@ import {
 import Frequencies from "Components/statusBar/Frequencies";
 import { StyledExerciseContainer } from "Styles/layouts/ExerciseContainer.styles";
 import { getHalGuiMethods } from "Helpers/editor";
-import { subscribe, unsubscribe } from "Helpers/utils";
+import { clearTimeouts, subscribe, unsubscribe } from "Helpers/utils";
 import { fileExplorer } from "Helpers/explorer";
 import getTools from "Helpers/tools";
 
@@ -47,6 +47,9 @@ const ExerciseContainer = ({
   multiLanguage: boolean;
   children: JSX.Element;
 }) => {
+  const hasTriedToConnect = useRef(false);
+  const timeoutRef = useRef<number | null>(null);
+  const connectTimeoutRef = useRef<number | null>(null);
   const [manager, setManager] = useState<CommsManager | null>(null);
   const [universes, setUniverses] = useState<string[] | undefined>(undefined);
   const toolsList = getTools(manager, tools, children);
@@ -63,9 +66,6 @@ const ExerciseContainer = ({
     setUniverses(list);
   };
 
-  // RB manager setup
-  const connected = useRef<boolean>(false);
-
   const resetUniverse = (e: unknown) => {
     const T = CustomEvent<{ detail: unknown }>;
     if (e instanceof T) {
@@ -76,49 +76,60 @@ const ExerciseContainer = ({
   };
 
   useEffect(() => {
-    const manager = CommsManager.getInstance();
-    setManager(manager);
     subscribe("CommsManagerStateChange", resetUniverse);
 
     return () => {
       unsubscribe("CommsManagerStateChange", () => {});
-      const currManager = CommsManager.getInstance();
-      if (currManager) {
-        currManager.disconnect();
+
+      if (hasTriedToConnect.current) {
+        const currManager = CommsManager.getInstance();
+        if (currManager) {
+          currManager.disconnect();
+          CommsManager.deleteInstance();
+          setManager(null);
+        }
       }
+
+      clearTimeouts([timeoutRef, connectTimeoutRef]);
     };
   }, []);
 
   const connectWithRetry = async (
     desiredState?: string,
     callback?: () => void
   ) => {
-    console.log(manager?.getState(), CommsManager.getInstance().getState());
-    if (!manager || manager?.getState() != "idle") {
-      return;
-    }
     try {
       const currManager = CommsManager.getInstance();
-      console.log(currManager);
+      hasTriedToConnect.current = true;
       await currManager.connect();
       getUniverseList(project);
       console.log("Connected!", currManager.getState());
-      connected.current = true;
       setManager(currManager);
       if (callback) {
         waitManagerState(desiredState ? desiredState : "connected", callback);
       }
     } catch {
       console.log("Connection failed, trying again!");
-      setTimeout(connectWithRetry, 2000, desiredState, callback);
+      timeoutRef.current = window.setTimeout(
+        connectWithRetry,
+        2000,
+        desiredState,
+        callback
+      );
     }
   };
 
   const waitManagerState = async (state: string, callback: () => void) => {
-    if (manager?.getState() === state) {
+    const currManager = CommsManager.getInstance();
+    if (currManager?.getState() === state) {
       callback();
     } else {
-      return setTimeout(waitManagerState, 100, state, callback);
+      connectTimeoutRef.current = window.setTimeout(
+        waitManagerState,
+        100,
+        state,
+        callback
+      );
     }
   };
 

react_frontend/src/helpers/utils.ts

@@ -1,6 +1,7 @@
 import { getFile, getHelperFile } from "Api";
 import { Entry } from "jderobot-ide-interface";
 import JSZip from "jszip";
+import { MutableRefObject } from "react";
 
 export const saveCode = (
   fileName: string,
@@ -142,3 +143,13 @@ const zipCodeFolder = async (zip: JSZip, file: Entry, project: string) => {
     }
   }
 };
+
+export const clearTimeouts = (
+  timeoutsRef: MutableRefObject<number | null>[]
+) => {
+  for (const element of timeoutsRef) {
+    if (element.current) {
+      window.clearTimeout(element.current);
+    }
+  }
+};

react_frontend/yarn.lock

@@ -3998,10 +3998,10 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jderobot-commsmanager@1.0.16:
-  version "1.0.16"
-  resolved "https://registry.npmjs.org/jderobot-commsmanager/-/jderobot-commsmanager-1.0.16.tgz"
-  integrity sha512-rEMr1DRqcexrtvyzNvLsWW4+DOVj+V8l4eI8HP7IAWc25NbK+OtexXJZ1Fk+v+WSdffE8n0J0k17rIryzFEm3w==
+jderobot-commsmanager@1.0.24:
+  version "1.0.24"
+  resolved "https://registry.yarnpkg.com/jderobot-commsmanager/-/jderobot-commsmanager-1.0.24.tgz#b6e7a0ff0e886ee051c4693ccfd0de54b8eca72e"
+  integrity sha512-mbdgWG+O6cWPxQs16jdTbVjHQ65/lANJyVCEgzr1FZKi9bHPNrJFjGQW0qqVksIzuVwr4+zmg2PCFcTIAe2seQ==
   dependencies:
     uuid "^11.1.0"