A tty.js frontend lecserélése xterm.js-re

Tags: ,

0

A tty.js egy webes terminálemulátor, szerver és kliensoldali technológia egyben. A frontend részét a term.js biztosítja, ami elég koros. 2013 óta nem történt nagy fejlesztés benne, néhány napja ki is került rá a “no longer maintained” figyelmeztetés. Számomra a legnagyobb hátránya, hogy a magyar billentyűzetkiosztás támogatása hiányzik, a speciális karakterek bevitele csak ASCII kóddal lehetséges. Viszont ezt a frontendet könnyen le lehet cserélni a frissebb xterm.js-re.

A tty.js szerveroldali részével nincs gond, nyugodtan telepítsük úgy, ahogy van:

npm install tty.js

A Githubon lévő leírás alapján gyorsan beüzemelhetjük, a frontend rész a static mappából kerül kiszolgálásra. A frontend cseréjéhez az itt lévő index.html-t kell átalakítanunk. Az egyszerűség kedvéért klónozzuk az egész xterm.js-t ebbe a static könyvtárba:

cd ~/node_modules/tty.js/static
git clone https://github.com/sourcelair/xterm.js.git xterm

Frissítés: az ed1a31d1 commit óta le kell fordítani az xterm.js-t, és az src/xterm.js helyett a build/xterm.js-t kell használni.

Ezután írjuk át a tty.js index.html fájlját, hogy az xterm.js libeket használja, tudunk lesni az xterm.js demóból:

<!doctype html>
<head>
  <title>xterm.js</title>
  <link rel="stylesheet" href="xterm/src/xterm.css">
  <link rel="stylesheet" href="xterm/style.css">
  <script src="socket.io/socket.io.js"></script>
  <script src="xterm/src/xterm.js"></script>
  <script src="xterm/addons/fit/fit.js"></script>
  <script src="main.js" defer></script>
</head>
<body>
  <h1>xterm</h1>
  <div id="terminal-container"></div>
</body>

Az xterm.js demóval érkező main.js használhatatlan, csak félrevezeti az embert, hogy lekezeli az entert és az egyéb billentyűket. Viszont sokat leshetünk a term.js Github oldaláról, mert szerencsére az xterm.js visszafele kompatibilis. Ennyi elég egy alapvetően működő main.js-hez:

var terminalContainer = document.getElementById('terminal-container'),
    term = new Terminal(),
    socket,
    termid;

term.open(terminalContainer);
term.fit();

if (document.location.pathname) {
  var parts = document.location.pathname.split('/')
    , base = parts.slice(0, parts.length - 1).join('/') + '/'
    , resource = base.substring(1) + 'socket.io';

  socket = io.connect(null, { resource: resource });
} else {
  socket = io.connect();
}

var cols=80,
    rows=24;                   

socket.emit('create', cols, rows, function(err, data) {
  if (err) return self._destroy();
  self.pty = data.pty;
  self.id = data.id;
  termid = self.id;
  term.emit('open tab', self);
});

term.writeln('Welcome to xterm.js');
term.writeln('Connecting to websocket...');

term.on('data', function(data) {
  socket.emit('data', termid, data);
});

term.on('resize', function(data) {
  socket.emit('resize', termid, term.cols, term.rows);
});

socket.on('connect', function() {
  term.writeln('Connected.');
  term.writeln('');
});

socket.on('data', function(id, data) {
  term.write(data);
});

A fenti módosításokkal kapunk egy egész jó webes terminált, de természetesen lesznek hibái. Az átméretezést egyáltalán nem kezeli még, és a hosszú prompt miatt megtörő sorok is zavaróak. Ha teszünk rá egy webfontot, akkor egy egész szép terminált kapunk.

Hozzászólás írása

(kötelező)
(kötelező)