国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue+websocket+stompjs 實時監控坐席狀態demo

EdwardUp / 1249人閱讀

摘要：之后坐席狀態改變，可以看到有事件推送過來。關于的重連程序后服務端使用這里我直接引用我的另一個項目的部分代碼，這個沒有使用，直接使用瀏覽器原生的。重連的原理很簡單，就是檢測到斷開時，去調用我的方法，這里我也做了重連的次數限制。

由于是前后端分離的demo, 程序的后端我不管，我只負責把前端做好，這只是個demo， 還有很多不完善的地方。

2018-01-09新增：
后端的MQ事件結構現在也改了，該demo只能看看了。

html




    
    





    
        

            當前狀態
            狀態改變時間
            姓名
            工號
            分機號
            對方號碼
            呼入數
            呼出數
        

    
    
        

            {{item.agentStatus | transAgentStatus}}
            {{item.agentStatusTime}}
            {{item.userName}}
            {{item.loginName}}
            {{item.deviceId}}

js

var tm = (function(){
    var App = function(){};
    var app = App.prototype;
    var config = {
        dest: "http://xxx.xxx.xxx.xxx:58080/mvc/stomp",
        topic: "/topic/csta/namespace/testwdd2.com"
        // topic: "/topic/csta/device/8002@testwdd2.com"
    };


    var eventQueue = [];
    var vm = new Vue({
        el:"#event-queue",
        data:{
            eventQueue: eventQueue
        }
    });

    Vue.filter("transAgentStatus", function(status){
        switch(status){
            case "NotReady": return "未就緒";
            case "WorkNotReady": return "話后處理狀態";
            case "Idle": return "就緒";
            case "OnCallIn": return "呼入通話";
            case "OnCallOut": return "呼出通話";
            case "Logout": return "登出";
            case "Ringing": return "振鈴";
            case "OffHook": return "摘機";
            case "CallInternal": return "內部通話";
            case "Dailing": return "外線已經振鈴";
            case "Ringback": return "回鈴";
            case "Conference": return "會議";
            case "OnHold": return "保持";
            case "Other": return "其他";
        }

        return "";
    });

    /**
     * [render description]
     * @Author   Wdd
     * @DateTime 2016-12-26T16:06:16+0800
     * @param    {[string]} tpl [模板字符串]
     * @param    {[object]} data [data對象]
     * @return   {[string]} [渲染后的字符串]
     */
    app.render = function(tpl,data){
        var re = /{{([^}]+)?}}/g;

        while(match = re.exec(tpl)){
            tpl = tpl.replace(match[0],data[match[1]] || "");
        }

        return tpl;
    };

    app.initWebSocket = function(dest, topic){
        dest = dest || config.dest;
        topic = topic || config.topic;

        var socket = new SockJS(dest);
        var ws = Stomp.over(socket);

        ws.connect({}, function(frame) {

            ws.subscribe(topic, function(event) {
                // var eventInfo = JSON.parse(event.body);
                app.handerEvent(JSON.parse(event.body));
            });
        }, function(frame) {

            console.log(frame);
            console.error(new Date() + "websocket失去連接");
        });
    };

    /**
     * [findAgentIndex description]
     * @Author   Wdd
     * @DateTime 2016-12-28T10:34:13+0800
     * @param    {[string]} agentId [description]
     * @return   {[int]} [description]
     */
    app.findAgentIndex = function(agentId){
        for(var i = eventQueue.length - 1; i >= 0; i--){
            if(eventQueue[i].agentId === agentId){
                return i;
            }
        }

        return -1;
    };

    /**
     * [handerEvent 處理websocket事件]
     * @Author   Wdd
     * @DateTime 2016-12-28T10:33:03+0800
     * @param    {[object]} data [description]
     * @return   {[type]} [description]
     */
    app.handerEvent = function(data){
        if(data.eventType === "CallEvent"){
            return;
        }
        if(!data.eventSrc){
            return;
        }

        var eventItem = {
            agentStatus: "",
            eventName: data.eventName,
            agentId: "",
            loginName: "",
            userName: "",
            deviceId: data.deviceId,
            agentStatusTime: ""
        };

        var agent = data.eventSrc.agent || "";

        if(agent){
            eventItem.agentId = agent.agentId;
            eventItem.loginName = agent.loginName;
            eventItem.userName = agent.userName;
            eventItem.agentStatus = agent.agentStatus;
            eventItem.agentStatusTime = agent.agentStatusTime;
        }
        // 針對登出事件的agentId在外層
        else if(data.agentMode){
            eventItem.agentStatus = data.agentMode;
            eventItem.agentId = data.agentId;
        }
        else if(data.agentStatus){
            eventItem.agentStatus = data.agentStatus;
        }

        if(!eventItem.agentId){
            return;
        }

        var itemIndex = app.findAgentIndex(eventItem.agentId);

        // 新的座席加入
        if(itemIndex === -1){
            eventQueue.push(eventItem);
        }
        // 更新已有座席的狀態
        else{
            eventQueue[itemIndex].agentStatus = eventItem.agentStatus;
            eventQueue[itemIndex].agentStatusTime = eventItem.agentStatusTime;
            eventQueue[itemIndex].eventName = eventItem.eventName;
        }

    };


    return new App();
})();

打開控制臺，輸入tm.initWebsocket()后，websocket連接正常。

之后坐席狀態改變，可以看到有事件推送過來。

看下整個頁面：

最后，這個小小的監控如果用jQuery寫，也可以，不過就是太坑了，每次都要去找到Dom元素，再更新DOM，用了Vue這類的框架，頁面的dom操作完全不用關心了，真是太舒服了。(^o^)/

關于stomp的重連

程序后服務端使用RabbitMQ
這里我直接引用我的另一個項目的部分代碼，這個沒有使用SockJS， 直接使用瀏覽器原生的WebSocket。
重連的原理很簡單，就是檢測到斷開時，去調用我的reconnectWs方法，這里我也做了重連的次數限制。

initWebSocket: function(callback, errorCallback) {
            callback = callback || function(){};

            if(ws && ws.connected){
                return;
            }

            Config.isManCloseWs = false;

            var url = Config.wsProtocol + Config.SDK + Config.eventPort + Config.eventBasePath + "/websocket";

            if(typeof WebSocket != "function"){
                alert("您的瀏覽器版本太太太老了，請升級你的瀏覽器到IE11，或使用任何支持原生WebSocket的瀏覽器");
                return;
            }

            try{
                var socket = new WebSocket(url);
            }
            catch(e){
                console.log(e);
                return;
            }


            var wsHeartbeatId = "";

            ws = Stomp.over(socket);

            if(!Config.useWsLog){
                ws.debug = null;
            }

            ws.connect({}, function(frame) {

                Config.currentReconnectTimes = 0;

                var dest = Config.newWsTopic + env.loginId.replace(/./g,"_");

                var lastEventSerial = "";

                ws.subscribe(dest, function(event) {
                    var eventInfo = {};

                    try{
                        eventInfo = JSON.parse(event.body);
                        delete eventInfo.params;
                        delete eventInfo._type;
                        delete eventInfo.topics;
                    }
                    catch(e){
                        console.log(e);
                        return;
                    }

                    if(lastEventSerial === eventInfo.serial){
                        util.error("Error: event repeat sent !");
                        return;
                    }
                    else{
                        lastEventSerial = eventInfo.serial;
                    }

                    if(Config.useEventLog){
                        util.debugout.log(" " + JSON.stringify(eventInfo));
                    }

                    eventHandler.deliverEvent(eventInfo);
                });
                callback();

            }, function(frame) {
                // websocket upexpected disconnected
                // maybe network disconnection, or browser in offline
                // this condition will emit wsDisconnected event
                if(Config.isManCloseWs){return;}
                errorCallback();

                util.log(frame);
                util.error(new Date() + "websocket disconnect");
                // clearInterval(wsHeartbeatId);

                if(Config.currentReconnectTimes < Config.maxReconnectTimes){
                    Config.currentReconnectTimes++;
                    util.reconnectWs();
                }
                else{
                    var errorMsg = {
                        eventName: "wsDisconnected",
                        msg: "websocket disconnect"
                    };
                    wellClient.ui.main({
                        eventName:"wsDisconnected"
                    });
                    util.debugout.log(">>> websocket disconnect");

                    wellClient.triggerInnerOn(errorMsg);
                }
            });
        },

        reconnectWs: function(){
            setTimeout(function(){
                util.log(">>> try to reconnect");
                util.debugout.log(">>> try to reconnect");
                util.initWebSocket(function(){},function(){});

            }, Config.timeout * 1000);
        },
參考

STOMP Over WebSocket

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50301.html

相關文章

  • Vue+websocket+stompjs 實時監控坐席狀態demo

    摘要：之后坐席狀態改變，可以看到有事件推送過來。關于的重連程序后服務端使用這里我直接引用我的另一個項目的部分代碼，這個沒有使用，直接使用瀏覽器原生的。重連的原理很簡單，就是檢測到斷開時，去調用我的方法，這里我也做了重連的次數限制。 由于是前后端分離的demo, 程序的后端我不管，我只負責把前端做好，這只是個demo， 還有很多不完善的地方。 2018-01-09新增：后端的MQ事件結構現在也...

    yankeys 評論0 收藏0

  • websocket+sockjs+stompjs詳解及實例

    摘要：面向消息的簡單文本協議。為提供了備選方案。但無論哪種場景，對于實際應用來說，這種通信形式層級過低。協議，來為瀏覽器和間的通信增加適當的消息語義。協議解決了瀏覽器發起請求以及服務器響應請求的細節，假設協議并不存在，只能使用套接字來編寫應用。 最近有項目需求要用到websocket,剛開始以為很簡單，但是隨著遇到問題，深入了解，才知道websocket并不是想象中的那么簡單，這篇文章主要是...

    remcarpediem 評論0 收藏0

  • websocket+sockjs+stompjs詳解及實例

    摘要：面向消息的簡單文本協議。為提供了備選方案。但無論哪種場景，對于實際應用來說，這種通信形式層級過低。協議，來為瀏覽器和間的通信增加適當的消息語義。協議解決了瀏覽器發起請求以及服務器響應請求的細節，假設協議并不存在，只能使用套接字來編寫應用。 最近有項目需求要用到websocket,剛開始以為很簡單，但是隨著遇到問題，深入了解，才知道websocket并不是想象中的那么簡單，這篇文章主要是...

    keithyau 評論0 收藏0

  • websocket+sockjs+stompjs詳解及實例

    摘要：面向消息的簡單文本協議。為提供了備選方案。但無論哪種場景，對于實際應用來說，這種通信形式層級過低。協議，來為瀏覽器和間的通信增加適當的消息語義。協議解決了瀏覽器發起請求以及服務器響應請求的細節，假設協議并不存在，只能使用套接字來編寫應用。 最近有項目需求要用到websocket,剛開始以為很簡單，但是隨著遇到問題，深入了解，才知道websocket并不是想象中的那么簡單，這篇文章主要是...

    Corwien 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<