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);
        }
    }