Add terminado.js, an addon for connecting to Terminado backends

2026-08-05 13:43:48 -07:00 · 2016-10-07 13:33:10 -07:00
parent 8fd350f0fc
commit fe54da34f8
5 changed files with 5 additions and 111 deletions
@@ -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>