之前在 f2e-server 里面做了一个有关监听文件更新，实时刷新预览页面的功能，基于这个原理做一个实时消息的推送检测也是挺不错的。
- 首先创建一个基本的HTTP服务器， 输出javascript格式的文本数据
http.createServer(function (req, resp){
var res = querystring.parse( url.parse(req.url).query ); // 格式化GET请求数据
resp.writeHead(200, {"Content-Type": 'application/javascript'}); //输出的mime-type是javascript
resp.end( (res.callback || "callback") + '('+JSON.stringify(res)+');' ); //输出结果，方法名可以是传递进来的
}).listen(8973);
- 服务端计划仅使用query识别请求，不关心path路径
- name: "昵称", // 消息发送来源, 昵称
- time: 1746389859, //接收从time时刻开始的所有服务端消息
- msg: "加入聊天室", //客户端发出的消息
- method: "pop" // pop-获取消息；push-发送消息； exit-退出聊天室
- msgList: [] //客户端从服务端获取的信息列表，附加在res上返回给客户端
- 完成基本的保存信息和信息输出方法
function out(res, resp){
resp.end( (res.callback || "callback") + '('+JSON.stringify(res)+');' );
}
function saveMsg(msg){
mtime = msg.time = +new Date;
list.push({ // list是所有信息列表
name: msg.name,
msg: msg.msg,
time: mtime
});
}
- 根据不同情况识别发生事件
- 如果没有传入时间，或者请求类型不是GET，或者没有提供method参数
识别为首次进入聊天室，将msg参数修改成 "加入聊天室"，保存记录，并且将结果输出。
- 如果没有传入时间，或者请求类型不是GET，或者没有提供method参数
if( !res.time || req.method === "POST" || !res.method ){
res.msg = res.msg || "加入聊天室";
res.msgList = [];
saveMsg(res);
out(res,resp);
}
* 如果是消息提交，直接将信息保存，也不用返回啥信息列表了，反正客户端也用不着
else if( "push" === res.method ){
saveMsg(res);
out(res,resp);
}
* 退出的时候，事实上也是进行一个消息提交，只不过把msg修改成 **"离开聊天室"**
else if( "exit" === res.method ){
res.msg = "离开聊天室";
saveMsg(res);
out(res,resp);
}
* 其他情况识别为获取信息列表，根据`res.time`返回数据
这里是监听更新的核心部分
1. 通过判断提交的time和服务端最近更新时间mtime是否相等，
决定是否直接返回响应时间范围的消息列表。
if( res.time != mtime){
res.msgList = list.filter(function(m){
return m.time > res.time;
});
res.time = mtime; // 更新time，返回给客户端，客户端每次获取列表后更新本地的time参数
out(res,resp);
}
2. 如果这两个时间相等，500ms后继续回调自己，回调够60次，才返回一个空的消息列表。
else if(repeat >= 60){
res.msgList = [];
out(res,resp);
}else{
repeat++;
setTimeout(getMsg,500);
}
- 数据信息的持久化
事实上到这里，聊天系统的服务端已经可用了，但是为了将所有的消息记录都能在服务端存储下来
我们将list信息定时的存储到文件里面：
function saveList(){
if( mtime === stime ){ // stime 记录上一次文件保存的时间
// 如果最新修改都已经保存,等待下次保存
}else{ //否则更新存储时间为最新修改时间
stime = mtime;
var n = 0, tmp;
while(list.length > 100){
tmp = list.splice(0,100); // 将list分割成100条一组，存储到指定文件名文件
fs.writeFile( "data/"+stime+"-"+(n++)+".json", JSON.stringify(tmp,null,4) );
} //剩下不够100条的还存储在基本文件下。
fs.writeFile( "data.json", JSON.stringify(list,null,4) );
}
setTimeout(saveList, 1000*60*2);
}
saveList();
- 客户端代码：
- 发送消息
$("#form").on("submit",function(e){
e.preventDefault();
var data = {
name: $("#name").val(),
method:"push",
msg: $("#msg").val()
};
$("#msg").val("");
$.jsonp(root,data,function(d){
console.log( '发送成功！' );
$("#msg").focus();
});
});
* 接收消息
window.get = function(){
$.jsonp(root,{
name:$("#name").val(),
method:"pop",
time: time
},function(d){
time = d.time
d.msgList.forEach(function(m){
chat.append( $('<li></li>').text(m.name+":"+m.msg) );
});
window.get();
});
}
window.get();
* 退出页面
window.onbeforeunload = function(){
$.jsonp(root,{
name:$("#name").val(),
method:"exit",
time: time
});
};
PS：
在线聊天室: http://shy2850.github.io/wfQuery/demo/09.chatRoom.html
服务端完整代码 https://github.com/shy2850/wfQuery/blob/master/demo/node/chat.js
客户端代码 https://github.com/shy2850/wfQuery/blob/master/demo/09.chatRoom.html
