Nano zoom fix #14

This commit is contained in:
LukeGus
2024-12-05 19:58:24 -06:00
parent 474965835f
commit 0ed7d7a083
3 changed files with 88 additions and 88 deletions

19
.idea/workspace.xml generated
View File

@@ -4,8 +4,9 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="8497df64-d86b-4c98-ac58-c157d9d3fb1e" name="Changes" comment="Nano zoom fix #12"> <list default="true" id="8497df64-d86b-4c98-ac58-c157d9d3fb1e" name="Changes" comment="Nano zoom fix #14">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <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" /> <change beforePath="$PROJECT_DIR$/frontend/src/App.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/App.jsx" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
@@ -113,7 +114,7 @@
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1733439468142</updated> <updated>1733439468142</updated>
<workItem from="1733439479708" duration="5489000" /> <workItem from="1733439479708" duration="5489000" />
<workItem from="1733448523969" duration="1201000" /> <workItem from="1733448523969" duration="1738000" />
</task> </task>
<task id="LOCAL-00001" summary="Nano zoom fix #11"> <task id="LOCAL-00001" summary="Nano zoom fix #11">
<option name="closed" value="true" /> <option name="closed" value="true" />
@@ -147,7 +148,15 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1733449331913</updated> <updated>1733449331913</updated>
</task> </task>
<option name="localTasksCounter" value="5" /> <task id="LOCAL-00005" summary="Nano zoom fix #13">
<option name="closed" value="true" />
<created>1733449760767</created>
<option name="number" value="00005" />
<option name="presentableId" value="LOCAL-00005" />
<option name="project" value="LOCAL" />
<updated>1733449760767</updated>
</task>
<option name="localTasksCounter" value="6" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@@ -156,6 +165,8 @@
<component name="VcsManagerConfiguration"> <component name="VcsManagerConfiguration">
<MESSAGE value="Nano zoom fix #11" /> <MESSAGE value="Nano zoom fix #11" />
<MESSAGE value="Nano zoom fix #12" /> <MESSAGE value="Nano zoom fix #12" />
<option name="LAST_COMMIT_MESSAGE" value="Nano zoom fix #12" /> <MESSAGE value="Nano zoom fix #13" />
<MESSAGE value="Nano zoom fix #14" />
<option name="LAST_COMMIT_MESSAGE" value="Nano zoom fix #14" />
</component> </component>
</project> </project>

View File

@@ -2,27 +2,25 @@ const WebSocket = require('ws');
const ssh2 = require('ssh2'); const ssh2 = require('ssh2');
const http = require('http'); const http = require('http');
// Create an HTTP server
const server = http.createServer((req, res) => { const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' }); res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('WebSocket server is running\n'); res.end('WebSocket server is running\n');
}); });
// Create a WebSocket server
const wss = new WebSocket.Server({ server }); const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => { wss.on('connection', (ws) => {
console.log('WebSocket connection established'); console.log('WebSocket connection established');
let conn = null; let conn = null;
let termDimensions = { rows: 0, cols: 0, height: 0, width: 0 }; // Store terminal dimensions
// Ping-Pong for WebSocket Keep-Alives
const interval = setInterval(() => { const interval = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) { if (ws.readyState === WebSocket.OPEN) {
ws.ping(); ws.ping();
} else { } else {
clearInterval(interval); clearInterval(interval);
} }
}, 15000); // Send a ping every 15 seconds }, 15000);
ws.on('pong', () => { ws.on('pong', () => {
console.log('Received pong from client'); console.log('Received pong from client');
@@ -49,33 +47,36 @@ wss.on('connection', (ws) => {
} }
stream.on('data', (data) => { stream.on('data', (data) => {
ws.send(data.toString()); const dataString = data.toString();
ws.send(dataString);
if (dataString.includes('[Process completed]')) { // Replace with your actual completion detection
stream.setWindow(termDimensions.rows, termDimensions.cols, termDimensions.height, termDimensions.width);
}
}); });
stream.stderr.on('data', (data) => {
console.error('SSH stderr:', data.toString())
})
stream.on('close', () => { stream.on('close', () => {
console.log('SSH Stream closed'); console.log('SSH Stream closed');
conn.end(); conn.end();
ws.send(JSON.stringify({ type: 'process_closed' })); // Signal process has closed
}); });
// Forward user input and resize events to the SSH stream
ws.on('message', (message) => { ws.on('message', (message) => {
let data;
// Try parsing the message as JSON
try { try {
data = JSON.parse(message); const 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) { if (data.type === 'resize' && data.rows && data.cols) {
console.log('Resize event received:', data); console.log('Resize event received:', data);
termDimensions = data; // Store received dimensions
stream.setWindow(data.rows, data.cols, data.height, data.width); stream.setWindow(data.rows, data.cols, data.height, data.width);
} }
} catch (err) {
console.log('User Input:', message);
stream.write(message);
}
}); });
}); });
}) })
@@ -91,8 +92,8 @@ wss.on('connection', (ws) => {
port: 22, port: 22,
username: data.username, username: data.username,
password: data.password, password: data.password,
keepaliveInterval: 20000, // Send SSH keepalive every 20 seconds keepaliveInterval: 20000,
keepaliveCountMax: 5, // Allow 5 missed keepalives before disconnecting keepaliveCountMax: 5,
}); });
} }
} catch (error) { } catch (error) {
@@ -109,7 +110,6 @@ wss.on('connection', (ws) => {
}); });
}); });
// Start the server
server.listen(8081, () => { server.listen(8081, () => {
console.log('WebSocket server is running on ws://localhost:8081'); console.log('WebSocket server is running on ws://localhost:8081');
}); });

View File

@@ -47,12 +47,6 @@ const App = () => {
} }
}); });
const resizeTerminal = () => {
if (terminalRef.current) {
fitAddon.current.fit();
notifyServerOfResize();
}
};
const notifyServerOfResize = () => { const notifyServerOfResize = () => {
if (socket.current && socket.current.readyState === WebSocket.OPEN) { if (socket.current && socket.current.readyState === WebSocket.OPEN) {
@@ -69,6 +63,13 @@ const App = () => {
} }
}; };
const resizeTerminal = () => {
if (terminalRef.current) {
fitAddon.current.fit();
notifyServerOfResize();
}
};
resizeTerminal(); resizeTerminal();
window.addEventListener('resize', resizeTerminal); window.addEventListener('resize', resizeTerminal);
@@ -99,11 +100,15 @@ const App = () => {
socket.current.onmessage = (event) => { socket.current.onmessage = (event) => {
console.log('Received message:', event.data); console.log('Received message:', event.data);
terminal.current.write(event.data); try {
const parsedData = JSON.parse(event.data); const parsedData = JSON.parse(event.data);
if (parsedData.type === 'process_closed') { if (parsedData.type === 'process_closed') {
notifyServerOfResize(); notifyServerOfResize();
} else {
terminal.current.write(event.data);
}
} catch (error) {
terminal.current.write(event.data)
} }
}; };
@@ -119,21 +124,6 @@ const App = () => {
}; };
}; };
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,
})
);
}
};
const handleInputChange = (event, setState) => { const handleInputChange = (event, setState) => {
setState(event.target.value); setState(event.target.value);
}; };
@@ -143,7 +133,6 @@ const App = () => {
if (!isSideBarHidden) { if (!isSideBarHidden) {
setTimeout(() => { setTimeout(() => {
fitAddon.current.fit(); fitAddon.current.fit();
notifyServerOfResize();
}, 100); }, 100);
} }
}; };