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
+123 -156
View File
@@ -1,170 +1,137 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shell</title>
<style>
body {
font-family: monospace;
background: #000000;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
}
<head> .terminal-container {
<meta charset="utf-8"> background: #000000;
<meta name="viewport" content="width=device-width, initial-scale=1.0"> border-radius: 5px;
<title>Shell</title> display: flex;
<style> flex-direction: column;
body { align-items: center;
font-family: monospace; justify-content: flex-start;
background: #000000; gap: 1rem;
color: #ffffff; width: 100%;
display: flex; height: 100%;
flex-direction: column; margin: 0;
align-items: center; padding: 0;
justify-content: center; }
height: 100vh;
margin: 0;
padding: 0;
}
.terminal-container { .terminal-header {
background: #000000; font-size: 1.5rem;
border-radius: 5px; text-transform: uppercase;
display: flex; color: #00ff00;
flex-direction: column; margin: 0;
align-items: center; }
justify-content: flex-start;
gap: 1rem;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.terminal-header { .output {
font-size: 1.5rem; flex-grow: 1;
text-transform: uppercase; width: 100%;
color: #00ff00; overflow: hidden;
margin: 0; background: #000000;
} border-radius: 5px;
height: 100%;
margin: 0;
padding: 0;
}
.output { ::-webkit-scrollbar {
flex-grow: 1; width: 10px;
width: 100%; }
overflow: hidden;
/* border: 1px solid #444; */
background: #000000;
border-radius: 5px;
height: 100%;
margin: 0;
padding: 0;
}
/* For scrollbars */ ::-webkit-scrollbar-thumb {
::-webkit-scrollbar { background: #555;
width: 10px; }
}
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb:hover {
background: #555; background: #777;
} }
</style>
<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/addon-fit/lib/addon-fit.js"></script>
</head>
<body>
<div class="terminal-container">
<div class="output" id="output"></div>
</div>
<script>
const sessionId =
sessionStorage.getItem("sessionId") || crypto.randomUUID();
sessionStorage.setItem("sessionId", sessionId);
::-webkit-scrollbar-thumb:hover { function connect() {
background: #777; const protocol =
} location.protocol === "https:" ? "wss://" : "ws://";
</style> const ws = new WebSocket(
`${protocol}${location.host}/shell-ws?id=${sessionId}`
);
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" /> term.onData((data) => ws.send(data));
<script src="node_modules/@xterm/xterm/lib/xterm.js"></script>
<script src="node_modules/@xterm/addon-fit/lib/addon-fit.js"></script>
</head>
<body> ws.addEventListener("message", (event) => {
<div class="terminal-container"> const data = JSON.parse(event.data);
<div class="output" id="output"></div> if (data.event) {
</div> switch (data.event) {
case "exit":
term.write(
"\r\nConnection closed. Refreshing...\r\n"
);
setTimeout(
() => window.location.reload(),
2000
);
break;
default:
term.write(
`\r\nUnknown event: ${data.event}\r\n`
);
break;
}
} else {
term.write(data.data);
}
});
<script> ws.addEventListener("close", () => {
function fitTerminalToScreen(term) { setTimeout(connect, 1000);
const container = document.querySelector('#output'); // terminal container });
const charWidth = term._core._renderService.dimensions.actualCellWidth; }
const charHeight = term._core._renderService.dimensions.actualCellHeight;
console.log(term); const term = new Terminal({
if (!charWidth || !charHeight) return; cursorBlink: true,
theme: {
background: "#000000",
foreground: "#ffffff",
cursor: "#00ff00",
},
});
const outputContainer = document.querySelector("#output");
term.open(outputContainer);
// Calculate the number of columns and rows const fitAddon = new FitAddon.FitAddon();
const cols = Math.floor(container.offsetWidth / charWidth); term.loadAddon(fitAddon);
const rows = Math.floor(container.offsetHeight / charHeight); fitAddon.fit();
connect();
console.log('Container height:', container.clientHeight); window.addEventListener("beforeunload", () => {
console.log('Char height:', charHeight); navigator.sendBeacon(`/kill-session?id=${sessionId}`);
console.log('Rows calculated:', Math.floor(container.clientHeight / charHeight)); });
</script>
// Resize the terminal </body>
term.resize(cols, rows); </html>
}
</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);
if (data.event) {
switch (data.event) {
case 'exit':
term.write('\r\nConnection closed. Refreshing...\r\n');
ws.close();
setTimeout(() => window.location.reload(), 2000);
break;
default:
console.error(`Unknown event: ${data.event}`);
term.write(`\r\nUnknown event: ${data.event}\r\n`);
break;
}
} else {
term.write(data.data);
}
});
// handle websocket closure
ws.addEventListener('close', event => {
term.write(`\r\nConnection closed with code ${event.code}\r\n`);
});
// handle websocket errors
ws.addEventListener('error', () => {
term.write('\r\nConnection error. Please try again later.\r\n');
});
window.addEventListener('resize', () => {
document.querySelector('.xterm-screen').style.width = `${window.innerWidth}px`;
document.querySelector('.xterm-screen').style.height = `${window.innerHeight}px`;
})
const fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon);
fitAddon.fit();
</script>
</body>
</html>
main.js
+57 -28
View File
@@ -3,53 +3,82 @@ 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;
const shell = spawn('su', ['-', 'ion606', '-s', '/usr/bin/fish'], { if (!id) {
cols: 80, ws.close();
rows: 24, return;
cwd: process.env.HOME, }
env: process.env
let session = sessions.get(id);
if (!session) {
const shell = spawn('su', ['-', 'ion606', '-s', '/usr/bin/fish'], {
cols: 80,
rows: 24,
cwd: process.env.HOME,
env: process.env
});
session = { shell, clients: new Set() };
sessions.set(id, session);
shell.onData((data) => {
for (const client of session.clients) {
client.send(JSON.stringify({ data }));
}
});
shell.onExit((e) => {
for (const client of session.clients) {
client.send(JSON.stringify({ event: 'exit', code: e }));
}
sessions.delete(id);
});
}
session.clients.add(ws);
ws.on('message', (msg) => session.shell.write(msg));
ws.on('close', () => {
session.clients.delete(ws);
}); });
// send any data from the shell to the client
shell.onData((data) => {
ws.send(JSON.stringify({ data }));
});
shell.onExit((e) => ws.send(JSON.stringify({ event: 'exit', code: e })));
// when the client sends data, write it to the shell's stdin
ws.on('message', (msg) => shell.write(msg));
// when the websocket closes, kill the shell
ws.on('close', () => shell.kill());
}); });
// 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}`)
);