websocket.js

var websocket;
var isCreatw = false;
var title="";
var win;
var input;
var isQj = true;
var toUser="";
function toUserMsg(toU){
    if((!isQj && toUser == toU) || toU == user){
        win.setTitle(title + "  (已連接)   【現在全局對話】");
        isQj = true;
        toUser = "";
    }else{
        win.setTitle(title + "  (已連接)   【現在單獨與"+toU+"對話】");
        isQj = false;
        toUser = toU;
    }
}

//啟動聊天窗口並連接聊天服務器
 function creatw() {
             if(isCreatw){
                 alert("已經啟動");
                 return;
             }else{
                 isCreatw = true;
             }
            //創建用戶輸入框
            input = Ext.create('Ext.form.field.HtmlEditor', {
                        region : 'south',
                        height : 120,
                        enableFont : false,
                        enableSourceEdit : false,
                        enableAlignments : false,
                        listeners : {
                            initialize : function() {
                                Ext.EventManager.on(me.input.getDoc(), {
                                            keyup : function(e) {
                                                if (e.ctrlKey === true
                                                        && e.keyCode == 13) {
                                                    e.preventDefault();
                                                    e.stopPropagation();
                                                    send();
                                                }
                                            }
                                        });
                            }
                        }
                    });
            
            //創建消息展示容器
            var output = Ext.create('MessageContainer', {
                        region : 'center'
                    });

            var dialog = Ext.create('Ext.panel.Panel', {
                        region : 'center',
                        layout : 'border',
                        items : [input, output],
                        buttons : [{
                                    text : '發送',
                                    handler : send
                                }]
                    });

            //初始話WebSocket
            function initWebSocket() {
                if (window.WebSocket) {
                    websocket = new WebSocket(encodeURI('ws://'+wimadress));
                    
                    websocket.onopen = function() {
                        //連接成功
                        win.setTitle(title + '  (已連接)   【現在全局對話】');
                        websocket.send('FHadminqq313596790'+user);
                    }
                    websocket.onerror = function() {
                        //連接失敗
                        win.setTitle(title + '  (連接發生錯誤)');
                    }
                    websocket.onclose = function() {
                        //連接斷開
                        win.setTitle(title + '  (已經斷開連接)');
                    }
                    //消息接收
                    websocket.onmessage = function(message) {
                        var message = JSON.parse(message.data);
                        //接收用戶發送的消息
                        if (message.type == 'message') {
                            output.receive(message);
                        } else if (message.type == 'get_online_user') {
                            //獲取在線用戶列表
                            var root = onlineUser.getRootNode();
                            Ext.each(message.list,function(user){
                                var node = root.createNode({
                                    id : user,
                                    text : user,
                                    iconCls : 'user',
                                    leaf : true
                                });
                                root.appendChild(node);
                            });
                        } else if (message.type == 'user_join') {
                            //用戶上線
                                var root = onlineUser.getRootNode();
                                var user = message.user;
                                var node = root.createNode({
                                    id : user,
                                    text : user,
                                    iconCls : 'user',
                                    leaf : true
                                });
                                root.appendChild(node);
                        } else if (message.type == 'user_leave') {
                                //用戶下線
                                var root = onlineUser.getRootNode();
                                var user = message.user;
                                var node = root.findChild('id',user);
                                root.removeChild(node);
                        }
                    }
                }
            };

            //在線用戶樹
            var onlineUser = Ext.create('Ext.tree.Panel', {
                        title : '在線用戶',
                        rootVisible : false,
                        region : 'east',
                        width : 150,
                        lines : false,
                        useArrows : true,
                        autoScroll : true,
                        split : true,
                        iconCls : 'user-online',
                        store : Ext.create('Ext.data.TreeStore', {
                                    root : {
                                        text : '在線用戶',
                                        expanded : true,
                                        children : []
                                    }
                                })
                    });
            
            title = '歡迎您：' + user;
            //展示窗口
            win = Ext.create('Ext.window.Window', {
                        title : title + '  (未連接)',
                        layout : 'border',
                        iconCls : 'user-win',
                        minWidth : 650,
                        minHeight : 460,
                        width : 650,
                        animateTarget : 'websocket_button',
                        height : 460,
                        items : [dialog,onlineUser],
                        border : false,
                        listeners : {
                            render : function() {
                                initWebSocket();
                            }
                        }
                    });

            win.show();
            
            win.on("close",function(){
                websocket.send('LeaveFHadminqq313596790');
                isCreatw = false;
             });

            //發送消息
            function send() {
                var content = input.getValue();
                if(toUser != ""){content = "fhadmin886"+toUser+"fhfhadmin888" + content;}
                var message = {};
                if (websocket != null) {
                    if (input.getValue()) {
                        Ext.apply(message, {
                                    from : user,
                                    content : content,
                                    timestamp : new Date().getTime(),
                                    type : 'message'
                                });
                        websocket.send(JSON.stringify(message));
                        //output.receive(message);
                        input.setValue('');
                    }
                } else {
                    Ext.Msg.alert('提示', '您已經掉線，無法發送消息!');
                }
            }
};

//用於展示用戶的聊天信息
Ext.define('MessageContainer', {

    extend : 'Ext.view.View',

    trackOver : true,

    multiSelect : false,

    itemCls : 'l-im-message',

    itemSelector : 'div.l-im-message',

    overItemCls : 'l-im-message-over',

    selectedItemCls : 'l-im-message-selected',

    style : {
        overflow : 'auto',
        backgroundColor : '#fff'
    },

    tpl : [
            '<div class="l-im-message-warn">​歡迎使用FH Admin 即時通訊系統。</div>',
            '<tpl for=".">',
            '<div class="l-im-message">',
            '<div class="l-im-message-header l-im-message-header-{source}">{from}  {timestamp}</div>',
            '<div class="l-im-message-body">{content}</div>', '</div>',
            '</tpl>'],

    messages : [],

    initComponent : function() {
        var me = this;
        me.messageModel = Ext.define('Leetop.im.MessageModel', {
                    extend : 'Ext.data.Model',
                    fields : ['from', 'timestamp', 'content', 'source']
                });
        me.store = Ext.create('Ext.data.Store', {
                    model : 'Leetop.im.MessageModel',
                    data : me.messages
                });
        me.callParent();
    },

    //將服務器推送的信息展示到頁面中
    receive : function(message) {
        var me = this;
        message['timestamp'] = Ext.Date.format(new Date(message['timestamp']),
                'H:i:s');
        if(message.from == user){
            message.source = 'self';
        }else{
            message.source = 'remote';
        }
        me.store.add(message);
        if (me.el.dom) {
            me.el.dom.scrollTop = me.el.dom.scrollHeight;
        }
    }
});