vue中使用websocket

最近項目需求需要實現賬號唯N性。同一賬號允許多窗口、多臺電腦登錄上限。

由項目需求所得，想用websocket實現看下。以前也沒正式玩過。
項目結構-login登錄成功後會跳轉到以main.vue爲基礎頁面的界面上，所以我只要在main.vue頁面的mounted中去創建以及在beforeDestroy中去銷燬websocket基本就可以了。

因爲在vue中有多個方法地方需要用到同一個websocket對象，所以我直接定義在data下。

對websocket生成寫在一個方法中，並把這個方法放到mounted中調用。

/**
         * 初始化websocket
         */
        initWebSocket(){
            // var websocket = null;
            //判斷當前瀏覽器是否支持WebSocket
            if ('WebSocket' in window) {
                var serviceIp ="172.168.0.16:8880";
                this.websocket = new WebSocket("ws://"+serviceIp+"/system/websocket");
            }else if ('MozWebSocket' in window) {
                 var serviceIp ="172.168.0.16:8880";
                 this.websocket = new WebSocket("ws://"+serviceIp+"/system/websocket");
           }
            else {
                console.log('當前瀏覽器 Not support websocket');
                let that = this;
                 this.interval = window.setInterval(function(){ //每隔30秒鐘發送一次心跳，避免websocket連接因超時而自動斷開
                   that.forgeWebSocket();
                },30000);
            }
        let that = this;
        this.interval = window.setInterval(function(){ //每隔30秒鐘發送一次心跳，避免websocket連接因超時而自動斷開
                    if(that.websocket!=null){
                        that.websocket.send("HeartBeat");
                        console.log("發送心跳包：HeartBeat");
                    }
                },30000);
            
            //連接發生錯誤的回調方法
            this.websocket.onerror = function (ev) {
                console.log("WebSocket連接發生錯誤");
            };

            //連接成功建立的回調方法
            this.websocket.onopen = function (ev) {
                console.log("WebSocket連接成功");
                this.send("addsocket");
            }

            //接收到消息的回調方法
            this.websocket.onmessage = function (event) {
                console.log(event.data);
            }

            //連接關閉的回調方法
            this.websocket.onclose = function (ev) {
                console.log("WebSocket連接關閉");
                this.websocket=null;
            }
        },

直接關閉瀏覽器窗口或者標籤頁時也需要關閉websocket連接，所以需要同時把下面的操作也放在mounted中

let	vm = this;
    window.onbeforeunload = function () {
                // vm.send("closesocket:");
                vm.closeWebSocket();
            }

/*-----------------------------------------------------------------------**/

  //發送消息
            send(message){
                if(this.websocket && this.websocket != null){
                this.websocket.send(message);
                console.log("發送的消息："+message);
                }
            },
            //關閉WebSocket連接
            closeWebSocket() {
                if(this.websocket != null){
                this.websocket.close();
                console.log("已執行closeWebSocket中關閉websocket操作");
                }
                if(this.interval){
                    window.clearInterval(this.interval);
                    console.log("清除定時器");
                }
            },

最後需要在beforeDestroy方法中執行closeWebSocket方法去關閉連接並清除定時器。

另外forgeWebSocket這個方法是在不支持websocket的瀏覽器中去執行，這個方法作用是作爲最早得輪詢方式去保持長連接。
這樣不管瀏覽器支不支持websocket都能保持長連接的功能作用。

如果有不好或者不對的地方還望指出，謝謝！！！