简单聊天系统

作者: 云香水识 | 来源:发表于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

相关文章

  • 简单聊天系统

    之前在 f2e-server 里面做了一个有关监听文件更新,实时刷新预览页面的功能,基于这个原理做一个实时消息的推...

  • python实现简单的聊天系统

    主要还是练习socket包的使用。server端代码: client端代码: 用上面的client代码和serve...

  • Golang WebSocket实现简单的聊天系统

    本文只是一个简单的案例,如有疑问,欢迎探讨! 首先来看,为什么需要WebSocket?再来看一类需求:一个天气预报...

  • 简单聊天

    和南风一起出去,雨后的傍晚很凉爽,风吹到腿上凉凉的,没有白天的燥热。 简,你冷吗?南风轻轻的问。 不冷,很舒服。南...

  • 架构与特性:一个完整的IM系统是怎样的?

    使用者眼中的聊天系统 如果我们站在一个使用者的角度从直观体验上来看,一个简单的聊天系统大概由以下元素组成:用户账号...

  • 基于websocket的聊天小应用

    引言 趁着清闲研究了一下websocket,并利用python和html简单的实现了简单的聊天系统,希望对想要了解...

  • 基于NodeJs的局域网聊天室

    1.该系统基于nodeJs,electron旨在开发一个桌面端的简单聊天系统(1对1)2.基于nodeJs的soc...

  • 自制聊天系统

    今天是星期五,周末又到了,又是一个人在家路代码的黄金时期,这次给大家分享一个用js做的在线聊天界面。 1 参数设置...

  • IM聊天系统

    编解码 protobuf 视频 webrtc 服务器netty 传送门:https://github.com/zh...

  • 设计聊天系统

    https://www.slideshare.net/brizzzdotcom/facebook-messages...

网友评论

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

本文标题:简单聊天系统

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