drampelt/chat.js

## chat.js
var http = require('http'),
    sys  = require('util'),
    fs   = require('fs'),
    io   = require('socket.io');

var server = http.createServer(function(request, response) {
  response.writeHead(200, {
    'Content-Type': 'text/html'
  });

  var rs = fs.createReadStream(__dirname + '/template.html');
  sys.pump(rs, response);

});

var io = require('socket.io').listen(server);

server.listen(2828);

io.sockets.on('connection', function(socket){

	var username;

	socket.send('Welcome to socket.io chat!');
	socket.send('Please input your username:');

	socket.on('message', function(message){
		if(!username){
			username = message;
			socket.send("Welcome, " + username + "!");
			io.sockets.send(username + " has joined the chat.");
			return;
		}

		io.sockets.send(username + ': ' + message);
	});

	socket.on('disconnect', function(){
		io.sockets.send(username + " has left the chat.");
	});
});


## template.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chat</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var entry_el = $('#entry');
        var socket = io.connect("http://mc.drmc.ca:2828");
        console.log('connecting...');
        socket.on('connect', function() {
          console.log('connect');
        });
        socket.on('message', function(data) {
		  console.log(data);
          var fixeddata = data.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
          $('#log ul').append('<li>' + fixeddata + '</li>');
          window.scrollBy(0, 1000000000000000);
          entry_el.focus();
        });

        entry_el.keypress(function(event) {
          if (event.keyCode != 13) return;
          var msg = entry_el.attr('value');
          if (msg) {
            socket.send(msg);
            entry_el.attr('value', '');
          }
        });

      });
    </script>
    <style type="text/css">
      body {
        background-color: #666;
        color: fff;
        font-size: 14px;
        margin: 0;
        padding: 0;
        font-family: Helvetica, Arial, Sans-Serif;
      }
      #log {
        margin-bottom: 100px;
        width: 100%;
      }
      #log ul {
        padding: 0;
        margin: 0;
      }
      #log ul li {
        list-style-type: none;
      }
      #console {
        background-color: black;
        color: white;
        border-top:1px solid white;
        position: fixed;
        bottom: 0;
        width: 100%;
        font-size: 18px;
      }
      #console input {
        width: 100%;
        background-color: inherit;
        color: inherit;
        font-size: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Chat</h1>
    <div id="log"><ul></ul></div>
    <div id="console">
      <input type="text" id="entry" />
    </div>
  </body>
</html>
	var http = require('http'),
	sys = require('util'),
	fs = require('fs'),
	io = require('socket.io');

	var server = http.createServer(function(request, response) {
	response.writeHead(200, {
	'Content-Type': 'text/html'
	});

	var rs = fs.createReadStream(__dirname + '/template.html');
	sys.pump(rs, response);

	});

	var io = require('socket.io').listen(server);

	server.listen(2828);

	io.sockets.on('connection', function(socket){

	var username;

	socket.send('Welcome to socket.io chat!');
	socket.send('Please input your username:');

	socket.on('message', function(message){
	if(!username){
	username = message;
	socket.send("Welcome, " + username + "!");
	io.sockets.send(username + " has joined the chat.");
	return;
	}

	io.sockets.send(username + ': ' + message);
	});

	socket.on('disconnect', function(){
	io.sockets.send(username + " has left the chat.");
	});
	});

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Chat</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	var entry_el = $('#entry');
	var socket = io.connect("http://mc.drmc.ca:2828");
	console.log('connecting...');
	socket.on('connect', function() {
	console.log('connect');
	});
	socket.on('message', function(data) {
	console.log(data);
	var fixeddata = data.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
	$('#log ul').append('<li>' + fixeddata + '</li>');
	window.scrollBy(0, 1000000000000000);
	entry_el.focus();
	});

	entry_el.keypress(function(event) {
	if (event.keyCode != 13) return;
	var msg = entry_el.attr('value');
	if (msg) {
	socket.send(msg);
	entry_el.attr('value', '');
	}
	});

	});
	</script>
	<style type="text/css">
	body {
	background-color: #666;
	color: fff;
	font-size: 14px;
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, Sans-Serif;
	}
	#log {
	margin-bottom: 100px;
	width: 100%;
	}
	#log ul {
	padding: 0;
	margin: 0;
	}
	#log ul li {
	list-style-type: none;
	}
	#console {
	background-color: black;
	color: white;
	border-top:1px solid white;
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 18px;
	}
	#console input {
	width: 100%;
	background-color: inherit;
	color: inherit;
	font-size: inherit;
	}
	</style>
	</head>
	<body>
	<h1>Chat</h1>
	<div id="log"><ul></ul></div>
	<div id="console">
	<input type="text" id="entry" />
	</div>
	</body>
	</html>