ION_Archive/web-to-fish
1
0
Fork 0
mirror of https://github.com/ION606/web-to-fish.git synced 2026-05-14 18:36:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

added sessions

Browse Source
This commit is contained in:
ION606
2025-06-24 22:17:56 -04:00
parent b0652fecd8
commit 674f5c5dd4
2 changed files with 180 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
HTML/shell.html
+42 -75
View File
@@ -1,9 +1,8 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shell</title> <title>Shell</title>
<style> <style>
body { body {
@@ -44,7 +43,6 @@
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
/* border: 1px solid #444; */
background: #000000; background: #000000;
border-radius: 5px; border-radius: 5px;
height: 100%; height: 100%;
@@ -52,7 +50,6 @@
padding: 0; padding: 0;
} }
/* For scrollbars */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
} }
@@ -65,80 +62,45 @@
background: #777; background: #777;
} }
</style> </style>
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" /> <link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
<script src="node_modules/@xterm/xterm/lib/xterm.js"></script> <script src="node_modules/@xterm/xterm/lib/xterm.js"></script>
<script src="node_modules/@xterm/addon-fit/lib/addon-fit.js"></script> <script src="node_modules/@xterm/addon-fit/lib/addon-fit.js"></script>
</head> </head>
<body> <body>
<div class="terminal-container"> <div class="terminal-container">
<div class="output" id="output"></div> <div class="output" id="output"></div>
</div> </div>
<script> <script>
function fitTerminalToScreen(term) { const sessionId =
const container = document.querySelector('#output'); // terminal container sessionStorage.getItem("sessionId") || crypto.randomUUID();
const charWidth = term._core._renderService.dimensions.actualCellWidth; sessionStorage.setItem("sessionId", sessionId);
const charHeight = term._core._renderService.dimensions.actualCellHeight;
console.log(term); function connect() {
if (!charWidth || !charHeight) return; const protocol =
location.protocol === "https:" ? "wss://" : "ws://";
const ws = new WebSocket(
`${protocol}${location.host}/shell-ws?id=${sessionId}`
);
// Calculate the number of columns and rows term.onData((data) => ws.send(data));
const cols = Math.floor(container.offsetWidth / charWidth);
const rows = Math.floor(container.offsetHeight / charHeight);
console.log('Container height:', container.clientHeight); ws.addEventListener("message", (event) => {
console.log('Char height:', charHeight);
console.log('Rows calculated:', Math.floor(container.clientHeight / charHeight));
// Resize the terminal
term.resize(cols, rows);
}
</script>
<script>
// create terminal instance
const term = new Terminal({
// cols: 800,
// rows: 24,
cursorBlink: true,
theme: {
background: '#000000',
foreground: '#ffffff',
cursor: '#00ff00',
}
});
// mount terminal
const outputContainer = document.querySelector('#output');
term.open(outputContainer);
// create websocket connection
const protocol = location.protocol === 'https:' ? 'wss://' : 'ws://';
const ws = new WebSocket(`${protocol}${location.host}/shell-ws`);
// handle terminal input and send to websocket
term.onData(data => {
ws.send(data);
});
// handle incoming websocket messages and write to terminal
ws.addEventListener('message', event => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
if (data.event) { if (data.event) {
switch (data.event) { switch (data.event) {
case 'exit': case "exit":
term.write('\r\nConnection closed. Refreshing...\r\n'); term.write(
ws.close(); "\r\nConnection closed. Refreshing...\r\n"
setTimeout(() => window.location.reload(), 2000); );
setTimeout(
() => window.location.reload(),
2000
);
break; break;
default: default:
console.error(`Unknown event: ${data.event}`); term.write(
term.write(`\r\nUnknown event: ${data.event}\r\n`); `\r\nUnknown event: ${data.event}\r\n`
);
break; break;
} }
} else { } else {
@@ -146,25 +108,30 @@
} }
}); });
// handle websocket closure ws.addEventListener("close", () => {
ws.addEventListener('close', event => { setTimeout(connect, 1000);
term.write(`\r\nConnection closed with code ${event.code}\r\n`);
}); });
}
// handle websocket errors const term = new Terminal({
ws.addEventListener('error', () => { cursorBlink: true,
term.write('\r\nConnection error. Please try again later.\r\n'); theme: {
background: "#000000",
foreground: "#ffffff",
cursor: "#00ff00",
},
}); });
const outputContainer = document.querySelector("#output");
window.addEventListener('resize', () => { term.open(outputContainer);
document.querySelector('.xterm-screen').style.width = `${window.innerWidth}px`;
document.querySelector('.xterm-screen').style.height = `${window.innerHeight}px`;
})
const fitAddon = new FitAddon.FitAddon(); const fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon); term.loadAddon(fitAddon);
fitAddon.fit(); fitAddon.fit();
connect();
window.addEventListener("beforeunload", () => {
navigator.sendBeacon(`/kill-session?id=${sessionId}`);
});
</script> </script>
</body> </body>
</html> </html>
main.js
+46 -17
View File
@@ -3,30 +3,37 @@ import path from 'path';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import expressWs from 'express-ws'; import expressWs from 'express-ws';
import { spawn } from 'node-pty'; import { spawn } from 'node-pty';
import json from './secrets/config.json' with { type: 'json' }; // import json from './secrets/config.json' with { type: 'json' };
const __dirname = path.dirname(fileURLToPath(import.meta.url)), const __dirname = path.dirname(fileURLToPath(import.meta.url));
PORT = process.env.PORT || 5164, const PORT = process.env.PORT || 5164;
app = express(); const app = express();
expressWs(app); // enable websockets for the app expressWs(app); // enable websockets for the app
// parse form data // parse form data
app.use(express.urlencoded({ extended: true })); app.use(express.urlencoded({ extended: true }));
app.use(express.json({ extended: true })); app.use(express.json({ extended: true }));
app.use('/node_modules', express.static('node_modules')); app.use('/node_modules', express.static('node_modules'));
// map of active sessions
const sessions = new Map();
// shell interface // shell interface
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.sendFile('shell.html', { root: path.join(__dirname, 'HTML') }); res.sendFile('shell.html', { root: path.join(__dirname, 'HTML') });
}); });
// websocket endpoint that spawns/attaches to a fish shell
// when a websocket is opened at /shell-ws, spawn a fish shell in a pty
app.ws('/shell-ws', (ws, req) => { app.ws('/shell-ws', (ws, req) => {
// spawn a fish shell using node-pty with a pseudo-terminal const { id } = req.query;
if (!id) {
ws.close();
return;
}
let session = sessions.get(id);
if (!session) {
const shell = spawn('su', ['-', 'ion606', '-s', '/usr/bin/fish'], { const shell = spawn('su', ['-', 'ion606', '-s', '/usr/bin/fish'], {
cols: 80, cols: 80,
rows: 24, rows: 24,
@@ -34,22 +41,44 @@ app.ws('/shell-ws', (ws, req) => {
env: process.env env: process.env
}); });
// send any data from the shell to the client session = { shell, clients: new Set() };
sessions.set(id, session);
shell.onData((data) => { shell.onData((data) => {
ws.send(JSON.stringify({ data })); for (const client of session.clients) {
client.send(JSON.stringify({ data }));
}
}); });
shell.onExit((e) => ws.send(JSON.stringify({ event: 'exit', code: e }))); shell.onExit((e) => {
for (const client of session.clients) {
client.send(JSON.stringify({ event: 'exit', code: e }));
}
sessions.delete(id);
});
}
// when the client sends data, write it to the shell's stdin session.clients.add(ws);
ws.on('message', (msg) => shell.write(msg)); ws.on('message', (msg) => session.shell.write(msg));
// when the websocket closes, kill the shell ws.on('close', () => {
ws.on('close', () => shell.kill()); session.clients.delete(ws);
});
}); });
// endpoint used by the client to explicitly close a session
app.post('/kill-session', (req, res) => {
const { id } = req.query;
const session = sessions.get(id);
if (session) {
session.shell.kill();
sessions.delete(id);
}
res.end();
});
app.get('*', (req, res) => res.end()); app.get('*', (req, res) => res.end());
app.listen(PORT, '0.0.0.0', () =>
app.listen(PORT, '0.0.0.0', () => console.log('server listening on http://localhost:' + PORT)); console.log(`server listening on http://localhost:${PORT}`)
);