test

src/terminal.tsx

@@ -1,104 +1,83 @@
-// terminal.tsx
 // src/components/Terminal.tsx
 import React, { useEffect, useRef } from 'react';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import 'xterm/css/xterm.css';
 
-const useTerminalResize = (terminalRef: React.RefObject<HTMLDivElement>, fitAddon: FitAddon, newWindow: Window | null) => {
+
+const useTerminalResize = (terminalRef: React.RefObject<HTMLDivElement>, fitAddon: FitAddon) => {
     useEffect(() => {
-        const handleResize = () => {
+      const handleResize = () => {
-            if (fitAddon && terminalRef.current) {
+        if (fitAddon && terminalRef.current) {
-                fitAddon.fit();
+          fitAddon.fit();
-            }
-        };
-
-        if (newWindow) {
-            newWindow.addEventListener('resize', handleResize);
-        } else {
-            window.addEventListener('resize', handleResize);
         }
+      };
+  
+      window.addEventListener('resize', handleResize);
+  
+      // Fit the terminal initially
+      handleResize();
+  
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
+    }, [terminalRef, fitAddon]);
+  };
 
-        handleResize();
 
-        return () => {
+function TerminalComponent (p: {websocket: string|null}) {
-            if (newWindow) {
+    const {websocket} = p
-                newWindow.removeEventListener('resize', handleResize);
+    const terminalRef = useRef<HTMLDivElement>(null);
-            } else {
-                window.removeEventListener('resize', handleResize);
-            }
-        };
-    }, [terminalRef, fitAddon, newWindow]);
-};
-
-function TerminalComponent(p: { websocket: string | null }) {
-    const { websocket } = p;
-    const terminalRef = useRef<HTMLDivElement | null>(null);
     const terminal = useRef<Terminal | null>(null);
     const fitAddon = useRef<FitAddon | null>(null);
-    const newWindow = useRef<Window | null>(null);
 
     useEffect(() => {
-        newWindow.current = window.open('', '', 'width=800,height=600');
+        if (terminalRef.current) {
-
+            terminal.current = new Terminal();
-        if (newWindow.current) {
+            fitAddon.current = new FitAddon();
-            newWindow.current.document.title = "Terminal";
+            terminal.current.loadAddon(fitAddon.current);
-            const terminalDiv = newWindow.current.document.createElement('div');
+            terminal.current.open(terminalRef.current);
-            terminalDiv.style.width = '100%';
+            fitAddon.current.fit();
-            terminalDiv.style.height = '100%';
+            if (websocket == null){
-            newWindow.current.document.body.appendChild(terminalDiv);
+                
-
+                return ()=>{
-            terminalRef.current = terminalDiv;
-
-            if (terminalRef.current) {
-                terminal.current = new Terminal();
-                fitAddon.current = new FitAddon();
-                terminal.current.loadAddon(fitAddon.current);
-                terminal.current.open(terminalRef.current);
-                fitAddon.current.fit();
-
-                if (websocket == null) {
-                    return () => {
-                        terminal.current?.dispose();
-                        newWindow.current?.close();
-                    };
-                }
-
-                const socket = new WebSocket(websocket);
-
-                socket.onerror = (ev) => {
-                    console.log(ev);
-                };
-
-                socket.addEventListener('open', () => {
-                    socket.send(JSON.stringify({ CommandType: 'resize', Arguments: `${terminal.current?.cols}x${terminal.current?.rows}` }));
-                });
-
-                terminal.current.onResize(({ cols, rows }) => {
-                    socket.send(JSON.stringify({ CommandType: 'resize', Arguments: `${cols}x${rows}` }));
-                });
-
-                socket.addEventListener('message', (event) => {
-                    terminal.current?.write(JSON.parse(event.data));
-                });
-
-                terminal.current.onData((data) => {
-                    socket.send(JSON.stringify({ CommandType: 'insert', Arguments: data }));
-                });
-
-                return () => {
-                    console.log("closed websocket");
                     terminal.current?.dispose();
-                    socket.close();
+                }
-                    newWindow.current?.close();
-                };
             }
+            
+            const socket = new WebSocket(websocket);
+
+            socket.onerror = (ev)=>{
+              console.log(ev)
+            }
+
+            socket.addEventListener('open', () => {
+              socket.send(JSON.stringify({CommandType: 'resize', Arguments: `${terminal.current?.cols}x${terminal.current?.rows}`}));
+            });
+
+            terminal.current.onResize(({cols, rows})=>{
+              socket.send(JSON.stringify({CommandType: 'resize', Arguments: `${cols}x${rows}`}));
+            })
+
+            socket.addEventListener('message', (event) => {
+                terminal.current?.write(JSON.parse(event.data));
+            });
+
+            terminal.current.onData((data) => {
+                socket.send(JSON.stringify({CommandType: 'insert', Arguments: data}));
+            });
+
+            return () => {
+                console.log("closed websocket")
+                terminal.current?.dispose();
+                socket.close();
+            };
         }
     }, []);
 
-    useTerminalResize(terminalRef, fitAddon.current!, newWindow.current);
+    useTerminalResize(terminalRef, fitAddon.current!)
 
-    return null;
+    return <div ref={terminalRef} style={{ width: '100%', height: '100%' }}></div>;
 };
 
 export default TerminalComponent;