Websocket心跳机制与vue2的响应式原理与缺陷

websocket实时传输中心脏跳动的机制或者说原理

WebSocket心跳机制

1、创建webSocket

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

2、websocket事件

3、WebSocket方法

WebSocket的心跳机制

问题：

（1）websocket在连接后，如果长时间服务端和客户端不发消息，服务端会把websocket给断开。

（2）存在网络忽然断开的情况，这时服务器端并没有触发onclose的事件。服务器会继续向客户端发送多余的信息，这些数据会丢失。

心跳重连机制

为了解决上面的问题，就需要⼀种机制来检测客户端和服务端是否处于正常的连接状态。因此就有了websocket的心跳机制。

⼼跳机制是客户端每隔⼀段时间会向服务端发送⼀个数据包，告诉服务端自己还活着，同时客户端会根据服务端是否会回传⼀个数据包来确定服务端是否还活着。
如果客户端没有收到回复，表示websocket断开连接或者网络出现问题，就需要重连。

const socket = new WebSocket('ws://localhost:8080'); // WebSocket 建立连接
const heartCheck = initHeartCheck()；// 初始化心跳检测对象

// WebSocket建立连接成功
socket.addEventListener('open', function (event) {
　　heartCheck.start();// 启动心跳检测
　　socket.send('Hello Server!');
});
// WebSocket接受到服务端消息
socket.addEventListener('message',function(event){
  heartCheck.start();// 启动心跳检测
})
// WebSocket 连接被关闭
socket.addEventListener('close',function(event){
  heartCheck.reset();// 启动心跳检测
})
// WebSocket 连接因错误而关闭
socket.addEventListener('error',function(event){
  heartCheck.reset();// 启动心跳检测
})

function initHeartCheck() {
        return {
            timeout: 2 * 1000, // 每2s向服务端发送一次消息
            serverTimeout: 10 * 1000, // 10s收不到服务端消息算超时
            timer: null,
            serverTimer: null,
            reset() { // 心跳检测重置
                clearTimeout(this.timer);
                clearTimeout(this.serverTimer);
                this.timer = null;
                this.serverTimer = null;
                return this;
            },
            start() { // 心跳检测启动
                this.reset();
                this.timer = setTimeout(() => { 
                    socket.send('ping'); // 定时向服务端发送消息
                    if (!this.serverTimer) {
                        this.serverTimer = setTimeout(() => {
                            // 关闭连接触发重连
                           console.log(new Date().toLocaleString(), "not received pong, close the websocket");
                          socket.close(); //关闭websocket或根据业务需求去重连 
                        }, this.serverTimeout);
                    }
                }, this.timeout);
            },
        }
    }

vue2实现响应式的原理与缺陷

原理：

vue2是通过Object.defineProperty进行数据劫持，并且通过订阅发布模式中的get和set进行响应，一旦有人读取数据会触发get函数，修改数据的时候则会触发set函数。

缺陷：

vue2响应式原理的缺陷：无法检测到引用数据类型，比如数组，对象中内部长度的变化，也无法通过角标的形式去追踪。