tera/public/index.html

92 lines
2.9 KiB
HTML
Raw Normal View History

<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>