简单聊天系统

作者: 云香水识 | 来源:发表于2015-01-03 17:41 被阅读581次

    之前在 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( $('<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

    相关文章

      网友评论

      • 云香水识:@抓不住的风 我是一个极简主义者, 这里就是为了显示一个简单的服务端监听原理,给人讲解课程使用的,当然是用原生的一套API, 如果是做完整的企业级项目,自然可以选用适当的模块进行复杂的开发。
      • 抓不住的风:用pomelo的话 很简单的就实现了

      本文标题:简单聊天系统

      本文链接:https://www.haomeiwen.com/subject/wasztttx.html