Add terminado.js, an addon for connecting to Terminado backends
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"name": "xterm.terminado",
|
||||||
|
"main": "terminado.js",
|
||||||
|
"private": true
|
||||||
|
}
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
Using Terminado with Xterm.js
|
|
||||||
=============================
|
|
||||||
|
|
||||||
Xterm.js is a very flexible system, and as such can be mapped to work with a wide variety of websocket/terminal backends. [Terminado](https://github.com/takluyver/terminado) is one such backend written in Python using `Tornado` as the underlying web framework. This directory shows a more-or-less barebones example of integrating `Terminado` and `Xterm.js`. To do so requires some small edits to `Xterm.js`'s `attach.js` to change the websocket communication format. Briefly, `Terminado` wraps messages in arrays with an element denoting what kind of data it holds, and so rather than simply sending user-typed data directly, one sends `['stdin', data]`.
|
|
||||||
|
|
||||||
To run this example, first install Terminado via `pip install terminado`, then simply run `python ./app.py` and connect to http://localhost:8000 to open a shell on localhost.
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
"""A single common terminal for all websockets.
|
|
||||||
"""
|
|
||||||
import tornado.web
|
|
||||||
from tornado.ioloop import IOLoop
|
|
||||||
from terminado import TermSocket, SingleTermManager
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
|
||||||
term_manager = SingleTermManager(shell_command=['bash'])
|
|
||||||
handlers = [
|
|
||||||
(r"/websocket", TermSocket, {'term_manager': term_manager}),
|
|
||||||
(r"/()", tornado.web.StaticFileHandler, {'path':'index.html'}),
|
|
||||||
(r"/terminado_attach.js()", tornado.web.StaticFileHandler, {'path':'terminado_attach.js'}),
|
|
||||||
]
|
|
||||||
app = tornado.web.Application(handlers, static_path="../dist/")
|
|
||||||
app.listen(8010)
|
|
||||||
IOLoop.current().start()
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Terminado Xterm.js example page</title>
|
|
||||||
<style>
|
|
||||||
html {
|
|
||||||
background: #555;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#terminal-container {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
z-index: 255;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<link rel="stylesheet" href="/static/xterm.css"/>
|
|
||||||
<script src="/static/xterm.js"></script>
|
|
||||||
<script src="/terminado_attach.js"></script>
|
|
||||||
<script>
|
|
||||||
var term,
|
|
||||||
charWidth,
|
|
||||||
charHeight;
|
|
||||||
|
|
||||||
// This chunk of code gratefully stolen/adapted from fit.js
|
|
||||||
function calculate_character_dimensions() {
|
|
||||||
subjectRow = term.rowContainer.firstElementChild;
|
|
||||||
contentBuffer = subjectRow.innerHTML;
|
|
||||||
|
|
||||||
subjectRow.style.display = 'inline';
|
|
||||||
subjectRow.innerHTML = 'W';
|
|
||||||
charWidth = subjectRow.getBoundingClientRect().width;
|
|
||||||
subjectRow.style.display = '';
|
|
||||||
charHeight = parseInt(subjectRow.offsetHeight);
|
|
||||||
subjectRow.innerHTML = contentBuffer;
|
|
||||||
}
|
|
||||||
|
|
||||||
function createTerminal(websocket_url) {
|
|
||||||
var terminalContainer = document.getElementById('terminal-container');
|
|
||||||
|
|
||||||
// Clean terminal
|
|
||||||
while (terminalContainer.children.length) {
|
|
||||||
terminalContainer.removeChild(terminalContainer.children[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
term = new Terminal({
|
|
||||||
cursorBlink: true
|
|
||||||
});
|
|
||||||
|
|
||||||
protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
|
|
||||||
socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + websocket_url;
|
|
||||||
|
|
||||||
term.open(terminalContainer);
|
|
||||||
var socket = new WebSocket(socketURL);
|
|
||||||
socket.onopen = function() {
|
|
||||||
term.attach(socket);
|
|
||||||
term._initialized = true;
|
|
||||||
|
|
||||||
terminalContainer.style.width = '100vw';
|
|
||||||
terminalContainer.style.height = '100vh';
|
|
||||||
calculate_character_dimensions();
|
|
||||||
window.onresize = function() {
|
|
||||||
cols = Math.floor(terminalContainer.getBoundingClientRect().width/charWidth);
|
|
||||||
rows = Math.floor(terminalContainer.getBoundingClientRect().height/charHeight);
|
|
||||||
term.resize(cols, rows);
|
|
||||||
}
|
|
||||||
window.onresize()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onload = function() {
|
|
||||||
// Connect to Terminado, listening on /websocket
|
|
||||||
createTerminal('/websocket')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="terminal-container"></div>
|
|
||||||
</pre>
|
|
||||||
</body>
|
|
||||||
Reference in New Issue
Block a user