node.js+socket.io 實現一個web聊天室

 在cnode中看到一篇應用socket.io實現web聊天室的帖子，非常不錯，然後就按照博主的教程去實現了一個web聊天室。

聊天室教程文檔鏈接如下。

主要用到了socket.io的emit和on事件。

主要包括兩個文件，即客戶端的chat.js和服務器端的app.js.

chat.js的代碼如下：主要包括了

socket.emit("online", {user: from})

socket.on("online", function(data){}）

socket.on('say', function(data){}）

socket.on('offline', function(data){}）

socket.on('disconnect', function(data){}）

$(function(){
    var socket = io.connect();

    var from = $.cookie('user');
    var to = 'all';

    socket.emit("online", {user: from});
    socket.on("online", function(data){
        if(data.user != from){
            var sys = '<div style="color:#f00">系統(' + now() + '): 用戶 ' + data.user + ' 進入了聊天室</div>';
        }   else {
            var sys = '<div style="color:#fff">系統(' + now() +  '): 你進入了聊天室</div>';
        }
        $('#contents').append(sys);
        flushUsers(data.users);
        showSayTo();
    });

    socket.on('say', function(data){
        if(data.to == "all"){
            $('#contents').append('<div>' + data.from + '(' + now() + ')對所有人說:<br/>' + data.msg + '</div><br/>');
        } else if(data.to == from) {
            $('#contents').append('<div style="color:#00f">' + data.from + '( ' + now() + ')對你說：<br/> ' + data.msg + '</div><br/>');
        }
    });

    socket.on('offline', function(data){
        var sys = '<div style="color:#f00">系統（' + now() + '): 用戶' + data.user + '下線了!</div><br/>';
        $('#contents').append(sys);
        flushUsers(data.users);
        if(data.user == to){
            to = "all";
        }
        showSayTo();
    });

    socket.on('disconnect', function(){
        var sys = '<div style="color:#f00">系統連接服務器失敗</div><br/>';
        $('#contents').append(sys);
        $('#lists').empty();
    });

    socket.on('reconnect', function(){
        var sys = '<div style="color:#f00">系統服務器重新啓動</div><br/>';
        $('#contents').append(sys);
        socket.emit("online", {user:from});
    })

    function flushUsers(users){
        $('#list').empty().append('<li title="雙擊聊天" alt="all" class="sayingto" onselectstart="return false">所有人</li>');

        for(var i in users){
            $('#list').append('<li alt="' + users[i] + '" title="雙擊聊天" onselectstart="return false">' + users[i] + '</li>');
        }

        $('#list > li').dblclick(function(){
            if($(this).attr("alt") != from){
                to = $(this).attr("alt");
                $('#list > li').removeClass("sayingto");
                $(this).addClass("sayingto");
                showSayTo();
            }
        })
    };

    function showSayTo(){
        $('#from').html(from);
        $('#to').html(to == 'all'? "所有人": to);
    }

    function now(){
        var date = new Date();
        var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + '  ' + date.getHours()
                + ':' + date.getMinutes() + ':' + date.getSeconds();
        return time;
    }

    $('#say').click(function(){
        var $msg = $('#input_content').html();
        if($msg == "") return;
        if(to == "all"){
            $('#contents').append('<div>你(' + now() + ') 對所有人說：<br/>' +  $msg + '</div><br/>');
        }  else {
            $('#contents').append('<div>你(' + now() + ') 對' + to + ' 說：<br/>' + $msg + '</div><br/>');
        }
        socket.emit('say', {from: from, to:to, msg: $msg});
        $('#input_content').empty().focus();
    })
})

app.js內容如下：

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

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

var users = [];
app.get('/', function(req, res){
    if(req.cookies.user == null){
        return res.redirect('/signin');
    }
    res.sendfile('views/index.html');
})

app.get('/signin', function(req, res){
    res.sendfile('views/signin.html');
})

app.post('/signin', function(req, res){
    if(users.indexOf(req.body.name) != -1){
        res.redirect('/signin');
    }  else {
        res.cookie("user", req.body.name, {maxAge: 1000*60*60*24*30});
        res.redirect('/');
    }
})

io.sockets.on('connection', function(socket){
    socket.on('online', function(data){
        socket.name = data.user;
        if(users.indexOf(data.user) == -1){
            users.unshift(data.user);
        }
        io.sockets.emit('online', {user: data.user, users:users});
    });

    socket.on('say', function(data){
        if(data.to == "all"){
            socket.broadcast.emit('say', data);
        } else {
            var clients = io.sockets.clients();
            clients.forEach(function(client){
               if(client.name == data.to){
                   client.emit('say', data);
               }
            })
        }
    });

    socket.on('disconnect', function(){
        if(users.indexOf(socket.name) != -1){
            users.splice(users.indexOf(socket.name), 1);
            socket.broadcast.emit('offline', {user:socket.name, users:users});
        }
    })
});

server.listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});