OpWeb -- 快速构建一个简单的Ajax聊天程序

最新推荐文章于 2025-08-29 12:14:23 发布

原创最新推荐文章于 2025-08-29 12:14:23 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

OpWeb 专栏收录该内容

10 篇文章

订阅专栏

本文将指导您使用OpWeb框架快速搭建一个Ajax聊天程序，包括服务端脚本编写、客户端交互实现及实时消息同步。

快速构建一个简单的Ajax聊天程序:

下载OpWeb框架: https://github.com/icesun963/OpWeb

在Service/Demos/
目录下创建一个目录叫:cometChat

新建一个服务端脚本:chatService.js

var myApp = function(){
    //对应的映射根对象
    var chatDb=function(){
        this.lists = [];
        JsOpItem.call(this);
    };
    //子消息对象
    var messageItem=function(message){
        this.message=message;
        JsOpItem.call(this);
    };

    //定义一个实体对象
    var chatroot= new chatDb();
    //同客户端绑定根节点
    chatroot.SetOpId("2000");
    //绑定到Master允许客户端同步
    OpLog.OpFunction.SetMaster(chatroot);

    //定义请求方法
    this.RPCAddChatMessage =function (message){
        //添加到列表
        chatroot.lists.push(new messageItem(message));
    };
};

//创建一个Comet Web服务
AddService(function () {
    CometServer(__dirname  + "/",8008);
});
//把服务加入启动
AddService(myApp);

服务端结束!

新建一个index.html

加入脚本引用:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/_comet.io/comet.io.client.js"></script>
<script src="watch.js" type="text/javascript"></script>

加入一个内容输出div

加入一个input text;

    <p>
        <input type="text" name="word" id="word" value="" />
    </p>


    <div id="content">
    </div>

添加对象定义以及触发事件脚本:

  //定义对象
        var chatList =   function(){
            var self = this;
            //定义消息列表
            this.lists= [];
            //监听事件
            watch(this,"lists", function(prop, action, newval, oldval){
                if(action == "push" )
                {
                    //当发现lists添加一条消息时,在界面上添加一条message显示
                    $('#content').append('<div>' + newval[0].message + '</div>');
                }
            })
        };

定义就完了,我们需要new 一个实体并且绑定服务端数据. 以及相应input操作:

        //新建一个对象
        var chatRoot = new chatList();
        //绑定到一个推送session
        var session1=new opSession(chatRoot,"2000","http://localhost:8008");


          //当用户在Input上输入回车时,发送一个添加请求
                $('#word').bind('keydown', function (e) {
                    var key = e.which;
                    if (key == 13) {
                        session1.doRpcCall("RPCAddChatMessage",[  $('#word').val() ]);
                    }
                });

测试,运行!!,
你可以打开2个

http://localhost:8008

分别输入查看!