Enabling colors in term.js

I am using term.js for emulating a terminal in the web browser via JavaScript and Node.js.

I have already setup the basic implementation and I can connect to both local as well as remote host (I use node ssh2 to connect to a remote host). Everything works as expected, except that it’s black and white (black background, white text).

I have the following code in the client which is as per the example in the repository. Should I add some extra configuration to enable colors?

var term = new Terminal({
  colors: Terminal.colors, // This alone doesnt seem to work
  cols: 80,
  rows: 24,
  useStyle: true,
  screenKeys: true,
  cursorBlink: true
});

JavaScript
​x
 
var term = new Terminal({
  colors: Terminal.colors, // This alone doesnt seem to work
  cols: 80,
  rows: 24,
  useStyle: true,
  screenKeys: true,
  cursorBlink: true
});
​

Answer

Color works for me. Here’s my test setup on Ubuntu:

Install dependencies first: npm install express socket.io ssh2 term.js

Install the colortest package on the remote server (that you’re ssh’ing into): sudo apt-get install colortest -y

server.js:

var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

var term = require('term.js');
var ssh = require('ssh2');

server.listen(8000);

app.use(express.static(__dirname + '/public'));
app.use(term.middleware());

io.on('connection', function (socket) {
  var conn = new ssh();
  conn.on('ready', function() {
    socket.emit('data', 'n*** SSH CONNECTION ESTABLISHED ***n');
    conn.exec('env TERM=xterm-256color colortest-256', function(err, stream) {
      if (err)
        return socket.emit('data', 'n*** SSH EXEC ERROR: ' + err.message + ' ***n');
      stream.on('data', function(d) {
        socket.emit('data', d.toString('binary'));
      }).on('close', function() {
        conn.end();
      });
    });
  }).on('close', function() {
    socket.emit('data', 'n*** SSH CONNECTION CLOSED ***n');
  }).connect({
    host: '192.168.100.105',
    port: 22,
    username: 'foo',
    password: 'barbaz',
  });
});

JavaScript
 
var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
​
var term = require('term.js');
var ssh = require('ssh2');
​
server.listen(8000);
​
app.use(express.static(__dirname + '/public'));
app.use(term.middleware());
​
io.on('connection', function (socket) {
  var conn = new ssh();
  conn.on('ready', function() {
    socket.emit('data', 'n*** SSH CONNECTION ESTABLISHED ***n');
    conn.exec('env TERM=xterm-256color colortest-256', function(err, stream) {
      if (err)
        return socket.emit('data', 'n*** SSH EXEC ERROR: ' + err.message + ' ***n');
      stream.on('data', function(d) {
        socket.emit('data', d.toString('binary'));
      }).on('close', function() {
        conn.end();
      });
    });
  }).on('close', function() {
    socket.emit('data', 'n*** SSH CONNECTION CLOSED ***n');
  }).connect({
    host: '192.168.100.105',
    port: 22,
    username: 'foo',
    password: 'barbaz',
  });
});
​

public/client.htm:

<html>
  <head>
    <title>WebTerm</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/term.js"></script>
    <script>
      window.addEventListener('load', function() {
        var socket = io.connect();
        socket.on('connect', function() {
          var term = new Terminal({
            cols: 250,
            rows: 100,
            convertEol: true,
            useStyle: true,
            cursorBlink: true,
            screenKeys: true
          });

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

          term.on('title', function(title) {
            document.title = title;
          });

          term.open(document.body);

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

          socket.on('disconnect', function() {
            term.destroy();
          });
        });
      }, false);
    </script>
  </head>
  <body>
  </body>
</html>

JavaScript
 
<html>
  <head>
    <title>WebTerm</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/term.js"></script>
    <script>
      window.addEventListener('load', function() {
        var socket = io.connect();
        socket.on('connect', function() {
          var term = new Terminal({
            cols: 250,
            rows: 100,
            convertEol: true,
            useStyle: true,
            cursorBlink: true,
            screenKeys: true
          });
​
          term.on('data', function(data) {
            socket.emit('data', data);
          });
​
          term.on('title', function(title) {
            document.title = title;
          });
​
          term.open(document.body);
​
          socket.on('data', function(data) {
            term.write(data);
          });
​
          socket.on('disconnect', function() {
            term.destroy();
          });
        });
      }, false);
    </script>
  </head>
  <body>
  </body>
</html>
​

Execute node server.js and then visit http://localhost:8000/client.htm in your browser. You should see something like this.

Advertisement

Answer