VigibotDev/client.js

## client.js
var Term;

(function() {
    'use strict';

    var socket      = io.connect();

    window.addEventListener('load', function() {
        var element = document.getElementById('js-terminal'),
            cell    = createCell(element),
            size    = getSize(element, cell);

        Term        = new Terminal({
            screenKeys  : true,
            cursorBlink : false,
            debug       : true
        });

        Term.open(element);

        Term.on('data', function(data) {
            socket.emit('terminal-data', data);
        });

        Term.on('resize', function(size) {
            socket.emit('terminal-resize', size);
        });

        socket.on('terminal-data', function (data) {
            Term.write(data);
        });

        socket.on('terminal-resize', function (size) {
            Term.resize(size.cols, size.rows);
        });

        socket.emit('terminal-resize', size);

        window.addEventListener('resize', function() {
            var size = getSize(element, cell);
            socket.emit('terminal-resize', size);
        });
    });

    function getSize(element, cell) {
        var wSubs   = element.offsetWidth - element.clientWidth,
            w       = element.clientWidth - wSubs,

            hSubs   = element.offsetHeight - element.clientHeight,
            h       = element.clientHeight - hSubs,

            x       = cell.clientWidth,
            y       = cell.clientHeight,

            cols    = Math.max(Math.floor(w / x), 10),
            rows    = Math.max(Math.floor(h / y), 10),

            size    = {
                cols: cols,
                rows: rows
            };

        return size;
    }

    function createCell(element) {
        var cell            = document.createElement('div');

        cell.innerHTML      = '&nbsp';
        cell.style.position = 'absolute';
        cell.style.top      = '-1000px';

        element.appendChild(cell);

        return cell;
    }
})();

## index.html
<!doctype html>
<html>
    <head>
        <style>
        body {
            font-family: "Consolas";
        }
    </style>
    </head>
    <body>
        <div id=js-terminal></div>
        <script src=/socket.io/socket.io.js></script>
        <script src=/term.js></script>
        <script src=/client.js></script>
    </body>
</html>

## terminal.js
(function() {
    'use strict';

    var express     = require('express'),
        app         = express(),
        server      = require('http').createServer(app),
        io          = require('socket.io').listen(server),
        pty         = require('pty.js'),

        INFO_LOG_LEVEL  = 2;

    console.log('PID: ' + process.pid, '\nPORT: ' + 1515);
    server.listen(1515);

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

    io.set('log level', INFO_LOG_LEVEL);

    io.sockets.on('connection', function (socket) {
        var Terminal    = getTerm();

        Terminal.on('data', function(data) {
            socket.emit('terminal-data', data);
        });

        socket.on('terminal-data', function (data) {
            Terminal.write(data);
        });

        socket.on('terminal-resize', function (size) {
            Terminal.resize(size.cols, size.rows);
            socket.emit('terminal-resize', size);
        });
    });

    function getTerm() {
        var term        = pty.spawn('bash', [], {
            name: 'xterm-color',
            cwd : process.env.HOME,
            env : process.env
        });

        return term;
    }

})();
	var Term;

	(function() {
	'use strict';

	var socket = io.connect();

	window.addEventListener('load', function() {
	var element = document.getElementById('js-terminal'),
	cell = createCell(element),
	size = getSize(element, cell);

	Term = new Terminal({
	screenKeys : true,
	cursorBlink : false,
	debug : true
	});

	Term.open(element);

	Term.on('data', function(data) {
	socket.emit('terminal-data', data);
	});

	Term.on('resize', function(size) {
	socket.emit('terminal-resize', size);
	});

	socket.on('terminal-data', function (data) {
	Term.write(data);
	});

	socket.on('terminal-resize', function (size) {
	Term.resize(size.cols, size.rows);
	});

	socket.emit('terminal-resize', size);

	window.addEventListener('resize', function() {
	var size = getSize(element, cell);
	socket.emit('terminal-resize', size);
	});
	});

	function getSize(element, cell) {
	var wSubs = element.offsetWidth - element.clientWidth,
	w = element.clientWidth - wSubs,

	hSubs = element.offsetHeight - element.clientHeight,
	h = element.clientHeight - hSubs,

	x = cell.clientWidth,
	y = cell.clientHeight,

	cols = Math.max(Math.floor(w / x), 10),
	rows = Math.max(Math.floor(h / y), 10),

	size = {
	cols: cols,
	rows: rows
	};

	return size;
	}

	function createCell(element) {
	var cell = document.createElement('div');

	cell.innerHTML = '&nbsp';
	cell.style.position = 'absolute';
	cell.style.top = '-1000px';

	element.appendChild(cell);

	return cell;
	}
	})();
	<!doctype html>
	<html>
	<head>
	<style>
	body {
	font-family: "Consolas";
	}
	</style>
	</head>
	<body>
	<div id=js-terminal></div>
	<script src=/socket.io/socket.io.js></script>
	<script src=/term.js></script>
	<script src=/client.js></script>
	</body>
	</html>
	(function() {
	'use strict';

	var express = require('express'),
	app = express(),
	server = require('http').createServer(app),
	io = require('socket.io').listen(server),
	pty = require('pty.js'),

	INFO_LOG_LEVEL = 2;

	console.log('PID: ' + process.pid, '\nPORT: ' + 1515);
	server.listen(1515);

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

	io.set('log level', INFO_LOG_LEVEL);

	io.sockets.on('connection', function (socket) {
	var Terminal = getTerm();

	Terminal.on('data', function(data) {
	socket.emit('terminal-data', data);
	});

	socket.on('terminal-data', function (data) {
	Terminal.write(data);
	});

	socket.on('terminal-resize', function (size) {
	Terminal.resize(size.cols, size.rows);
	socket.emit('terminal-resize', size);
	});
	});

	function getTerm() {
	var term = pty.spawn('bash', [], {
	name: 'xterm-color',
	cwd : process.env.HOME,
	env : process.env
	});

	return term;
	}

	})();