node.js搭建基础聊天室part2

继续上一部分，完成用户上线提醒的功能。

part1 here:http://www.jianshu.com/p/4eed4c22e9cf

参考资料:https://github.com/nswbmw/N-chat

这一部分主要编写客户端的代码，chat.js，同时也要更改相应的服务端代码

主要逻辑如下图：

online.jpg

chat.js代码如下：

$(document).ready(function(){

var socket = io.connect();//连接本地服务器

var from = $.cookie('user');//从cookie中读取用户名
var to = "all";//默认接受为“所有人”
//用户上线,向服务器端发射online事件，将用户名发过去
socket.emit('online',{user:from});
//接受服务器发送的online事件，并验证是否是新用户
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:#f00">系统(' + now() + '):你进入了聊天室！</div>';
     }
 });
 //显示聊天框状态
 $("#contents").append(sys + "<br/>");

 //刷新用户列表
 function flushUsers(users){
     //清空之前的用户列表,然后填一个“所有人”选项
     //因为你刚进去，默认是对着所有人讲话，然后把选项默认为灰色
     $('#list').empty().append('<li title="双击聊天" alt="all" class="sayingto" onselectstart="return false">所有人</li>');
     //遍历生成用户列表
     for (var i in users) {
         if (users.hasOwnProperty(i)) {
              $("#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');
            //给当前的用户添加
            $('list>li').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() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds());
        return time;
    }

});

对应的，服务器端的代码如下：

var server = http.createServer(app);

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

io.sockets.on('connection',function(socket){
//有客户端上线了
socket.on('online',function(data){
    //将上线的用户名存储为 socket 对象的属性，以区分每个 socket 对象，方便后面使用
    socket.name = data.user;
    //users 对象中不存在该用户名则插入该用户名
    if (!users[data.user]) {
        users[data.user] = data.user;
    }
    //向所有用户广播该用户上线信息
    io.sockets.emit('online', {users: users, user: data.user});
  });
})