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