vue +webscoket協議

http和webscoket的區別和原理

http:

 1.http是用在應用層上的協議，基於tcp協議，http協議建立連接要經過三次握手才能進行發送信息

 2.http鏈接分為短鏈接、長鏈接，短鏈接每次請求都要經過三次握手才能發送信息，每一個request對應一個response。長鏈接是在一定期限內保持鏈接 ，保持tcp鏈接不斷開。客戶端與服務器通信，必須要有客戶端發起請求，服務器返回結果，而不能主動推送消息給客戶端，即客戶端是主動的，服務器是被動的。

長鏈接安全穩定 但是消耗資源多  需要一直維持這個連接，占用着通信資源和貸款 而且其實傳輸效率不高。

但是短鏈接的話不安全 也就是說發出去的東西有可能丟  但是它的效率高 發送一次就可以釋放資源 而且傳輸效率高 特別時候做通信 所以我們的語音和視頻都是這種方式

webscoket：

 1.建立在tcp協議之上，服務端的實現比較容易

 2.webscoket是為了解決客戶端發起多個http請求到服務器資源，瀏覽器要經過長時間的輪詢問題而生，實現了多路復用，是全雙工通信，客戶端和瀏覽器可以同時發送信息

 3.與http協議有着良好的兼容性，默認端口也是80和443，並且握手階段采用http協議，所以握手不容易屏蔽，能通過各種http代理。

 4.沒有同源限制，客戶端可以與任意服務器通信（比如mqtt和監聽服務器不在同一個端口也可以分別向不同的服務器發送接收信息）

5.可以發送文本，也可以發送二進制數據

6.協議標識符是ws，（加密是wss）,服務器地址就是url

7.作用是可以持久性連接某一個接口；支持雙向通信，更靈活，更高效，可擴展性好。

 

webscoket心跳連接：

    ws.onopen= function () {
        var getUserNumber1=store.getters.currentUser;
        var password=store.getters.currentPassWord;
        if(getUserNumber1!=null&&getUserNumber1!=''){ //判斷是首次登陸還是登陸后刷新
            heartCheck.start(); //登陸連接成功進行心跳,當后台收不到ping時會推送連接失敗
            var message = {
                id: "register",
                ext:getUserNumber1,
                password: password
            };
            console.log('刷新頁面')
            message = JSON.stringify(message);
            ws.send(message);
        }else{
            console.log('登錄')
            heartCheck.start();
        }
    }
    var heartCheck={
        timeout:60*1000,
        timeoutObj:null,
        serverTimeoutObj:null,
        reset:function(){
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start:function(){
            var self=this;
            this.timeoutObj=setInterval(() => {
                var ping={id:"ping"};
                ping = JSON.stringify(ping);
                console.log(ping)
                ws.send(ping)
            },this.timeout);
        }
    }