jaburns/index.html

## index.html
<!DOCTYPE html>
<html>
    <style>
        body { background: #fff; }
        #paper { background: #ccc; }
    </style>
    <body>
        <canvas id="paper" width="800" height="600"></canvas>
    </body>
    <script src="/socket.io/socket.io.js"></script>
    <script>

        var socket = io();
        var ctx = document.getElementById('paper').getContext('2d');

        window.onkeyup   = function(e) { socket.emit('msg input', {k:'up',   c:e.keyCode}); }
        window.onkeydown = function(e) { socket.emit('msg input', {k:'down', c:e.keyCode}); }

        socket.on('msg state', function(msg) {
            ctx.canvas.width = ctx.canvas.width;
            ctx.fillStyle = '#000';
            for (var k in msg.players) {
                ctx.fillRect(msg.players[k].x, msg.players[k].y, 10, 10);
            }
        });

    </script>
</html>

## index.js
// npm install express socket.io
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 1337;
app.get('/', function(req, res) { res.sendFile(__dirname + '/index.html'); });
http.listen(port, function() { console.log('Listening on ' + port); });


var INCOMING_LAG = 120;
var OUTGOING_LAG = 120;


var state = {
    time: 0,
    players: {}
};

function handleInput(id, data) {
    if (! state.players.hasOwnProperty(id)) {
        state.players[id] = {x:800*Math.random(), y:600*Math.random(), vx:0, vy:0};
    }

    switch (parseInt(data.c)) {
        case 37: state.players[id].vx = data.k == 'down' ? -10 : 0; break;
        case 38: state.players[id].vy = data.k == 'down' ? -10 : 0; break;
        case 39: state.players[id].vx = data.k == 'down' ?  10 : 0; break;
        case 40: state.players[id].vy = data.k == 'down' ?  10 : 0; break;
    }
}


var sockets = [];

io.on('connection', function(socket) {
    console.log ('Hi '+socket.id);
    sockets.push(socket);
    socket.on('msg input', function(data) {
        setTimeout(handleInput.bind(null, socket.id, data), INCOMING_LAG);
    });
    socket.on('disconnect', function() {
        sockets.splice(sockets.indexOf(socket), 1);
        console.log ('Bye '+socket.id);
    });
});


setInterval(function() {
    state.time++;
    for (var k in state.players) {
        state.players[k].x += state.players[k].vx;
        state.players[k].y += state.players[k].vy;
    }

    var stateNow = JSON.parse(JSON.stringify(state));
    setTimeout(function() {
        for (var i=0; i < sockets.length; ++i) {
            sockets[i].volatile.emit('msg state', stateNow);
        }
    },OUTGOING_LAG);
},
50);

## package.json
{
    "dependencies": {
        "express": "4.11.x",
        "socket.io": "1.3.x"
    }
}
	<!DOCTYPE html>
	<html>
	<style>
	body { background: #fff; }
	#paper { background: #ccc; }
	</style>
	<body>
	<canvas id="paper" width="800" height="600"></canvas>
	</body>
	<script src="/socket.io/socket.io.js"></script>
	<script>

	var socket = io();
	var ctx = document.getElementById('paper').getContext('2d');

	window.onkeyup = function(e) { socket.emit('msg input', {k:'up', c:e.keyCode}); }
	window.onkeydown = function(e) { socket.emit('msg input', {k:'down', c:e.keyCode}); }

	socket.on('msg state', function(msg) {
	ctx.canvas.width = ctx.canvas.width;
	ctx.fillStyle = '#000';
	for (var k in msg.players) {
	ctx.fillRect(msg.players[k].x, msg.players[k].y, 10, 10);
	}
	});

	</script>
	</html>
	// npm install express socket.io
	var app = require('express')();
	var http = require('http').Server(app);
	var io = require('socket.io')(http);
	var port = process.env.PORT \|\| 1337;
	app.get('/', function(req, res) { res.sendFile(__dirname + '/index.html'); });
	http.listen(port, function() { console.log('Listening on ' + port); });



	var INCOMING_LAG = 120;
	var OUTGOING_LAG = 120;



	var state = {
	time: 0,
	players: {}
	};

	function handleInput(id, data) {
	if (! state.players.hasOwnProperty(id)) {
	state.players[id] = {x:800Math.random(), y:600Math.random(), vx:0, vy:0};
	}

	switch (parseInt(data.c)) {
	case 37: state.players[id].vx = data.k == 'down' ? -10 : 0; break;
	case 38: state.players[id].vy = data.k == 'down' ? -10 : 0; break;
	case 39: state.players[id].vx = data.k == 'down' ? 10 : 0; break;
	case 40: state.players[id].vy = data.k == 'down' ? 10 : 0; break;
	}
	}



	var sockets = [];

	io.on('connection', function(socket) {
	console.log ('Hi '+socket.id);
	sockets.push(socket);
	socket.on('msg input', function(data) {
	setTimeout(handleInput.bind(null, socket.id, data), INCOMING_LAG);
	});
	socket.on('disconnect', function() {
	sockets.splice(sockets.indexOf(socket), 1);
	console.log ('Bye '+socket.id);
	});
	});



	setInterval(function() {
	state.time++;
	for (var k in state.players) {
	state.players[k].x += state.players[k].vx;
	state.players[k].y += state.players[k].vy;
	}

	var stateNow = JSON.parse(JSON.stringify(state));
	setTimeout(function() {
	for (var i=0; i < sockets.length; ++i) {
	sockets[i].volatile.emit('msg state', stateNow);
	}
	},OUTGOING_LAG);
	},
	50);
	{
	"dependencies": {
	"express": "4.11.x",
	"socket.io": "1.3.x"
	}
	}