node.jsでチャットを作ってみた

node.jsとsocket.ioを使ってチャットを作ってみました。

node.jsとexpress,socket.io,jqueryを使って簡単なチャットを作ってみました。

サーバーサイドserver.js

var express = require('express');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__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.jade', {
		title: 'ChatRoom'		
	});		
});
app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

var io = require('socket.io').listen(app);
var count=0;
io.sockets.on('connection', function(socket){
	count++;
	io.sockets.emit('count', count);
	socket.on('msg', function(msg){
		io.sockets.emit('msg', {name: msg.name, text: msg.text });
	});
	socket.on('disconnect',function(){
		count--;
		io.sockets.emit('count',count);
	});
});

クライアントサイドclient.js

var socket = io.connect();
socket.on('connect',function(){
	socket.on('count', function(data){
		$('#count').text(data);
	});
	socket.on('msg', function(msg){
		$('#chat').prepend('<p>' + escape(msg.name) + ':' + escape(msg.text) + '</p><hr />');
		$('#chat').children('p:first').hide().fadeIn(5000);
	});
});

function send()
{
	var name = $('#name').val();
	var text = $('#text').val();
	if(text && name){
		socket.emit('msg', {name: name, text: text});
		$('#text').val('');
	}
}

function escape(str){
	return $('<div></div>').text(str).html();
}

ビュー

layout.jade

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js')
    script(type='text/javascript', src='/socket.io/socket.io.js')
    script(type='text/javascript', src='/javascripts/client.js')
  body!= body

index.jade

h1= title
p 現在の閲覧者数は
	span#count
	人です。
form#form(onsubmit='send(); return false;')
	p 名前：
		input#name(type='text')
	p メッセージ：
		input#text(type='text', autocomplete='off')
	input(type='submit', value='送信')
hr
#chat

作ったチャットはこちらです。
ちょっと改変したので動いてるものはこのソースコードのものと違います。
http://mintsu1.nodester.com/

nodester上で動かしています。

ソースコードはgithubにも公開しました。
https://github.com/mintsu/node_chat

nodesterの使い方に関してはこちら
nodesterを使ってみた - mintsu’s プログラミング日誌