diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index dfd2678a..a304d0c3 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,11 @@
-
-
+
+
+
+
@@ -115,7 +117,9 @@
1733439468142
-
+
+
+
@@ -309,7 +313,23 @@
1733558347319
-
+
+
+ 1733558781194
+
+
+
+ 1733558781194
+
+
+
+ 1733558952696
+
+
+
+ 1733558952696
+
+
@@ -358,6 +378,8 @@
-
+
+
+
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
index 02989734..408cae0f 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -2,117 +2,91 @@ const WebSocket = require('ws');
const ssh2 = require('ssh2');
const http = require('http');
-// Create an HTTP server to serve WebSocket connections
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
const wss = new WebSocket.Server({ server });
-// WebSocket connection handling
wss.on('connection', (ws) => {
console.log('WebSocket connection established');
- let conn = null;
+ let conn = new ssh2.Client();
let stream = null;
- let interval = null;
+ let currentCols = 80;
+ let currentRows = 24;
+
+ const resizeTerminal = (cols, rows) => {
+ if (stream && stream.setWindow) {
+ stream.setWindow(rows, cols, rows * 100, cols * 100); // Adjust terminal size
+ console.log(`Terminal resized successfully: cols=${cols}, rows=${rows}`);
+ }
+ };
ws.on('message', (message) => {
+ const messageStr = message.toString();
+
+ let data;
try {
- const data = JSON.parse(message);
-
- if (data.host && data.port && data.username && data.password) {
- if (conn) {
- conn.end();
- }
-
- conn = new ssh2.Client();
-
- interval = setInterval(() => {
- if (ws.readyState === WebSocket.OPEN) {
- ws.ping();
- } else {
- clearInterval(interval);
- }
- }, 15000);
-
- conn.on('ready', () => {
- console.log('SSH Connection established');
- conn.shell((err, sshStream) => {
- if (err) {
- console.log(`SSH Error: ${err}`);
- ws.send(`Error: ${err}`);
- return;
- }
-
- stream = sshStream;
-
- // Send stty commands for resizing rows and columns
- const resizeCommand = (rows, cols) => {
- return `stty rows ${rows} cols ${cols}\n`;
- };
-
- // Adjust terminal size once shell is ready
- ws.on('message', (msg) => {
- try {
- const input = JSON.parse(msg);
- if (input.type === 'resize') {
- const resizeCmd = resizeCommand(input.rows, input.cols);
- stream.write(resizeCmd); // Resize the terminal in SSH
- } else {
- stream.write(msg); // Regular input handling
- }
- } catch (e) {
- // If it's not JSON, it's a regular key press
- stream.write(msg);
- }
- });
-
- stream.on('data', (data) => {
- console.log(`SSH Output: ${data}`);
- ws.send(data.toString()); // Send the data back to the client once
- });
-
- stream.on('close', () => {
- console.log('SSH stream closed');
- conn.end();
- });
-
- // Send only the resize commands initially without `stty sane`
- const initialResizeCmd = resizeCommand(24, 80); // Example initial size
- stream.write(initialResizeCmd); // Set terminal size
- });
- }).on('error', (err) => {
- console.log('SSH Connection Error: ', err);
- ws.send(`SSH Error: ${err}`);
- }).connect({
- host: data.host,
- port: data.port,
- username: data.username,
- password: data.password,
- keepaliveInterval: 10000,
- keepaliveCountMax: 5,
- });
+ if (messageStr.trim().startsWith('{')) {
+ data = JSON.parse(messageStr);
+ } else if (stream && stream.writable) {
+ stream.write(messageStr);
+ return;
}
} catch (error) {
- console.log('Received non-JSON message: ', message);
+ console.error('Failed to process message:', error);
+ return;
+ }
+
+ if (data?.host && data.port && data.username && data.password) {
+ conn.on('ready', () => {
+ console.log('SSH Connection established');
+ conn.shell({ term: 'xterm', cols: currentCols, rows: currentRows }, (error, newStream) => {
+ if (error) {
+ console.error(`SSH Shell Error: ${error}`);
+ ws.send(`Error: Could not establish a shell: ${error.message}`);
+ return;
+ }
+
+ stream = newStream;
+
+ stream.on('data', (chunk) => {
+ ws.send(chunk.toString());
+ });
+
+ stream.on('close', () => {
+ console.log('SSH stream closed');
+ conn.end();
+ });
+ });
+ }).on('error', (err) => {
+ console.log('SSH Connection Error:', err);
+ ws.send(`SSH Connection Error: ${err.message}`);
+ }).connect({
+ host: data.host,
+ port: data.port,
+ username: data.username,
+ password: data.password,
+ keepaliveInterval: 10000,
+ keepaliveCountMax: 5,
+ });
+ } else if (data?.cols && data.rows) {
+ currentCols = data.cols;
+ currentRows = data.rows;
+ resizeTerminal(currentCols, currentRows);
}
});
ws.on('close', () => {
+ console.log('WebSocket closed');
if (conn) {
conn.end();
}
- if (interval) {
- clearInterval(interval);
- }
- console.log('WebSocket connection closed');
});
});
-// Start HTTP server
server.listen(8081, () => {
- console.log('WebSocket server listening on ws://localhost:8081');
+ console.log('WebSocket server is listening on ws://localhost:8081');
});
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index cf79b9bc..c7d21ece 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -10,14 +10,13 @@ const App = () => {
const fitAddon = useRef(null);
const socket = useRef(null);
const [host, setHost] = useState('');
- const [port, setPort] = useState(22);
+ const [port, setPort] = useState('22');
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [isConnected, setIsConnected] = useState(false);
const [isSideBarHidden, setIsSideBarHidden] = useState(false);
useEffect(() => {
- // Initialize the terminal and the fit addon
terminal.current = new Terminal({
cursorBlink: true,
theme: {
@@ -27,36 +26,50 @@ const App = () => {
macOptionIsMeta: true,
allowProposedApi: true,
scrollback: 5000,
- // Do not enable local echo
- disableStdin: false,
});
- // 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 handleResize = () => {
+ // Fit the terminal and send the size when needed
+ const fitAndNotifyResize = () => {
fitAddon.current.fit();
if (socket.current && socket.current.readyState === WebSocket.OPEN) {
socket.current.send(JSON.stringify({
- type: 'resize',
- rows: terminal.current.rows,
cols: terminal.current.cols,
+ rows: terminal.current.rows,
}));
}
};
- window.addEventListener('resize', handleResize);
+ window.addEventListener('resize', fitAndNotifyResize);
+
+ terminal.current.onResize(({ cols, rows }) => {
+ console.log(`Terminal resized to cols:${cols}, rows:${rows}`);
+ fitAndNotifyResize();
+ });
+
+ const handleConnectionEstablished = () => {
+ fitAndNotifyResize();
+ };
+
+ window.addEventListener('connection-established', handleConnectionEstablished);
+
+ // Monitor terminal data (activity)
+ terminal.current.onData((data) => {
+ if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+ socket.current.send(data);
+ }
+ });
return () => {
terminal.current.dispose();
- if (socket.current) socket.current.close();
- window.removeEventListener('resize', handleResize);
+ if (socket.current) {
+ socket.current.close();
+ }
+ window.removeEventListener('resize', fitAndNotifyResize);
};
}, []);
@@ -69,7 +82,7 @@ const App = () => {
return;
}
- socket.current = new WebSocket("ws://localhost:8081");
+ socket.current = new WebSocket(wsUrl);
socket.current.onopen = () => {
terminal.current.writeln(`Connected to WebSocket server at ${wsUrl}`);
@@ -83,12 +96,15 @@ const App = () => {
cols: terminal.current.cols
})
);
+
+ // Dispatch a custom event when connection is open
+ const event = new Event('connection-established');
+ window.dispatchEvent(event);
+
setIsConnected(true);
};
socket.current.onmessage = (event) => {
- // Write the incoming data from WebSocket to the terminal
- // This ensures that data coming from the WebSocket server is shown in the terminal
terminal.current.write(event.data);
};
@@ -100,36 +116,45 @@ const App = () => {
terminal.current.writeln('Disconnected from WebSocket server.');
setIsConnected(false);
};
-
- // Handle terminal input and send it over WebSocket
- terminal.current.onData((data) => {
- // Send input data over WebSocket without echoing it back to the terminal
- if (socket.current && socket.current.readyState === WebSocket.OPEN) {
- socket.current.send(data); // Only send to WebSocket, no echo
- }
- });
};
- const handleInputChange = (event, setState, isNumber = false) => {
- let value = event.target.value;
-
- if (isNumber) {
- value = Number(value); // Convert to number if it's a number field
- if (isNaN(value)) {
- value = ''; // Optional: set an empty string if the input is invalid
- }
- }
-
- setState(value); // Set the state with the appropriate value
+ const handleInputChange = (event, setState) => {
+ setState(event.target.value);
};
const handleSideBarHiding = () => {
- setIsSideBarHidden((prevState) => !prevState);
+ setIsSideBarHidden((prevState) => {
+ const newState = !prevState;
+ if (newState) {
+ setTimeout(() => {
+ // Add a delay to ensure layout settles before resize action
+ fitAddon.current.fit();
+ if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+ socket.current.send(JSON.stringify({
+ cols: terminal.current.cols,
+ rows: terminal.current.rows,
+ }));
+ }
+ }, 100); // Delay of 100 milliseconds
+ } else {
+ setTimeout(() => {
+ // Refit terminal when showing sidebar as well
+ fitAddon.current.fit();
+ if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+ socket.current.send(JSON.stringify({
+ cols: terminal.current.cols,
+ rows: terminal.current.rows,
+ }));
+ }
+ }, 100); // Delay of 100 milliseconds
+ }
+ return newState;
+ });
};
return (