File size: 1,773 Bytes
f1aa5a4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<html>
<head>
<title>SSH Terminal</title>
<link rel="stylesheet" href="/xterm.css" />
<script src="/xterm.js"></script>
<script src="/xterm-addon-fit.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
window.addEventListener('load', function() {
var terminalContainer = document.getElementById('terminal-container');
const term = new Terminal({ cursorBlink: true });
const fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon);
term.open(terminalContainer);
fitAddon.fit();
var socket = io() //.connect();
socket.on('connect', function() {
term.write('\r\n*** Connected to backend ***\r\n');
});
// Browser -> Backend
term.onKey(function (ev) {
socket.emit('data', ev.key);
});
// Backend -> Browser
socket.on('data', function(data) {
term.write(data);
});
socket.on('disconnect', function() {
term.write('\r\n*** Disconnected from backend ***\r\n');
});
}, false);
</script>
<style>
body {
font-family: helvetica, sans-serif, arial;
font-size: 1em;
color: #111;
}
h1 {
text-align: center;
}
#terminal-container {
width: 960px;
height: 600px;
margin: 0 auto;
padding: 2px;
}
#terminal-container .terminal {
background-color: #111;
color: #fafafa;
padding: 2px;
}
#terminal-container .terminal:focus .terminal-cursor {
background-color: #fafafa;
}
</style>
</head>
<body>
<h3>WebSSH</h3>
<div id="terminal-container"></div>
</body>
</html> |