|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Jumpserver web terminal</title>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
padding-bottom: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.terminal {
|
|
|
|
|
border: #000 solid 5px;
|
|
|
|
|
font-family: "Monaco", "DejaVu Sans Mono", "Liberation Mono", monospace;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: #f0f0f0;
|
|
|
|
|
background: #000;
|
|
|
|
|
width: 600px;
|
|
|
|
|
box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.reverse-video {
|
|
|
|
|
color: #000;
|
|
|
|
|
background: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div id="term">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="application/javascript" src="/static/js/jquery-2.1.1.js">
|
|
|
|
|
</script>
|
|
|
|
|
<script type="application/javascript" src="/static/js/term.js">
|
|
|
|
|
</script>
|
|
|
|
|
<script type="application/javascript">
|
|
|
|
|
function WSSHClient() {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
WSSHClient.prototype.connect = function(options) {
|
|
|
|
|
var endpoint = '{{ web_terminal_uri }}';
|
|
|
|
|
|
|
|
|
|
if (window.WebSocket) {
|
|
|
|
|
this._connection = new WebSocket(endpoint);
|
|
|
|
|
}
|
|
|
|
|
else if (window.MozWebSocket) {
|
|
|
|
|
this._connection = MozWebSocket(endpoint);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
options.onError('WebSocket Not Supported');
|
|
|
|
|
return ;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this._connection.onopen = function() {
|
|
|
|
|
options.onConnect();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this._connection.onmessage = function (evt) {
|
|
|
|
|
var data = JSON.parse(evt.data.toString());
|
|
|
|
|
if (data.error !== undefined) {
|
|
|
|
|
options.onError(data.error);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
options.onData(data.data);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this._connection.onclose = function(evt) {
|
|
|
|
|
options.onClose();
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
WSSHClient.prototype.send = function(data) {
|
|
|
|
|
this._connection.send(JSON.stringify({'data': data}));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function openTerminal(options) {
|
|
|
|
|
var client = new WSSHClient();
|
|
|
|
|
var term = new Terminal(80, 24, function(key) {
|
|
|
|
|
client.send(key);
|
|
|
|
|
});
|
|
|
|
|
term.open();
|
|
|
|
|
$('.terminal').detach().appendTo('#term');
|
|
|
|
|
term.resize(80, 24);
|
|
|
|
|
term.write('Connecting...');
|
|
|
|
|
client.connect($.extend(options, {
|
|
|
|
|
onError: function(error) {
|
|
|
|
|
term.write('Error: ' + error + '\r\n');
|
|
|
|
|
},
|
|
|
|
|
onConnect: function() {
|
|
|
|
|
// Erase our connecting message
|
|
|
|
|
term.write('\r');
|
|
|
|
|
},
|
|
|
|
|
onClose: function() {
|
|
|
|
|
term.write('Connection Reset By Peer');
|
|
|
|
|
},
|
|
|
|
|
onData: function(data) {
|
|
|
|
|
term.write(data);
|
|
|
|
|
}
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type='application/javascript'>
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
var options = {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$('#ssh').show();
|
|
|
|
|
openTerminal(options);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
