继续上一部分，完成用户上线提醒的功能。
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});
});
})