Extjs 轮询模式聊天功能 _JavaScript

Extjs 轮询方式聊天功能

client：jqm

server：php

manager：extjs

client和manager以轮询方式探测对方是否有消息发送到server。方式比较耗费资源。

manager部分代码：

monitorChatMessage：function(){

var me = this;

//定时器任务
var getMsgNotify = function () {

    me.getClientMsgNotify(me.token);
};

var runner = new Ext.util.TaskRunner();
var task = runner.start({
    run: getMsgNotify,
    interval: 5000
});

}

//请求服务端的client消息

getClientMsgNotify: function(token){

}

ui：双击回复对方

debugger;

if(cellIndex == 2){//我的回复

    var mid    =    record.get('mid');
    var smsg    =    record.get('smsg');
    var rmsg   =   record.get('rmsg');
    var replyObj = new Object();
    replyObj.rmsg = rmsg;
    replyObj.reply = "";

    //启动回复界面
    var replyMsg = this.startReplyWindow(mid,smsg,replyObj);
    record.beginEdit();
    record.set('rmsg', replyObj.reply);
    record.endEdit();

    this.getChatMessagStoreStore().load();
}

startReplyWindow

 
var me = this;
var replyMsg = null;
var dialog,editorPanel;
 
//来自客户的消息内容
var sendMsgText = Ext.create('Ext.form.field.TextArea', {  
    fieldLabel : '消息ID：'+mid,  
    name:'sendContent',
    labelWidth:90,
    margin:'5 0 0 5',
    width:'95%',
    height:100,
    value : smsg 
});
 
//回复客户的消息内容
var replyMsgText = Ext.create('Ext.form.field.TextArea', {  
    fieldLabel : '我的回复',  
    name:'replyContent',
    labelWidth:90,
    margin:'5 0 0 5',
    width:'95%',
    height:100,
value : replyObj.rmsg });
 
//回复按钮
var replyButton = Ext.create('Ext.button.Button',{
    margin: '5 0 5 5',
    width: 58,
    text: '回复',
    handler:function(){
        var postUrl = "http://localhost/wc/server/talk.php";
        //添加post参数
        var postParam = [];
        postParam['function'] = 'sendReply';
        postParam['token'] = me.token;
        postParam['mid'] = mid;
 
        editorPanel.submit({
            clienValidation:true,    
            waitMsg:'正在回复请稍候',    
            waitTitle:'提示',    
            url:postUrl,    
            method:'POST',    
            timeout:10000,//10秒超时, 
            params:postParam,
 
            success:function(form,action){
 
                replyObj.reply = replyMsgText.getValue();
                dialog.close();// 把窗体关闭（不显示）  
 
            },
 
            failure:function(form,action){
 
                Ext.MessageBox.show({title: '失败',msg: '回复失败: '+action.result.data,buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
            }});
        }
    });
 
 
    var closeBtn = Ext.create('Ext.button.Button',{
        margin: '5 0 5 5',
        width: 58,
        text: '关闭',
        handler:function(){
            dialog.hide();
        }
    });
 
    var btnContain = Ext.create('Ext.container.Container',{
    layout:'hbox',items:[replyButton,closeBtn]});
 
    //创建form panel
    editorPanel = Ext.create('Ext.form.Panel', {// 创建一个表单控件，    
        height : "480",  
        width : "100%", 
        autoScroll : true,
        layout:{type:"vbox",align:"stretch"},
        //region:'center',
        fieldDefaults:{anchor:"0",labelWidth:80,labelSeparator:"："},
        frame : true,
        items : [sendMsgText,replyMsgText,btnContain]
    });
 
    // 准备好一个用来显示窗体的dialog，实际上是一个窗体  
    dialog = Ext.create('Ext.window.Window', {
        title : '回复客户窗口',  
        maxHeight : 480,  
        width : 500,  
        closeAction:'hide', 
        layout : 'fit',  
        items : [editorPanel],  
        modal : true      
    });  
    dialog.show(); 

优点：实现简单

缺点：耗费资源

经过，几天努力把轮询方式，替换成了socket长连接方式。用nodejs实现了一把。