From 1139160e487ef4df7120ccbea0594ad8c1cde928 Mon Sep 17 00:00:00 2001 From: LukeGus Date: Wed, 4 Dec 2024 21:19:30 -0600 Subject: [PATCH 01/56] Nano and timeout error fix #1 --- backend/server.js | 2 ++ frontend/src/App.jsx | 48 ++++++++++++-------------------------------- info.txt | 1 - 3 files changed, 15 insertions(+), 36 deletions(-) diff --git a/backend/server.js b/backend/server.js index 56bf24c8..30741345 100644 --- a/backend/server.js +++ b/backend/server.js @@ -67,6 +67,8 @@ wss.on('connection', (ws) => { port: 22, // Default SSH port username: data.username, // Username provided from the client password: data.password, // Password provided from the client + keepaliveInterval: 15000, // Send keep-alive packets every 15 seconds + keepaliveCountMax: 3, // Retry keep-alive 3 times before disconnecting }); } } catch (error) { diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 3b7bf407..58d7efe5 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -25,75 +25,57 @@ const App = () => { }, macOptionIsMeta: true, allowProposedApi: true, - scrollback: 1000, // Allow scrollback so the terminal doesn't lose state }); - // Initialize and attach the fit addon to the terminal fitAddon.current = new FitAddon(); terminal.current.loadAddon(fitAddon.current); terminal.current.open(terminalRef.current); - // Resize terminal to fit the container initially - fitAddon.current.fit(); - - // Adjust terminal size on window resize - const resizeListener = () => { - fitAddon.current.fit(); - }; - window.addEventListener('resize', resizeListener); - - // Monitor terminal data (activity) terminal.current.onData((data) => { if (socket.current && socket.current.readyState === WebSocket.OPEN) { socket.current.send(data); } }); - // Add specific resize call for certain programs like nano or vim - const resizeTerminalOnStart = () => { - // Resize immediately after starting vim/nano or other programs + // Resize terminal to fit the container initially + const resizeTerminal = () => { fitAddon.current.fit(); - terminal.current.clear(); }; + resizeTerminal(); - terminal.current.onData((data) => { - if (data.includes('nano') || data.includes('vim')) { - // Trigger resize immediately when these programs start - resizeTerminalOnStart(); - } - }); + // Adjust terminal size on window resize + window.addEventListener('resize', resizeTerminal); - // Cleanup on component unmount return () => { terminal.current.dispose(); if (socket.current) { socket.current.close(); } - window.removeEventListener('resize', resizeListener); + window.removeEventListener('resize', resizeTerminal); }; }, []); const handleConnect = () => { const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; - const wsUrl = `${protocol}//${window.location.host}/ws/`; // Use current host and "/ws/" endpoint - + const wsUrl = `${protocol}//${window.location.host}/ws/`; + socket.current = new WebSocket(wsUrl); - + socket.current.onopen = () => { terminal.current.writeln(`Connected to WebSocket server at ${wsUrl}`); socket.current.send(JSON.stringify({ host, username, password })); setIsConnected(true); }; - + socket.current.onmessage = (event) => { terminal.current.write(event.data); }; - + socket.current.onerror = (error) => { terminal.current.writeln(`WebSocket error: ${error.message}`); }; - + socket.current.onclose = () => { terminal.current.writeln('Disconnected from WebSocket server.'); setIsConnected(false); @@ -139,11 +121,7 @@ const App = () => {
- {/* Hide button always positioned in the bottom-right corner */} - diff --git a/info.txt b/info.txt index 17810552..6f2c2d46 100644 --- a/info.txt +++ b/info.txt @@ -1,7 +1,6 @@ Currently: Fix issue after nano where the input no longer goes down to the bottom. Fix issue where SSH randomly disconnects -Post inital build. Overall Features: SSH/RDP(?)/VNC(?) From 246bb8fb264485e9b2de92b45a7b3d81dc9759fd Mon Sep 17 00:00:00 2001 From: LukeGus Date: Wed, 4 Dec 2024 21:30:37 -0600 Subject: [PATCH 02/56] Nano and timeout error fix #2 --- backend/server.js | 31 +++++++++++++++++++++++++++++-- frontend/src/App.jsx | 31 +++++++++++++++++++++++++++---- 2 files changed, 56 insertions(+), 6 deletions(-) diff --git a/backend/server.js b/backend/server.js index 30741345..02b13158 100644 --- a/backend/server.js +++ b/backend/server.js @@ -17,6 +17,19 @@ wss.on('connection', (ws) => { let conn = null; // Declare SSH client outside to manage lifecycle + // Ping-Pong for WebSocket Keep-Alives + const interval = setInterval(() => { + if (ws.readyState === WebSocket.OPEN) { + ws.ping(); + } else { + clearInterval(interval); + } + }, 15000); // Send a ping every 15 seconds + + ws.on('pong', () => { + console.log('Received pong from client'); + }); + ws.on('message', (message) => { try { const data = JSON.parse(message); // Try parsing the incoming message as JSON @@ -55,8 +68,21 @@ wss.on('connection', (ws) => { // When the WebSocket client sends a message (from terminal input), forward it to the SSH stream ws.on('message', (message) => { - console.log(`Received message from WebSocket: ${message}`); - stream.write(message); // Write the message (input) to the SSH shell + if (typeof message === 'string') { + try { + const resizeEvent = JSON.parse(message); + if (resizeEvent.type === 'resize') { + stream.setWindow( + resizeEvent.rows, + resizeEvent.cols, + resizeEvent.height, + resizeEvent.width + ); + } + } catch { + stream.write(message); + } + } }); }); }).on('error', (err) => { @@ -88,6 +114,7 @@ wss.on('connection', (ws) => { // Handle WebSocket close event ws.on('close', () => { console.log('WebSocket closed'); + clearInterval(interval); if (conn) { conn.end(); // Close SSH connection when WebSocket client disconnects } diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 58d7efe5..078bb877 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -29,7 +29,6 @@ const App = () => { fitAddon.current = new FitAddon(); terminal.current.loadAddon(fitAddon.current); - terminal.current.open(terminalRef.current); terminal.current.onData((data) => { @@ -40,11 +39,29 @@ const App = () => { // Resize terminal to fit the container initially const resizeTerminal = () => { - fitAddon.current.fit(); + if (terminalRef.current) { + fitAddon.current.fit(); + notifyServerOfResize(); + } }; - resizeTerminal(); - // Adjust terminal size on window resize + // Notify the server of terminal resize + const notifyServerOfResize = () => { + if (socket.current && socket.current.readyState === WebSocket.OPEN) { + const { rows, cols } = terminal.current; + socket.current.send( + JSON.stringify({ + type: 'resize', + rows, + cols, + height: terminalRef.current.offsetHeight, + width: terminalRef.current.offsetWidth, + }) + ); + } + }; + + resizeTerminal(); window.addEventListener('resize', resizeTerminal); return () => { @@ -88,6 +105,12 @@ const App = () => { const handleSideBarHiding = () => { setIsSideBarHidden((prevState) => !prevState); + if (!isSideBarHidden) { + setTimeout(() => { + fitAddon.current.fit(); + notifyServerOfResize(); + }, 100); // Delay to ensure layout updates before resize + } }; return ( From 870cd9245efc2b49275e1aec3b457dd54655a383 Mon Sep 17 00:00:00 2001 From: LukeGus Date: Wed, 4 Dec 2024 21:34:37 -0600 Subject: [PATCH 03/56] Nano and timeout error fix #3 --- backend/server.js | 134 +++++++++++++++++++------------------------ frontend/src/App.jsx | 2 +- 2 files changed, 61 insertions(+), 75 deletions(-) diff --git a/backend/server.js b/backend/server.js index 02b13158..1ac9984a 100644 --- a/backend/server.js +++ b/backend/server.js @@ -2,20 +2,18 @@ const WebSocket = require('ws'); const ssh2 = require('ssh2'); const http = require('http'); -// Create an HTTP server to serve WebSocket connections +// Create an HTTP server const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('WebSocket server is running\n'); }); -// Create a WebSocket server attached to the HTTP server +// Create a WebSocket server const wss = new WebSocket.Server({ server }); -// WebSocket connection handling wss.on('connection', (ws) => { console.log('WebSocket connection established'); - - let conn = null; // Declare SSH client outside to manage lifecycle + let conn = null; // Ping-Pong for WebSocket Keep-Alives const interval = setInterval(() => { @@ -32,96 +30,84 @@ wss.on('connection', (ws) => { ws.on('message', (message) => { try { - const data = JSON.parse(message); // Try parsing the incoming message as JSON + const data = JSON.parse(message); - // Check if message contains SSH connection details if (data.host && data.username && data.password) { if (conn) { - conn.end(); // Close any previous connection before starting a new one + conn.end(); } - conn = new ssh2.Client(); // Create a new SSH connection instance + conn = new ssh2.Client(); - // When the SSH connection is ready - conn.on('ready', () => { - console.log('SSH Connection established'); - - // Start an interactive shell session - conn.shell((err, stream) => { - if (err) { - console.log(`SSH Error: ${err}`); - ws.send(`Error: ${err}`); - return; - } - - // Handle data from SSH session - stream.on('data', (data) => { - console.log(`SSH Output: ${data}`); - ws.send(data.toString()); // Send the SSH output back to WebSocket client - }); - - // Handle stream close event - stream.on('close', () => { - console.log('SSH stream closed'); - conn.end(); - }); - - // When the WebSocket client sends a message (from terminal input), forward it to the SSH stream - ws.on('message', (message) => { - if (typeof message === 'string') { - try { - const resizeEvent = JSON.parse(message); - if (resizeEvent.type === 'resize') { - stream.setWindow( - resizeEvent.rows, - resizeEvent.cols, - resizeEvent.height, - resizeEvent.width - ); - } - } catch { - stream.write(message); - } + conn + .on('ready', () => { + console.log('SSH Connection established'); + conn.shell((err, stream) => { + if (err) { + ws.send(`Error: ${err.message}`); + return; } + + stream.on('data', (data) => { + ws.send(data.toString()); + }); + + stream.on('close', () => { + console.log('SSH Stream closed'); + conn.end(); + }); + + // Forward user input and resize events to the SSH stream + ws.on('message', (message) => { + if (typeof message === 'string') { + try { + const resizeEvent = JSON.parse(message); + if (resizeEvent.type === 'resize') { + stream.setWindow( + resizeEvent.rows, + resizeEvent.cols, + resizeEvent.height, + resizeEvent.width + ); + } + } catch { + stream.write(message); + } + } + }); }); + }) + .on('error', (err) => { + console.log('SSH Error:', err.message); + ws.send(`SSH Error: ${err.message}`); + }) + .on('close', () => { + console.log('SSH Connection closed'); + }) + .connect({ + host: data.host, + port: 22, + username: data.username, + password: data.password, + keepaliveInterval: 20000, // Send SSH keepalive every 20 seconds + keepaliveCountMax: 5, // Allow 5 missed keepalives before disconnecting }); - }).on('error', (err) => { - console.log('SSH Connection Error: ', err); - ws.send(`SSH Error: ${err}`); - }).connect({ - host: data.host, // Host provided from the client - port: 22, // Default SSH port - username: data.username, // Username provided from the client - password: data.password, // Password provided from the client - keepaliveInterval: 15000, // Send keep-alive packets every 15 seconds - keepaliveCountMax: 3, // Retry keep-alive 3 times before disconnecting - }); } } catch (error) { - // If message is not valid JSON (i.e., terminal input), treat it as raw text and send it to SSH - console.log('Received non-JSON message, sending to SSH session:', message); - if (conn) { - const stream = conn._stream; // Access the SSH stream directly - if (stream && stream.writable) { - stream.write(message); // Write raw input message to SSH stream - } - } else { - console.error('SSH connection is not established yet.'); - } + console.log('Non-JSON message received:', message); } }); - // Handle WebSocket close event ws.on('close', () => { console.log('WebSocket closed'); clearInterval(interval); if (conn) { - conn.end(); // Close SSH connection when WebSocket client disconnects + conn.end(); } }); }); -// Start the WebSocket server on port 8081 +// Start the server server.listen(8081, () => { - console.log('WebSocket server is listening on ws://localhost:8081'); + console.log('WebSocket server is running on ws://localhost:8081'); }); \ No newline at end of file diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 078bb877..a617707c 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -151,4 +151,4 @@ const App = () => { ); }; -export default App; \ No newline at end of file +export default App; From f14db797847871a617ee576c163bb4662b0513a8 Mon Sep 17 00:00:00 2001 From: LukeGus Date: Wed, 4 Dec 2024 21:34:56 -0600 Subject: [PATCH 04/56] Nano and timeout error fix #4 --- frontend/src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index a617707c..078bb877 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -151,4 +151,4 @@ const App = () => { ); }; -export default App; +export default App; \ No newline at end of file From 09000172181577b5aacaaefb4ebd8d2532a019f6 Mon Sep 17 00:00:00 2001 From: LukeGus Date: Wed, 4 Dec 2024 21:43:38 -0600 Subject: [PATCH 05/56] Nano and timeout error fix #5 --- backend/server.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/backend/server.js b/backend/server.js index 1ac9984a..bd5608f9 100644 --- a/backend/server.js +++ b/backend/server.js @@ -63,12 +63,7 @@ wss.on('connection', (ws) => { try { const resizeEvent = JSON.parse(message); if (resizeEvent.type === 'resize') { - stream.setWindow( - resizeEvent.rows, - resizeEvent.cols, - resizeEvent.height, - resizeEvent.width - ); + stream.setWindow(resizeEvent.rows, resizeEvent.cols, resizeEvent.height, resizeEvent.width); } } catch { stream.write(message); From 3721edc12881777f359f376f1af404e21ed9afcc Mon Sep 17 00:00:00 2001 From: LukeGus Date: Wed, 4 Dec 2024 21:48:06 -0600 Subject: [PATCH 06/56] Nano and timeout error fix #6 --- backend/server.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/backend/server.js b/backend/server.js index bd5608f9..0b85a9a0 100644 --- a/backend/server.js +++ b/backend/server.js @@ -59,16 +59,8 @@ wss.on('connection', (ws) => { // Forward user input and resize events to the SSH stream ws.on('message', (message) => { - if (typeof message === 'string') { - try { - const resizeEvent = JSON.parse(message); - if (resizeEvent.type === 'resize') { - stream.setWindow(resizeEvent.rows, resizeEvent.cols, resizeEvent.height, resizeEvent.width); - } - } catch { - stream.write(message); - } - } + console.log('User Input:', message); + stream.write(message); }); }); }) From a407bf15f72e68467dc01c90069c5c2ae7f958b0 Mon Sep 17 00:00:00 2001 From: LukeGus Date: Wed, 4 Dec 2024 21:53:21 -0600 Subject: [PATCH 07/56] Nano and timeout error fix #7 (plus css changes for hide buttons) --- backend/server.js | 21 ++++++++++++++++++--- frontend/src/App.css | 2 +- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/backend/server.js b/backend/server.js index 0b85a9a0..a7c83c6b 100644 --- a/backend/server.js +++ b/backend/server.js @@ -59,9 +59,24 @@ wss.on('connection', (ws) => { // Forward user input and resize events to the SSH stream ws.on('message', (message) => { - console.log('User Input:', message); - stream.write(message); - }); + let data; + + // Try parsing the message as JSON + try { + data = JSON.parse(message); + } catch (err) { + // If it's not JSON, it's likely user input. Forward it to the SSH stream. + console.log('User Input:', message); + stream.write(message); + return; // Exit early since it's user input + } + + // If it's a resize event, handle it + if (data.type === 'resize' && data.rows && data.cols) { + console.log('Resize event received:', data); + stream.setWindow(data.rows, data.cols, data.height, data.width); + } + }); }); }) .on('error', (err) => { diff --git a/frontend/src/App.css b/frontend/src/App.css index fe359acc..e79169c5 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -63,7 +63,7 @@ .hide-sidebar-button { position: fixed; bottom: 10px; - right: 10px; + right: 13px; background-color: rgb(108, 108, 108); color: white; border: none; From d46ddfe6ee821d8c852a846f2c152d697bf0e63e Mon Sep 17 00:00:00 2001 From: LukeGus Date: Wed, 4 Dec 2024 21:58:40 -0600 Subject: [PATCH 08/56] Nano and timeout error fix #8 (zoom method) --- frontend/src/App.jsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 078bb877..98cd2971 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -14,6 +14,7 @@ const App = () => { const [password, setPassword] = useState(''); const [isConnected, setIsConnected] = useState(false); const [isSideBarHidden, setIsSideBarHidden] = useState(false); + const [zoomFactor, setZoomFactor] = useState(1); // This will control zoom useEffect(() => { // Initialize the terminal and the fit addon @@ -25,6 +26,7 @@ const App = () => { }, macOptionIsMeta: true, allowProposedApi: true, + fontSize: 14, // Start with a default font size }); fitAddon.current = new FitAddon(); @@ -41,10 +43,24 @@ const App = () => { const resizeTerminal = () => { if (terminalRef.current) { fitAddon.current.fit(); + adjustZoom(); // Adjust zoom whenever the terminal resizes notifyServerOfResize(); } }; + // Adjust the zoom factor based on the terminal container size + const adjustZoom = () => { + const containerHeight = terminalRef.current.offsetHeight; + const containerWidth = terminalRef.current.offsetWidth; + + // Here, adjust zoom based on container size (for example, make it zoom out if it's smaller) + const newZoomFactor = Math.max(0.5, Math.min(2, containerHeight / 300)); // Adjust this logic as needed + if (zoomFactor !== newZoomFactor) { + setZoomFactor(newZoomFactor); + terminal.current.setOption('fontSize', 14 * newZoomFactor); // Adjust font size based on zoom + } + }; + // Notify the server of terminal resize const notifyServerOfResize = () => { if (socket.current && socket.current.readyState === WebSocket.OPEN) { @@ -71,7 +87,7 @@ const App = () => { } window.removeEventListener('resize', resizeTerminal); }; - }, []); + }, [zoomFactor]); // Re-run when zoomFactor changes const handleConnect = () => { const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; From ea2343551dae3bd1b61b436091d45df104f91cdf Mon Sep 17 00:00:00 2001 From: LukeGus Date: Wed, 4 Dec 2024 22:04:01 -0600 Subject: [PATCH 09/56] Nano zoom fix #9 --- frontend/src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 98cd2971..f54fb8ff 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -57,7 +57,7 @@ const App = () => { const newZoomFactor = Math.max(0.5, Math.min(2, containerHeight / 300)); // Adjust this logic as needed if (zoomFactor !== newZoomFactor) { setZoomFactor(newZoomFactor); - terminal.current.setOption('fontSize', 14 * newZoomFactor); // Adjust font size based on zoom + terminal.current.setFontSize(14 * newZoomFactor); // Corrected font size update } }; From 848b38873434000f7dec754db859a19f0ee915cb Mon Sep 17 00:00:00 2001 From: LukeGus Date: Wed, 4 Dec 2024 22:07:51 -0600 Subject: [PATCH 10/56] Nano zoom fix #10 --- frontend/src/App.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index f54fb8ff..cb77b26d 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -53,11 +53,11 @@ const App = () => { const containerHeight = terminalRef.current.offsetHeight; const containerWidth = terminalRef.current.offsetWidth; - // Here, adjust zoom based on container size (for example, make it zoom out if it's smaller) + // Adjust zoom based on container size const newZoomFactor = Math.max(0.5, Math.min(2, containerHeight / 300)); // Adjust this logic as needed if (zoomFactor !== newZoomFactor) { setZoomFactor(newZoomFactor); - terminal.current.setFontSize(14 * newZoomFactor); // Corrected font size update + terminal.current.setOption('fontSize', 14 * newZoomFactor); // Use setOption instead of setFontSize } }; From 7b545367dcfa00f9369a7b36d1b66dd5be76fce1 Mon Sep 17 00:00:00 2001 From: LukeGus Date: Thu, 5 Dec 2024 19:34:17 -0600 Subject: [PATCH 11/56] Nano zoom fix #11 --- .idea/vcs.xml | 6 ++ .idea/workspace.xml | 137 ++++++++++++++++++++++++++++++++++++++++++ frontend/package.json | 2 +- frontend/src/App.jsx | 122 ++++++++++++++++++------------------- frontend/start.js | 12 ++++ package-lock.json | 2 +- 6 files changed, 214 insertions(+), 67 deletions(-) create mode 100644 .idea/vcs.xml create mode 100644 .idea/workspace.xml create mode 100644 frontend/start.js diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..94a25f7f --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 00000000..3cf3e3cd --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,137 @@ + + + + + + + + + + + + + + + { + "lastFilter": {} +} + { + "selectedUrlAndAccountId": { + "url": "https://github.com/LukeGus/ssh-project.git", + "accountId": "f04977d4-c3b2-400a-9c9b-d5b445f8a970" + } +} + { + "associatedIndex": 8 +} + + + + + + + { + "keyToString": { + "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true", + "RunOnceActivity.ShowReadmeOnStart": "true", + "RunOnceActivity.git.unshallow": "true", + "Shell Script.Node Server.js Start.executor": "Run", + "Shell Script.Run backend and frontend.executor": "Run", + "Shell Script.run_backend_frontend.executor": "Run", + "git-widget-placeholder": "alpha-1.0", + "ignore.virus.scanning.warn.message": "true", + "last_opened_file_path": "D:/Programming Projects/SSH-Project-JB", + "node.js.detected.package.eslint": "true", + "node.js.detected.package.tslint": "true", + "node.js.selected.package.eslint": "(autodetect)", + "node.js.selected.package.tslint": "(autodetect)", + "nodejs_package_manager_path": "npm", + "npm.run_start.executor": "Run", + "npm.run_start_frontend.executor": "Run", + "npm.run_start_node_backend.executor": "Run", + "npm.run_start_vite.executor": "Run", + "npm.start.executor": "Run", + "vue.rearranger.settings.migration": "true" + } +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1733439468142 + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json index cbe8f407..45136381 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,7 +24,7 @@ }, "scripts": { "start-vite": "cross-env BROWSER=none WDS_SOCKET_PORT=0 vite --port 8080", - "start-server": "node 'D:/Programming Projects/SSH-Project/ssh-project/backend/server.js'", + "start-server": "node ./start.js", "start": "npm run start-vite && npm run start-server", "build": "vite build", "preview": "vite preview", diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index cb77b26d..642f3d15 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -14,24 +14,26 @@ const App = () => { const [password, setPassword] = useState(''); const [isConnected, setIsConnected] = useState(false); const [isSideBarHidden, setIsSideBarHidden] = useState(false); - const [zoomFactor, setZoomFactor] = useState(1); // This will control zoom useEffect(() => { - // Initialize the terminal and the fit addon + console.log('Initializing terminal...'); terminal.current = new Terminal({ cursorBlink: true, - theme: { - background: '#1e1e1e', - foreground: '#ffffff', - }, + theme: { background: '#1e1e1e', foreground: '#ffffff' }, macOptionIsMeta: true, allowProposedApi: true, - fontSize: 14, // Start with a default font size + fontSize: 14, // Set the default font size initially }); fitAddon.current = new FitAddon(); terminal.current.loadAddon(fitAddon.current); - terminal.current.open(terminalRef.current); + + if (terminalRef.current) { + terminal.current.open(terminalRef.current); + console.log('Terminal opened successfully.'); + } else { + console.error('Terminal reference is not valid!'); + } terminal.current.onData((data) => { if (socket.current && socket.current.readyState === WebSocket.OPEN) { @@ -39,40 +41,24 @@ const App = () => { } }); - // Resize terminal to fit the container initially const resizeTerminal = () => { if (terminalRef.current) { fitAddon.current.fit(); - adjustZoom(); // Adjust zoom whenever the terminal resizes notifyServerOfResize(); } }; - // Adjust the zoom factor based on the terminal container size - const adjustZoom = () => { - const containerHeight = terminalRef.current.offsetHeight; - const containerWidth = terminalRef.current.offsetWidth; - - // Adjust zoom based on container size - const newZoomFactor = Math.max(0.5, Math.min(2, containerHeight / 300)); // Adjust this logic as needed - if (zoomFactor !== newZoomFactor) { - setZoomFactor(newZoomFactor); - terminal.current.setOption('fontSize', 14 * newZoomFactor); // Use setOption instead of setFontSize - } - }; - - // Notify the server of terminal resize const notifyServerOfResize = () => { if (socket.current && socket.current.readyState === WebSocket.OPEN) { const { rows, cols } = terminal.current; socket.current.send( - JSON.stringify({ - type: 'resize', - rows, - cols, - height: terminalRef.current.offsetHeight, - width: terminalRef.current.offsetWidth, - }) + JSON.stringify({ + type: 'resize', + rows, + cols, + height: terminalRef.current.offsetHeight, + width: terminalRef.current.offsetWidth, + }) ); } }; @@ -87,29 +73,35 @@ const App = () => { } window.removeEventListener('resize', resizeTerminal); }; - }, [zoomFactor]); // Re-run when zoomFactor changes + }, []); const handleConnect = () => { + console.log('Connecting...'); const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; const wsUrl = `${protocol}//${window.location.host}/ws/`; + console.log(`WebSocket URL: ${wsUrl}`); socket.current = new WebSocket(wsUrl); socket.current.onopen = () => { + console.log('WebSocket connection opened'); terminal.current.writeln(`Connected to WebSocket server at ${wsUrl}`); socket.current.send(JSON.stringify({ host, username, password })); setIsConnected(true); }; socket.current.onmessage = (event) => { + console.log('Received message:', event.data); terminal.current.write(event.data); }; socket.current.onerror = (error) => { + console.error('WebSocket error:', error); terminal.current.writeln(`WebSocket error: ${error.message}`); }; socket.current.onclose = () => { + console.log('WebSocket connection closed'); terminal.current.writeln('Disconnected from WebSocket server.'); setIsConnected(false); }; @@ -125,46 +117,46 @@ const App = () => { setTimeout(() => { fitAddon.current.fit(); notifyServerOfResize(); - }, 100); // Delay to ensure layout updates before resize + }, 100); } }; return ( -
-
-
-

Connection Details

- handleInputChange(e, setHost)} - /> - handleInputChange(e, setUsername)} - /> - handleInputChange(e, setPassword)} - /> - +
+
+
+

Connection Details

+ handleInputChange(e, setHost)} + /> + handleInputChange(e, setUsername)} + /> + handleInputChange(e, setPassword)} + /> + +
+ +
-
+
- - -
); }; -export default App; \ No newline at end of file +export default App; diff --git a/frontend/start.js b/frontend/start.js new file mode 100644 index 00000000..c491af14 --- /dev/null +++ b/frontend/start.js @@ -0,0 +1,12 @@ +// start.js +const { spawn } = require('child_process'); + +const child = spawn('node', ["\"D:/Programming Projects/SSH-Project-JB/backend/server.js\""], { + stdio: 'inherit', // this is key for interactivity + shell: true, // use system shell +}); + +child.on('exit', function (code, signal) { + console.log('child process exited with ' + + `code ${code} and signal ${signal}`); +}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 047d800b..6632fe50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "ssh-project", + "name": "SSH-Project-JB", "lockfileVersion": 2, "requires": true, "packages": { From 1f75dc0bd2cbc34cb5d4978a04d051282e6fdfaf Mon Sep 17 00:00:00 2001 From: LukeGus Date: Thu, 5 Dec 2024 19:42:08 -0600 Subject: [PATCH 12/56] Nano zoom fix #12 --- .idea/workspace.xml | 21 ++++++++++++++------- frontend/src/App.jsx | 11 +++++++++-- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 3cf3e3cd..a38c8c1f 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -4,10 +4,9 @@
-
From bda3fe9b3106c259d3f5ca318d727a023a811cbd Mon Sep 17 00:00:00 2001 From: LukeGus Date: Fri, 6 Dec 2024 20:21:14 -0600 Subject: [PATCH 19/56] Terminal size fix #18 (rows & cols fix) --- .idea/workspace.xml | 22 ++++++++++++-- backend/package-lock.json | 60 ++++++++++++++++++++++++++++---------- backend/package.json | 4 ++- backend/server.js | 17 +++++++++-- frontend/package-lock.json | 60 ++++++++++++++++++++++++++++---------- frontend/package.json | 2 ++ frontend/src/App.css | 3 +- frontend/src/App.jsx | 36 ++++++++++++----------- frontend/src/index.css | 2 +- info.txt | 2 +- 10 files changed, 149 insertions(+), 59 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 5179e8ca..5feb9267 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -4,10 +4,17 @@