之前在 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参数修改成 "加入聊天室"，保存记录，并且将结果输出。

    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( $('').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

简单聊天系统

PS：

你可能感兴趣的:(简单聊天系统)