面试题集三—webscoket相关

webscoket是h5提供的一种在单个TCP连接上进行全双工通信的协议
webscoket允许服务端主动向客户端推送数据，在webscoket中浏览器和服务器只要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据通信

优点

• 带宽问题
  webscoket相对于HTTP来说协议头更小，同时还能按需传递
• 数据实时性
  webscoket相对于轮询来说，能够实时传递数据，延迟更小。
• 状态问题
  相对于HTTP的无状态请求，webscoket在建立连接之后可以维持特定状态

webscoket API

open -> message -> send -> closed

webscoket心跳机制
这是一个表明client和server连接是否还在的检查机制
原理：使用一个定时器settimeout，每隔一段时间向服务器发送一个pending数据，如果正常服务器会返回一个pending给客户端，客户端可以通过message能够监听到说明连接正常，否则重新连接

   //serverUrl
        let socketUrl = 'ws://127.0.0.1:3000';
        //保存websocket对象
        let socket;
        // reConnect函数节流标识符
        let flag = true;
        //心跳机制
        let heart = {
            timeOut:3000,
            timeObj = null,
            serverTimeObj = null,
            start:function(){
                console.log('start');
                let self = this;
                //清除延时器
                this.timeObj && clearTimeout(this.timeObj);
                this.serverTimeObj && clearTimeout(this.serverTimeObj);
                this.timeObj = setTimeout(function(){
                    socket.send('兄弟，你还好吗?');//发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
                    //定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
                    self.serverTimeObj=setTimeout(function(){
                        socket.close();
                        reConnect(socketUrl);
                    },self.timeOut)
                },this.timeOut)
            }
        }
        //建立websocket连接函数
        function createWebsocket(url) {
            try {
                socket = new WebSocket(url);
                init();
            } catch (e) {
                //进行重连;
                console.log('websocket连接错误');
                reConnect(socketUrl);
            }
        }
        //对WebSocket各种事件进行监听   
        function init() {
            socket.onopen = function () {
                //连接已经打开
                //重置心跳机制
                heart.start();
            }
            socket.onmessage = function (event) {
                //通过event.data获取server发送的信息
                //对数据进行操作
                console.log(event.data);
                //收到消息表示连接正常，所以重置心跳机制
                heart.start();
            }
            socket.onerror = function () {
                //报错+重连
                console.log('socket连接出错');
                reConnect(socketUrl);
            }
            socket.onclose = function () {
                console.log('socket连接关闭');
            }
        }
 
        //重连函数
        //因为重连函数会被socket事件频繁触发，所以通过函数节流限制重连请求发送
        function reConnect(url) {
            if (!flag) {
                return;
            }
            flag = false;
            setTimeout(function () {
                createWebsocket(url);
                flag = true;
            }, 3000)
}

特点

1. 建立在TCP协议上，服务端的实现更加容易
2. 与HTTP有良好的兼容性，在握手阶段采用HTTP协议，不容易被屏蔽，能够通过各种HTTP代理服务器
3. 数据格式轻量，性能开销小，通信高效
4. 可以发送文本，二进制数据等等
5. 不会出现跨域问题
6. 协议标识符ws , 如果加密则是wss
   HTTP是无状态的，webscoket解决了HTTP的被动性问题
   在HTTP1.1中可以发送多个request然乎接收多个response,但是request = response 而且response是被动获取的。

缺点

不支持低版本IE
可以使用ajax轮询和长轮询