<!DOCTYPE html>
<html lang="en">
<head>
<title>Xterm</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="xterm.js/src/xterm.css" />
<link rel="stylesheet" href="xterm.js/addons/fullscreen/fullscreen.css" />
</head>
<body>
<div id="xterm"></div>
<script src="xterm.js/src/xterm.js" ></script>
<script src="xterm.js/addons/fit/fit.js" ></script>
<script src="xterm.js/addons/fullscreen/fullscreen.js" ></script>
<script>
var term;
var websocket = new WebSocket("ws://127.0.0.1:7703" );
websocket.binaryType = "arraybuffer";
function ab2str(buf) {
return String.fromCharCode.apply(null, new Uint8Array(buf));
}
websocket.onopen = function(evt) {
term = new Terminal({
screenKeys: true,
useStyle: true,
cursorBlink: true,
});
term.on('data', function(data) {
websocket.send(new TextEncoder().encode("\x00" + data));
});
term.on('resize', function(evt) {
websocket.send(new TextEncoder().encode("\x01" + JSON.stringify({cols: evt.cols, rows: evt.rows})))
});
term.on('title', function(title) {
document.title = title;
});
term.open(document.getElementById('xterm'));
term.fit();
websocket.onmessage = function(evt) {
if (evt.data instanceof ArrayBuffer) {
term.write(ab2str(evt.data.slice(1)));
} else {
alert(evt.data)
}
}
websocket.onclose = function(evt) {
term.write("Session terminated");
term.destroy();
}
websocket.onerror = function(evt) {
if (typeof console.log == "function") {
console.log(evt)
}
}
}
</script>
</body>
</html>