Full return back to old code with minor fixes
This commit is contained in:
LukeGus
52
.idea/workspace.xml
generated
52
.idea/workspace.xml
generated
@@ -5,7 +5,9 @@
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="8497df64-d86b-4c98-ac58-c157d9d3fb1e" name="Changes" comment="Nano zoom fix #16 (ssh-2-promise)">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/backend/server.js" beforeDir="false" afterPath="$PROJECT_DIR$/backend/server.js" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/App.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/App.jsx" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
@@ -40,32 +42,32 @@
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent"><![CDATA[{
|
||||
"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",
|
||||
"settings.editor.selected.configurable": "ml.llm.LLMConfigurable",
|
||||
"ts.external.directory.path": "D:\\Program Files (x86)\\Applications\\Jetbrains Webstorm\\WebStorm 2024.3.1\\plugins\\javascript-plugin\\jsLanguageServicesImpl\\external",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
<component name="PropertiesComponent">{
|
||||
"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",
|
||||
"settings.editor.selected.configurable": "ml.llm.LLMConfigurable",
|
||||
"ts.external.directory.path": "D:\\Program Files (x86)\\Applications\\Jetbrains Webstorm\\WebStorm 2024.3.1\\plugins\\javascript-plugin\\jsLanguageServicesImpl\\external",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
}
|
||||
}]]></component>
|
||||
}</component>
|
||||
<component name="RunManager" selected="Shell Script.run_backend_frontend">
|
||||
<configuration name="run_backend_frontend" type="ShConfigurationType">
|
||||
<option name="SCRIPT_TEXT" value="Start-Process "powershell" -ArgumentList "-NoProfile", "-Command npm run start-vite"; Start-Process "powershell" -ArgumentList "-NoProfile", "-Command npm run start-server" " />
|
||||
|
||||
@@ -1,91 +1,100 @@
|
||||
const WebSocket = require('ws');
|
||||
const SSH = require('ssh2-promise');
|
||||
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');
|
||||
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');
|
||||
console.log('WebSocket connection established');
|
||||
|
||||
let ssh = null;
|
||||
let termDimensions = { rows: 0, cols: 0, height: 0, weight: 0 };
|
||||
|
||||
ws.on('message', async (message) => {
|
||||
try {
|
||||
const data = JSON.parse(message);
|
||||
if (data.type === 'resize') {
|
||||
termDimensions = data;
|
||||
} else if (data.username && data.password) {
|
||||
ssh = new SSH({
|
||||
host: data.host,
|
||||
username: data.username,
|
||||
password: data.password
|
||||
});
|
||||
let conn = null; // Declare SSH client outside to manage lifecycle
|
||||
|
||||
ws.on('message', (message) => {
|
||||
try {
|
||||
await ssh.connect();
|
||||
const stream = await ssh.shell();
|
||||
const data = JSON.parse(message); // Try parsing the incoming message as JSON
|
||||
|
||||
stream.on('data', (data) => {
|
||||
const dataString = data.toString();
|
||||
ws.send(dataString);
|
||||
});
|
||||
// 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
|
||||
}
|
||||
|
||||
stream.stderr.on('data', (data) => {
|
||||
const errorString = data.toString();
|
||||
console.error('SSH error:', errorString);
|
||||
});
|
||||
conn = new ssh2.Client(); // Create a new SSH connection instance
|
||||
|
||||
ws.on('message', (message) => {
|
||||
try {
|
||||
const data = JSON.parse(message);
|
||||
if (data.type === 'resize') {
|
||||
termDimensions = data;
|
||||
}
|
||||
} catch (err) {
|
||||
stream.write(message);
|
||||
// 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) => {
|
||||
console.log(`Received message from WebSocket: ${message}`);
|
||||
stream.write(message); // Write the message (input) to the SSH shell
|
||||
});
|
||||
});
|
||||
}).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: 10000, // Send a heartbeat every 10 seconds
|
||||
keepaliveCountMax: 5, // Allow three missed heartbeats before considering the connection dead
|
||||
});
|
||||
}
|
||||
} 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.');
|
||||
}
|
||||
});
|
||||
|
||||
stream.on('close', () => {
|
||||
console.log('Stream closed');
|
||||
ssh.close();
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('SSH connection error:', err);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Message processing error:', err);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
ws.on('close', () => {
|
||||
console.log('WebSocket closed');
|
||||
if (ssh) {
|
||||
ssh.close();
|
||||
}
|
||||
});
|
||||
|
||||
ws.on('error', (err) => {
|
||||
console.error('WebSocket error:', err);
|
||||
});
|
||||
|
||||
// Ping-pong is used to keep the connection alive.
|
||||
const interval = setInterval(() => {
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
ws.ping();
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 5000);
|
||||
// Handle WebSocket close event
|
||||
ws.on('close', () => {
|
||||
console.log('WebSocket closed');
|
||||
if (conn) {
|
||||
conn.end(); // Close SSH connection when WebSocket client disconnects
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Start the WebSocket server on port 8081
|
||||
server.listen(8081, () => {
|
||||
console.log('Server listening on port 8081');
|
||||
console.log('WebSocket server is listening on ws://localhost:8081');
|
||||
});
|
||||
@@ -16,109 +16,90 @@ const App = () => {
|
||||
const [isSideBarHidden, setIsSideBarHidden] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('Initializing terminal...');
|
||||
// Initialize the terminal and the fit addon
|
||||
terminal.current = new Terminal({
|
||||
cursorBlink: true,
|
||||
theme: { background: '#1e1e1e', foreground: '#ffffff' },
|
||||
theme: {
|
||||
background: '#1e1e1e',
|
||||
foreground: '#ffffff',
|
||||
},
|
||||
macOptionIsMeta: true,
|
||||
allowProposedApi: true,
|
||||
fontSize: 14,
|
||||
scrollback: 5000,
|
||||
});
|
||||
|
||||
// Initialize and attach the fit addon to the terminal
|
||||
fitAddon.current = new FitAddon();
|
||||
terminal.current.loadAddon(fitAddon.current);
|
||||
|
||||
let resizeObserver = new ResizeObserver(() => {
|
||||
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();
|
||||
notifyServerOfResize();
|
||||
});
|
||||
|
||||
if (terminalRef.current) {
|
||||
terminal.current.open(terminalRef.current);
|
||||
console.log('Terminal opened successfully.');
|
||||
resizeObserver.observe(terminalRef.current);
|
||||
} else {
|
||||
console.error('Terminal reference is not valid!');
|
||||
}
|
||||
};
|
||||
window.addEventListener('resize', resizeListener);
|
||||
|
||||
// Monitor terminal data (activity)
|
||||
terminal.current.onData((data) => {
|
||||
if (socket.current && socket.current.readyState === WebSocket.OPEN) {
|
||||
socket.current.send(data);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
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,
|
||||
})
|
||||
);
|
||||
}
|
||||
// Add specific resize call for certain programs like nano or vim
|
||||
const resizeTerminalOnStart = () => {
|
||||
// Resize immediately after starting vim/nano or other programs
|
||||
fitAddon.current.fit();
|
||||
terminal.current.clear();
|
||||
};
|
||||
|
||||
const resizeTerminal = () => {
|
||||
if (terminalRef.current) {
|
||||
fitAddon.current.fit();
|
||||
notifyServerOfResize();
|
||||
terminal.current.onData((data) => {
|
||||
if (data.includes('nano') || data.includes('vim')) {
|
||||
// Trigger resize immediately when these programs start
|
||||
resizeTerminalOnStart();
|
||||
}
|
||||
};
|
||||
|
||||
resizeTerminal();
|
||||
window.addEventListener('resize', resizeTerminal);
|
||||
});
|
||||
|
||||
// Cleanup on component unmount
|
||||
return () => {
|
||||
terminal.current.dispose();
|
||||
if (socket.current) {
|
||||
socket.current.close();
|
||||
}
|
||||
window.removeEventListener('resize', resizeTerminal);
|
||||
resizeObserver.disconnect();
|
||||
window.removeEventListener('resize', resizeListener);
|
||||
};
|
||||
}, []);
|
||||
|
||||
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}`);
|
||||
const wsUrl = `${protocol}//${window.location.host}/ws/`; // Use current host and "/ws/" endpoint
|
||||
|
||||
if (!host || !username || !password) {
|
||||
terminal.current.writeln('Please fill in all fields.');
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
try {
|
||||
const parsedData = JSON.parse(event.data);
|
||||
if (parsedData.type === 'process_closed') {
|
||||
notifyServerOfResize();
|
||||
} else {
|
||||
terminal.current.write(event.data);
|
||||
}
|
||||
} catch (error) {
|
||||
terminal.current.write(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);
|
||||
};
|
||||
@@ -130,11 +111,6 @@ const App = () => {
|
||||
|
||||
const handleSideBarHiding = () => {
|
||||
setIsSideBarHidden((prevState) => !prevState);
|
||||
if (!isSideBarHidden) {
|
||||
setTimeout(() => {
|
||||
fitAddon.current.fit();
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -168,7 +144,11 @@ const App = () => {
|
||||
<div ref={terminalRef} className="terminal-container"></div>
|
||||
</div>
|
||||
|
||||
<button className="hide-sidebar-button" onClick={handleSideBarHiding}>
|
||||
{/* Hide button always positioned in the bottom-right corner */}
|
||||
<button
|
||||
className="hide-sidebar-button"
|
||||
onClick={handleSideBarHiding}
|
||||
>
|
||||
{isSideBarHidden ? '+' : '-'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user