92 lines
2.9 KiB
HTML
92 lines
2.9 KiB
HTML
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2.2.0/dist/socket.io.js"> </script>
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/xterm.css" />
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/addons/fullscreen/fullscreen.css">
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/xterm.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/addons/fit/fit.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/addons/attach/attach.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/addons/fullscreen/fullscreen.js"></script>
|
||
|
|
<style>
|
||
|
|
#terminal-container .terminal.xterm {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#terminal-container .xterm-viewport {
|
||
|
|
height: 100% !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="terminal" style="height: 100%;"></div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
Terminal.applyAddon(fit);
|
||
|
|
Terminal.applyAddon(attach);
|
||
|
|
Terminal.applyAddon(fullscreen);
|
||
|
|
var term = new Terminal({
|
||
|
|
cursorBlink: true,
|
||
|
|
screenKeys: true
|
||
|
|
});
|
||
|
|
term.open(document.getElementById('terminal'));
|
||
|
|
term.toggleFullScreen();
|
||
|
|
term.fit();
|
||
|
|
|
||
|
|
var cmd = ''
|
||
|
|
term.on('data', (data) => {
|
||
|
|
if (data =='\r') {
|
||
|
|
term.writeln(data)
|
||
|
|
if(cmd.startsWith('/')){
|
||
|
|
args = cmd.split(' ');
|
||
|
|
cmd = args[0].substr(1);
|
||
|
|
switch(cmd){
|
||
|
|
case "connect":
|
||
|
|
if(args[1]){
|
||
|
|
newcon(args[1])
|
||
|
|
} else {
|
||
|
|
newcon('/main')
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case "disconnect":
|
||
|
|
socket.close();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
socket && socket.emit('webmsg', {cmd});
|
||
|
|
}
|
||
|
|
cmd = ''
|
||
|
|
} else {
|
||
|
|
cmd += data;
|
||
|
|
term.write(data)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function newcon(address){
|
||
|
|
socket = io(address,{
|
||
|
|
path: '/ws',
|
||
|
|
transports: ['websocket']
|
||
|
|
});
|
||
|
|
socket.on('connect', function(){
|
||
|
|
term.writeln('connect')
|
||
|
|
socket.emit('webclient',{})
|
||
|
|
});
|
||
|
|
socket.on('message', function(data){
|
||
|
|
for (const line of JSON.stringify(data, undefined, 4).split('\n')){
|
||
|
|
term.writeln(line);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
socket.on('disconnect', function(){
|
||
|
|
term.reset();
|
||
|
|
term.writeln('disconnect')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
window.onresize = function() {
|
||
|
|
term.fit();
|
||
|
|
term.scrollToBottom();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|