工作当中所遇到的问题以及解决方式
起初本人的设计方式为：

前后端两端进行websocket通信

1：前端基础的连接以及消息发送和接收

2：后端基础的消息接收和发送

过程中问题暴露：

建立连接之后，10分钟内没有消息间的通信；websocket会自动断开连接

解决方式：

前端加入心跳包机制
后端接收心跳包之后不进行任何消息的接收

直接附上代码：

注：此代码为提供思路代码
<script>
export default {
    data() {
        return {
            websock: null,//建立的连接
            lockReconnect: false,//是否真正建立连接
            timeout: 28*1000,//30秒一次心跳
            timeoutObj: null,//心跳心跳倒计时
            serverTimeoutObj: null,//心跳倒计时
            timeoutnum: null,//断开 重连倒计时
        };
    },
    created() {
        //页面刚进入时开启长连接
        this.initWebSocket();
    },
    destroyed: function() {
        //页面销毁时关闭长连接
        this.websocketclose();
    },
    methods: {
        initWebSocket(){//建立连接
            //初始化weosocket
            //const wsuri = "ws://sms.填写您的地址.com/websocket/" + this.charId; //ws地址
           const wsuri = "" 
           //建立连接
            this.websock = new WebSocket(wsuri);
            //连接成功
            this.websock.onopen = this.websocketonopen;
            //连接错误
            this.websock.onerror = this.websocketonerror;
            //接收信息
            this.websock.onmessage = this.websocketonmessage;
            //连接关闭
            this.websock.onclose = this.websocketclose;
        },
        reconnect() {//重新连接
            var that = this;
            if(that.lockReconnect) {
                return;
            };
            that.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            that.timeoutnum && clearTimeout(that.timeoutnum);
            that.timeoutnum = setTimeout(function () {
                //新连接
                that.initWebSocket();
                that.lockReconnect = false;
            },5000);
        },
        reset(){//重置心跳
            var that = this;
            //清除时间
            clearTimeout(that.timeoutObj);
            clearTimeout(that.serverTimeoutObj);
            //重启心跳
            that.start();
        },
        start(){//开启心跳
            var self = this;
            self.timeoutObj && clearTimeout(self.timeoutObj);
            self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
            self.timeoutObj = setTimeout(function(){
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                if (self.websock.readyState == 1) {//如果连接正常
                    self.websock.send("heartCheck");
                }else{//否则重连
                    self.reconnect();
                }
                self.serverTimeoutObj = setTimeout(function() {
                    //超时关闭
                    self.websock.close();
                }, self.timeout);

            }, self.timeout)
        },
        
        websocketonopen() {//连接成功事件
          
            //提示成功
            s.success("连接成功",3)
            //开启心跳
            this.start();
        },
        
        websocketonerror(e) {//连接失败事件
            //错误
            console.log("WebSocket连接发生错误");
            //错误提示
            s.error("Websocket error, Check you internet!")
            //重连
            this.reconnect();
        },
        websocketclose(e) {//连接关闭事件
            //关闭
            console.log("connection closed (" + e.code + ")");
            //提示关闭
            s.error("连接已关闭",3);
            //重连
            this.reconnect();
        },
        websocketonmessage(event) {//接收服务器推送的信息
            //打印收到服务器的内容
            console.log(event.data);
            //收到服务器信息，心跳重置
            this.reset();
        },
        websocketsend(msg) {//向服务器发送信息
            //数据发送
            this.websock.send(msg);
        },
    }
};

</script>

HeartPongWebsocket.js
/**
 * `WebsocketHeartbeatJs` constructor.
 *
 * @param {Object} opts
 * {
 *  url                  websocket链接地址
 *  pingTimeout 未收到消息多少秒之后发送ping请求，默认15000毫秒
    pongTimeout  发送ping之后，未收到消息超时时间，默认10000毫秒
    reconnectTimeout onreconnect之后2秒， 进行init
    pingMsg
 * }
 * @api public
 */

function WebsocketHeartbeatJs({
  url,
  pingTimeout = 15000,
  pongTimeout = 20000,
  reconnectTimeout = 2000,
  pingMsg = 'ping',
}){
  this.opts = {
    url: url,
    pingTimeout: pingTimeout,
    pongTimeout: pongTimeout,
    reconnectTimeout: reconnectTimeout,
    pingMsg: pingMsg,
  };
  this.ws = null; // websocket实例

  // override hook function
  this.onclose = () => {};
  this.onerror = () => {};
  this.onopen = () => {};
  this.onmessage = () => {};
  this.onreconnect = () => {};

  this.createWebSocket();
}
WebsocketHeartbeatJs.prototype.createWebSocket = function(){
  try {
    this.ws = new WebSocket(this.opts.url);
    this.initEventHandle();
  } catch (e) {
    // this.reconnect();  // 暂时注释掉重连， 配合后端
    throw e;
  }
};

WebsocketHeartbeatJs.prototype.initEventHandle = function() {
  this.ws.onclose = () => {
    this.onclose();
    // this.reconnect(); // 暂时注释掉重连， 配合后端
  };
  this.ws.onerror = () => {
    this.onerror();
    // this.reconnect(); // 暂时注释掉重连， 配合后端
  };
  this.ws.onopen = () => {
    this.onopen();
    //心跳检测重置
    this.heartCheck();
  };
  this.ws.onmessage = (event) => {
    this.onmessage(event);
    //如果获取到消息，心跳检测重置
    //拿到任何消息都说明当前连接是正常的
    this.heartCheck();
  };
};

WebsocketHeartbeatJs.prototype.reconnect = function(){
  if(this.lockReconnect || this.forbidReconnect) return;
  this.lockReconnect = true;
  this.onreconnect();
  //没连接上会一直重连，设置延迟避免请求过多
  setTimeout(() => {
    this.createWebSocket();
    this.lockReconnect = false;
  }, this.opts.reconnectTimeout);
};
WebsocketHeartbeatJs.prototype.send = function(msg){
  this.ws.send(msg);
};
//心跳检测
WebsocketHeartbeatJs.prototype.heartCheck = function(){
  this.heartReset();
  this.heartStart();
};
WebsocketHeartbeatJs.prototype.heartStart = function(){
  if(this.forbidReconnect) return;//不再重连就不再执行心跳
    this.pingTimeoutId = setTimeout(() => {
      //这里发送一个心跳，后端收到后，返回一个心跳消息，
      //onmessage拿到返回的心跳就说明连接正常
      this.ws.send(this.opts.pingMsg);
      // // 后端未加重连，因此注释掉该段。
      /*  start 如果超过一定时间还没重置，说明后端主动断开了 */
      // this.pongTimeoutId = setTimeout(() => {
      //   //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
      //   this.ws.close();
      // }, this.opts.pongTimeout);
      /*  end 如果超过一定时间还没重置，说明后端主动断开了 */
  }, this.opts.pingTimeout);
};
WebsocketHeartbeatJs.prototype.heartReset = function(){
  clearTimeout(this.pingTimeoutId);
  clearTimeout(this.pongTimeoutId);
};
WebsocketHeartbeatJs.prototype.close = function(){
  //如果手动关闭连接，不再重连
  this.forbidReconnect = true;
  this.heartReset();
  this.ws.close();
};
if(window) window.WebsocketHeartbeatJs = WebsocketHeartbeatJs;
export default WebsocketHeartbeatJs;


使用的文件：
import HeartPongWebSocketF from './knowledgeDialog/HeartPongWebSocketF'; // websocket 心跳包

const WEB_URL = 'xxxxxx';
this.ws = new HeartPongWebSocketF({ url: WEB_URL });

web socket 心跳包的实现方案05/30/2010
现在网络环境错综复杂，socket心跳包是获得健康强壮的连接的有效解决方案，今天，我们就在web socket中实现心跳包方案，是的，尽管我们只是做一个简单的聊天室，但我们让他稳定可靠一些一点也没有错。
我的心跳包方案很是简单，原理就是间隔发送心跳包数据给服务器，服务器在一定时间内发回心跳包响应，对比超时限定，如果超过设定的超时时间，则认为当前与服务器的websocket连接已经断开，关闭当前web socket连接，善后处理，例如重新连接，或者弹出提示……
比较有用的核心代码是这样子的：
function keepalive( ws ){
var time = new Date();
if( last_health != -1 && ( time.getTime() - last_health > health_timeout ) ){
//此时即可以认为连接断开，可设置重连或者关闭连接
$("#keeplive_box").html( "服务器没有响应." ).css({"color":"red"});
//ws.close();
}
else{
$("#keeplive_box").html( "连接正常" ).css({"color":"green"});
if( ws.bufferedAmount == 0 ){
ws.send( '~H#C~' );
}
}
}
这就是心跳函数，发送心跳包和检测心跳健康度。我们将其植入到websocket的onopen事件中，来开启心跳检测。像这样：
var ws = new WebSocket( to_url );
ws.onopen=function(){
$("#statustxt").html("connected.");
$("#send_btn").attr("disabled", false);
heartbeat_timer = setInterval( function(){keepalive(ws)}, 1000 );
}
是的，这样子就可以实现web socket的心跳包，这里有些类似于多线程的发送方式，在发送心跳包的同时，并不影响正常的数据通信，我们的例子还是以上次的websocket聊天室来改进，我们可以发现，心跳包运行过程中，并不会干扰到我们的正常聊天。服务端我也进行了一些修改，原理类似，在超过一定时间内都没有收到客户端发来的心跳包，则认为该客户端已经掉线，关闭连接，收回资源。
现在，有一个新的问题出现，如果我们要用php socket来模拟心跳包技术，该怎么实现？各位路过的朋友请多指教，感恩戴德。

WebSocket心跳及重连机制
在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳，说明还活着，没有心跳说明已经挂掉了。
1.为什么叫心跳包呢

它就像心跳一样每隔固定的时间发一次，来告诉服务器，我还活着。

2.心跳机制

心跳机制是每隔一段时间会向服务器发送一个数据包，告诉服务器自己还活着，同时客户端会确认服务器端是否还活着，如果还活着的话，就会回传一个数据包给客户端来确定服务器端也还活着，否则的话，有可能是网络断开连接了。需要重连~

3.如何实现心跳机制

Websocket的前后端交互

首先实现并且理解这篇文章之后，那就很简单了，我们只需要将js部分稍微重写一下

$(function () {
    createWebSocket();
});

//避免重复连接
var lockReconnect = false;
var wsUrl = "ws://localhost:8888/websocket/name";
var websocket = null;
var tt = null;
function createWebSocket() {
    try {
        websocket = new WebSocket(wsUrl);
        init();
    } catch(e) {
        console.log('catch');
        reconnect(wsUrl);
    }
}

function init() {

    //连接发生错误的回调方法
    websocket.onerror = function(){
        console.log("socket连接失败");
        //重连
        reconnect(wsUrl);
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        console.log("socket连接已打开");
        //心跳检测重置
        heartCheck.start();
    };

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        console.log("后台接收到前台传送的值，还有心跳...");
        //心跳检测重置
        heartCheck.start();
        setMessageInnerHTML(event.data);
    };

    //连接关闭的回调方法
    websocket.onclose = function(){
        console.log("socket连接已关闭");
        //重连
        reconnect(wsUrl);
    };

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    };
}


//重连函数
function reconnect(url) {
    if(lockReconnect) {
        return;
    };
    lockReconnect = true;
    //没连接上会一直重连，设置延迟避免请求过多
    tt && clearTimeout(tt);
    tt = setTimeout(function () {
        createWebSocket(url);
        lockReconnect = false;
    }, 20000);
}


//心跳检测
var heartCheck = {
    //每隔几秒测试一下心跳是否在继续
    timeout: 10000,
    timeoutObj: null,
    serverTimeoutObj: null,
    start: function(){
        console.log('开始测试心跳');
        var self = this;
        this.timeoutObj && clearTimeout(this.timeoutObj);
        this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
        this.timeoutObj = setTimeout(function(){
            //这里发送一个心跳，后端收到后，返回一个心跳消息，
            console.log('发送消息，测试后台是否运行中...');
            //任意发一个消息过去，后台接收，在init()中的onmessage收到消息，说明后台没有挂掉，有心跳
            websocket.send("666");
            self.serverTimeoutObj = setTimeout(function() {
                console.log("后台挂掉，没有心跳了....");
                console.log("打印websocket的地址:"+websocket);
                websocket.close();
                // createWebSocket();
            }, self.timeout);

        }, this.timeout)
    }
};


//关闭连接
function closeWebSocket(){
    websocket.close();
}

//发送消息
function send(){
    var message = document.getElementById('text').value;
    websocket.send(message);
}

4.实现的效果

当我们实现心跳重连之后，不管是我们断网还是程序停止之后，前端都会每隔一段时间向后端发起请求，只要程序重新打开或者重新联网，项目都会重新开始运行！
项目学习:理解WebSocket心跳及重连机制