fix: websocket

src/components/fm.tsx

@@ -63,6 +63,15 @@ const arraysEqual = (a: Uint8Array, b: Uint8Array) => {
 const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl, ...props }) => {
     const { t } = useTranslation();
     const fmRef = useRef<HTMLDivElement>(null);
+    const wsRef = useRef<WebSocket | null>(null);
+
+    useEffect(() => {
+        return () => {
+            if (wsRef.current) {
+                wsRef.current.close();
+            }
+        };
+    }, []);
 
     const [dOpen, setdOpen] = useState(false);
     const [uOpen, setuOpen] = useState(false);
@@ -175,10 +184,14 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
 
     const [currentPath, setPath] = useState('');
     useEffect(() => {
+        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
             listFile();
-    }, [currentPath])
+        }
+    }, [wsRef.current, currentPath])
 
+    useEffect(() => {
         const ws = new WebSocket(wsUrl);
+        wsRef.current = ws;
         ws.binaryType = 'arraybuffer';
         ws.onopen = () => {
             listFile();
@@ -229,8 +242,9 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
                 if (uOpen) setuOpen(false);
             }
         }
+    }, [wsUrl])
 
-    const listFile = () => {
+    let listFile = () => {
         const prefix = new Int8Array([FMOpcode.List]);
         const pathMsg = new TextEncoder().encode(currentPath);
 
@@ -238,7 +252,7 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
         msg.set(prefix);
         msg.set(pathMsg, prefix.length);
 
-        ws.send(msg);
+        wsRef.current?.send(msg);
     }
 
     const downloadFile = (basename: string) => {
@@ -250,7 +264,7 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
         msg.set(prefix);
         msg.set(filePathMessage, prefix.length);
 
-        ws.send(msg);
+        wsRef.current?.send(msg);
     }
 
     const uploadFile = async (file: File) => {
@@ -259,13 +273,13 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
 
         // Send header
         const header = fm.buildUploadHeader({ path: currentPath, file: file });
-        ws.send(header);
+        wsRef.current?.send(header);
 
         // Send data chunks
         while (offset < file.size) {
             const chunk = file.slice(offset, offset + chunkSize);
             const arrayBuffer = await fm.readFileAsArrayBuffer(chunk);
-            if (arrayBuffer) ws.send(arrayBuffer);
+            if (arrayBuffer) wsRef.current?.send(arrayBuffer);
             offset += chunkSize;
         }
     }

src/components/terminal.tsx

@@ -28,8 +28,19 @@ interface XtermProps {
 
 const XtermComponent: React.FC<XtermProps & JSX.IntrinsicElements["div"]> = ({ wsUrl, setClose, ...props }) => {
     const terminalRef = useRef<HTMLDivElement>(null);
+    const wsRef = useRef<WebSocket | null>(null);
 
+    useEffect(() => {
+        return () => {
+            if (wsRef.current) {
+                wsRef.current.close();
+            }
+        };
+    }, []);
+
+    useEffect(() => {
         const ws = new WebSocket(wsUrl);
+        wsRef.current = ws;
         ws.binaryType = "arraybuffer";
         ws.onopen = () => {
             onResize();
@@ -44,6 +55,7 @@ const XtermComponent: React.FC<XtermProps & JSX.IntrinsicElements["div"]> = ({ w
                 description: "View console for details.",
             })
         }
+    }, [wsUrl]);
 
     const terminal = useRef(
         new Terminal({
@@ -73,7 +85,7 @@ const XtermComponent: React.FC<XtermProps & JSX.IntrinsicElements["div"]> = ({ w
             msg.set(prefix);
             msg.set(resizeMessage, prefix.length);
 
-            ws.send(msg);
+            wsRef.current?.send(msg);
         }
     };
 
@@ -92,20 +104,19 @@ const XtermComponent: React.FC<XtermProps & JSX.IntrinsicElements["div"]> = ({ w
     };
 
     useEffect(() => {
-        if (!ws || !terminalRef.current) return;
-
-        const attachAddon = new AttachAddon(ws);
+        if (!wsRef.current || !terminalRef.current) return;
+        const attachAddon = new AttachAddon(wsRef.current);
         terminal.loadAddon(attachAddon);
         terminal.loadAddon(fitAddon);
         terminal.open(terminalRef.current);
         window.addEventListener('resize', onResize);
         return () => {
             window.removeEventListener('resize', onResize);
-            if (ws) {
-                ws.close();
+            if (wsRef.current) {
+                wsRef.current.close();
             }
         };
-    }, [ws, terminal]);
+    }, [wsRef.current, terminal]);
 
     return <div ref={terminalRef} {...props} />;
 };
@@ -116,7 +127,6 @@ export const TerminalPage = () => {
 
     const { id } = useParams<{ id: string }>();
 
-    useEffect(() => {
     const fetchTerminal = async () => {
         if (id && !terminal) {
             try {
@@ -130,7 +140,9 @@ export const TerminalPage = () => {
                 return;
             }
         }
-        };
+    }
+
+    useEffect(() => {
         fetchTerminal();
     }, [id]);