Add xterm itegration

* Move to TypeScript from legacy JavaScript
* Add support of xterm.js
* Hterm is still available for backward compatibility
This commit is contained in:
Iwasaki Yudai 2017-05-22 08:16:24 +09:00
parent d6c98866b9
commit 8803721f3d
40 changed files with 9051 additions and 124 deletions

View file

@ -1,95 +0,0 @@
(function() {
var httpsEnabled = window.location.protocol == "https:";
var args = window.location.search;
var url = (httpsEnabled ? 'wss://' : 'ws://') + window.location.host + window.location.pathname + 'ws';
var protocols = ["webtty"];
var autoReconnect = -1;
var openWs = function() {
var ws = new WebSocket(url, protocols);
var term;
var pingTimer;
ws.onopen = function(event) {
ws.send(JSON.stringify({ Arguments: args, AuthToken: gotty_auth_token,}));
pingTimer = setInterval(sendPing, 30 * 1000, ws);
hterm.defaultStorage = new lib.Storage.Memory();
term = new hterm.Terminal();
term.getPrefs().set("send-encoding", "raw");
term.onTerminalReady = function() {
var io = term.io.push();
io.onVTKeystroke = function(str) {
ws.send("1" + str);
};
io.sendString = io.onVTKeystroke;
io.onTerminalResize = function(columns, rows) {
ws.send(
"3" + JSON.stringify(
{
columns: columns,
rows: rows,
}
)
)
};
term.installKeyboard();
};
term.decorate(document.getElementById("terminal"));
};
ws.onmessage = function(event) {
data = event.data.slice(1);
switch(event.data[0]) {
case '1':
term.io.writeUTF8(window.atob(data));
break;
case '2':
// pong
break;
case '3':
term.setWindowTitle(data);
break;
case '4':
preferences = JSON.parse(data);
Object.keys(preferences).forEach(function(key) {
console.log("Setting " + key + ": " + preferences[key]);
term.getPrefs().set(key, preferences[key]);
});
break;
case '5':
autoReconnect = JSON.parse(data);
console.log("Enabling reconnect: " + autoReconnect + " seconds")
break;
}
};
ws.onclose = function(event) {
if (term) {
term.uninstallKeyboard();
term.io.showOverlay("Connection Closed", null);
}
clearInterval(pingTimer);
if (autoReconnect > 0) {
setTimeout(openWs, autoReconnect * 1000);
}
};
}
var sendPing = function(ws) {
ws.send("2");
}
openWs();
})()

7
resources/index.css Normal file
View file

@ -0,0 +1,7 @@
html, body, #terminal {
background: black;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}

View file

@ -2,13 +2,16 @@
<html>
<head>
<title>{{ .title }}</title>
<style>body, #terminal {position: absolute; height: 100%; width: 100%; margin: 0px;}</style>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./css/xterm.css" />
<link rel="stylesheet" href="./css/xterm_customize.css" />
<script src="/js/hterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script src="./js/hterm.js"></script>
<script src="./auth_token.js"></script>
<script src="./js/gotty.js"></script>
<script src="./config.js"></script>
<script src="./js/bundle.js"></script>
</body>
</html>

View file

@ -0,0 +1,19 @@
.terminal {
font-family: "DejaVu Sans Mono", "Everson Mono", FreeMono, Menlo, Terminal, monospace;
}
.xterm-overlay {
font-family: "DejaVu Sans Mono", "Everson Mono", FreeMono, Menlo, Terminal, monospace;
border-radius: 15px;
font-size: xx-large;
color: black;
background: white;
opacity: 0.75;
padding: 0.2em 0.5em 0.2em 0.5em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
user-select: none;
transition: opacity 180ms ease-in;
}