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">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shell</title>
<style>
body {
@@ -44,7 +43,6 @@
flex-grow: 1;
width: 100%;
overflow: hidden;
/* border: 1px solid #444; */
background: #000000;
border-radius: 5px;
height: 100%;
@@ -52,7 +50,6 @@
padding: 0;
}
/* For scrollbars */
::-webkit-scrollbar {
width: 10px;
}
@@ -65,80 +62,45 @@
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>
function fitTerminalToScreen(term) {
const container = document.querySelector('#output'); // terminal container
const charWidth = term._core._renderService.dimensions.actualCellWidth;
const charHeight = term._core._renderService.dimensions.actualCellHeight;
const sessionId =
sessionStorage.getItem("sessionId") || crypto.randomUUID();
sessionStorage.setItem("sessionId", sessionId);
console.log(term);
if (!charWidth || !charHeight) return;
function connect() {
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
const cols = Math.floor(container.offsetWidth / charWidth);
const rows = Math.floor(container.offsetHeight / charHeight);
term.onData((data) => ws.send(data));
console.log('Container height:', container.clientHeight);
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 => {
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);
case "exit":
term.write(
"\r\nConnection closed. Refreshing...\r\n"
);
setTimeout(
() => window.location.reload(),
2000
);
break;
default:
console.error(`Unknown event: ${data.event}`);
term.write(`\r\nUnknown event: ${data.event}\r\n`);
term.write(
`\r\nUnknown event: ${data.event}\r\n`
);
break;
}
} else {
@@ -146,25 +108,30 @@
}
});
// handle websocket closure
ws.addEventListener('close', event => {
term.write(`\r\nConnection closed with code ${event.code}\r\n`);
ws.addEventListener("close", () => {
setTimeout(connect, 1000);
});
}
// handle websocket errors
ws.addEventListener('error', () => {
term.write('\r\nConnection error. Please try again later.\r\n');
const term = new Terminal({
cursorBlink: true,
theme: {
background: "#000000",
foreground: "#ffffff",
cursor: "#00ff00",
},
});
window.addEventListener('resize', () => {
document.querySelector('.xterm-screen').style.width = `${window.innerWidth}px`;
document.querySelector('.xterm-screen').style.height = `${window.innerHeight}px`;
})
const outputContainer = document.querySelector("#output");
term.open(outputContainer);
const fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon);
fitAddon.fit();
connect();
window.addEventListener("beforeunload", () => {
navigator.sendBeacon(`/kill-session?id=${sessionId}`);
});
</script>
</body>
</html>
main.js
+46 -17
View File
@@ -3,30 +3,37 @@ import path from 'path';
import { fileURLToPath } from 'url';
import expressWs from 'express-ws';
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)),
PORT = process.env.PORT || 5164,
app = express();
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const PORT = process.env.PORT || 5164;
const app = express();
expressWs(app); // enable websockets for the app
// parse form data
app.use(express.urlencoded({ extended: true }));
app.use(express.json({ extended: true }));
app.use('/node_modules', express.static('node_modules'));
// map of active sessions
const sessions = new Map();
// shell interface
app.get('/', (req, res) => {
res.sendFile('shell.html', { root: path.join(__dirname, 'HTML') });
});
// when a websocket is opened at /shell-ws, spawn a fish shell in a pty
// websocket endpoint that spawns/attaches to a fish shell
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'], {
cols: 80,
rows: 24,
@@ -34,22 +41,44 @@ app.ws('/shell-ws', (ws, req) => {
env: process.env
});
// send any data from the shell to the client
session = { shell, clients: new Set() };
sessions.set(id, session);
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
ws.on('message', (msg) => shell.write(msg));
session.clients.add(ws);
ws.on('message', (msg) => session.shell.write(msg));
// when the websocket closes, kill the shell
ws.on('close', () => shell.kill());
ws.on('close', () => {
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.listen(PORT, '0.0.0.0', () => console.log('server listening on http://localhost:' + PORT));
app.listen(PORT, '0.0.0.0', () =>
console.log(`server listening on http://localhost:${PORT}`)
);