xterm.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console</title>
<link rel="stylesheet" href="xterm.css"/>
<link rel="stylesheet" href="bootstrap.css"/>
<link rel="stylesheet" href="addons/fullscreen/fullscreen.css"/>
</head>
<body>
<div class="container">
<form class="form-signin" role="form">
<div class="form-group" style="margin-top: 20px;">
<label for="host">Host:</label>
<input id="host" class="form-control" placeholder="127.0.0.1:2375" value="127.0.0.1:2375">
</div>
<div class="form-group">
<label for="container">Container:</label>
<input id="container" class="form-control" placeholder="container name or id" value="redis">
</div>
<div class="form-group">
<label for="instance">Instance:</label>
<div class="input-group">
<input id="instance" class="form-control" disabled placeholder="exec instance id">
<span class="input-group-btn">
<button id="getit" class="btn btn-success" type="button" onclick="getInstanceId(this)">GET IT</button>
</span>
</div>
</div>
<div class="form-group">
<label for="instance">Shell:</label>
<input id="cmd" class="form-control" placeholder="/bin/bash" value="/bin/bash">
</div>
<div class="form-group">
<div class="btn-group btn-group-justified">
<a id="oc" href="#" class="disabled btn btn-primary" onclick="openWs(this)">Connect</a>
<a id="cc" href="#" class="btn btn-danger" onclick="closeWs()">Disconnect</a>
</div>
</div>
</form>
<div id="bash"></div>
</div> <!-- /container -->
<script src="jquery.min.js"></script>
<script src="xterm.js" type="text/javascript"></script>
<script src="addons/attach/attach.js"></script>
<script src="addons/fit/fit.js"></script>
<script src="addons/fullscreen/fullscreen.js"></script>
<script>
function closeWs() {
if (socket !== null) {
socket.close();
}
if (term !== null) {
term.destroy();
}
enableGetInstance(true);
}
function getInstanceId(link) {
if ($(link).hasClass("disabled")) {
return
}
var host = $("#host").val();
var container = $("#container").val();
var cmd = $("#cmd").val();
console.log("host=" + host + ", container=" + container);
$.get("/exec/id", {"host": host, "container": container, "cmd": cmd},
function (data) {
console.log("Loaded: " + data);
var id = JSON.parse(data)["Id"];
$("#instance").val(id);
if (id.length === 64) {
enableConnect(true);
enableGetInstance(false);
}
}
);
}
function enableConnect(bl) {
if (bl) {
$("#oc").removeClass('disabled');
}
else {
$("#oc").addClass('disabled');
}
}
function enableGetInstance(bl) {
if (bl) {
$("#getit").removeClass('disabled');
}
else {
$("#getit").addClass('disabled');
}
}
function openWs(link) {
if ($(link).hasClass("disabled")) {
return
}
var host = $("#host").val();
var id = $("#instance").val();
var sock = new WebSocket("ws://" + window.location.host + "/exec/ws?id=" + id + "&host=" + host);
enableConnect(false);
sock.onerror = function (e) {
console.log("socket error", e);
};
sock.onopen = function (e) {
var term = new Terminal({
rows: 20,
useStyle: true,
screenKeys: true
});
term.open(document.getElementById("bash"));
term.on('title', function (title) {
document.title = title;
});
term.on('data', function (data) {
sock.send(data);
});
sock.onmessage = function (e) {
term.write(e.data);
};
window.socket = sock;
window.term = term;
};
}
</script>
</body>
</html>
