繼續(xù)上一部分议街，完成用戶上線提醒的功能。
part1 here:http://www.reibang.com/p/4eed4c22e9cf
參考資料:https://github.com/nswbmw/N-chat
這一部分主要編寫客戶端的代碼轩触，chat.js萍鲸，同時也要更改相應(yīng)的服務(wù)端代碼
主要邏輯如下圖：
online.jpg
chat.js代碼如下：
$(document).ready(function(){
var socket = io.connect();//連接本地服務(wù)器
var from = $.cookie('user');//從cookie中讀取用戶名
var to = "all";//默認(rèn)接受為“所有人”
//用戶上線,向服務(wù)器端發(fā)射online事件邢疙，將用戶名發(fā)過去
socket.emit('online',{user:from});
//接受服務(wù)器發(fā)送的online事件，并驗證是否是新用戶
socket.on('online',function(data){
//系統(tǒng)消息
if (data.user != from) {
//新用戶
var sys = '<div style="color:#f00">系統(tǒng)(' + now() + '):' + '用戶 ' + data.user + ' 上線了陷舅！</div>';
} else {
//已登錄用戶
var sys = '<div style="color:#f00">系統(tǒng)(' + now() + '):你進入了聊天室倒彰！</div>';
}
});
//顯示聊天框狀態(tài)
$("#contents").append(sys + "<br/>");
//刷新用戶列表
function flushUsers(users){
//清空之前的用戶列表,然后填一個“所有人”選項
//因為你剛進去，默認(rèn)是對著所有人講話莱睁，然后把選項默認(rèn)為灰色
$('#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) {
//設(shè)置被雙擊的用戶為說話對象
to = $(this).attr('alt');
//清除之前的選中效果
$('list>li').removeClass('sayingto');
//給當(dāng)前的用戶添加
$('list>li').addClass('sayingto');
//刷新聊天狀態(tài)
showSayTo();
};
});
}
//顯示正在對誰說話
function showSayTo() {
$("#from").html(from);
$("#to").html(to == "all" ? "所有人" : to);
}
//獲取當(dāng)前時間
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;
}
});
對應(yīng)的，服務(wù)器端的代碼如下：
var server = http.createServer(app);
var io = require('socket.io').listen(server);
io.sockets.on('connection',function(socket){
//有客戶端上線了
socket.on('online',function(data){
//將上線的用戶名存儲為 socket 對象的屬性仰剿，以區(qū)分每個 socket 對象创淡，方便后面使用
socket.name = data.user;
//users 對象中不存在該用戶名則插入該用戶名
if (!users[data.user]) {
users[data.user] = data.user;
}
//向所有用戶廣播該用戶上線信息
io.sockets.emit('online', {users: users, user: data.user});
});
})