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
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);
});
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.
