Node.JS + Socket.IO + 10 minutes = Chat

app.js

/**
 * Module dependencies.
 */

var express = require('express')
  , io = require('socket.io');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyDecoder());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.staticProvider(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); 
});

app.configure('production', function(){
  app.use(express.errorHandler()); 
});

// Routes

app.get('/', function(req, res){
  res.render('index', {
    title: 'Express'
  });
});

// Only listen on $ node app.js

if (!module.parent) {
  app.listen(8888);
  console.log("Express server listening on port %d", app.address().port)
}

var socket = io.listen(app);
socket.on('connection', function(client){
  client.send("Server: You're connected!\n=> The first thing you type will be your screen name.");

  var user;
  client.on('message', function(data){
    if (!user) {
      user = data;
      socket.broadcast(user + ' has joined.');
      return;
    }

    socket.broadcast(user + ": " + data);
  });
});

commands.sh

# requires
#   node v0.3.7
#   express 2.0.0pre
#   connect 0.5.7
#   jade 0.6.3      

$ express chat
$ cd chat
# edit files
$ node app.js

index.jade

h1 Chat app in 64LOC!
pre#log
form#input
  input

layout.jade

!!!
html
  head
    title= title
    script(src="/socket.io/socket.io.js")
    script(src="/javascripts/site.js")
    link(rel='stylesheet', href='/stylesheets/style.css')
  body!= body

site.js

document.addEventListener('DOMContentLoaded', function(){

  var log = document.getElementById('log'),
    , form = document.getElementById('input')
    , input = form.children[0];

  input.focus();

  form.addEventListener('submit', function(event){
    event.preventDefault();
    socket.send(input.value);
    input.value = '';
    input.focus();
  }, false);
  
  socket = new io.Socket('localhost', {port: 8888});
  socket.connect();
  socket.on('message', function(data){
      log.innerHTML = log.innerHTML + data + "\n";
      log.scrollTop = log.scrollHeight;
  });  

}, false);

style.css

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

#input {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: solid 1px;
	background: #ccc;
	padding-left: 10px;
	height: 40px;
}

h1 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #454545;
	color: #fff;
	margin: 0;
	padding: 0.25em;
	height: 38px;
}

#log {
	position: absolute;
	background: #f0f0f0;
	top: 38px;
	left: 0px;
	right: 0px;
	bottom: 27px;
	padding: 1em;
	overflow: auto;
}

#input input {
	width: 98%;
	font-size: 20px;
	margin-top: 5px;
}