（websocket）微信小程序心跳包和pc心跳包

1、我的开发方式全部为es6的语法，并且用es6的class方式封装心跳

2、代码仅供参考，虽然实际项目中个人是有使用的

3、所有代码我都用注释，就不仔细解释了。但是能用。

一、pc心跳

class WebSockets {
  constructor(opt) {
    //websocket实例
    this.ws = null;
    //url
    this.url = opt.url || null;
    //心跳数据
    this.heartdata = opt.heartdata || null;
    //多久发送一次心跳
    this.hearttime = opt.hearttime || 1000 * 50;
    //是否连接成功
    this.iscon = false;
    //重连序列
    this.isconnum = null;
    //多久重连一次,默认5秒
    this.contime = opt.contime || 3000;
    //心跳序列
    this.heartnum = null;
    //消息数据回调
    this.msg = opt.success || function() {};
    //是否关闭连接
    this.isclose = false;
  }
  //websocket连接
  wsConnect() {
    if (this.url) {
      this.ws = new WebSocket(this.url);
      this.monitor();
      return 1;
    } else {
      throw console.log("请输入地址");
    }
  }
  //监听事件
  monitor() {
    let ws = this.ws;
    if (!this.isclose) {
      //关闭
      ws.onclose = e => {
        console.log(e);
        this.err();
      };
      //报错时的回调函数
      ws.onerror = e => {
        console.log(e);
        this.err();
      };
      //连接成功
      ws.onopen = e => {
        console.log(e);
        this.succ();
        //连接成功需要马上发送一次数据
        this.ws.send(JSON.stringify(this.heartdata));
      };
      //收到服务器数据
      this.messagess();
    }
  }
  messagess() {
    //收到服务器数据
    this.ws.onmessage = e => {
      //console.log(e);
      this.msg(e);
      this.succ();
    };
  }
  //心跳数据
  heartbeatdata() {
    if (this.heartdata) {
      clearTimeout(this.heartnum);
      this.heartnum = setTimeout(() => {
        console.log("当前发送心跳：", this.heartdata);
        this.ws.send(JSON.stringify(this.heartdata));
      }, this.hearttime);
    } else {
      throw console.log("发送数据不能为空");
    }
  }
  //重连事件
  reConnect() {
    //只有连接失败的时候会进行重连
    if (!this.iscon) {
      clearTimeout(this.isconnum);

      this.isconnum = setTimeout(() => {
        console.log(this.isconnum + "重连……");
        this.wsConnect();
      }, this.contime);
    }
  }
  //成功处理事件
  succ() {
    //成功需要关闭重连事件，并且继续发送数据
    this.iscon = true;
    clearTimeout(this.isconnum);
    this.heartbeatdata();
  }
  //错误事件
  err() {
    if (!this.isclose) {
      //失败需要关闭成功事件，并且标注为失败，进入重连程序
      this.iscon = false;
      clearTimeout(this.heartnum);
      this.reConnect();
    }
  }
  //心跳数据修改
  soupdate(opt2) {
    if (opt2.data) {
      this.hearttime = opt2.data;
      this.ws.send(JSON.stringify(opt2.data));
      console.log(123, JSON.stringify(opt2.data));
      this.ws.onmessage = e => {
        console.log(e);
        opt2.success(e);
      };
    } else {
      console.log("填写心跳数据");
    }
  }
  //websocket关闭
  guanbi() {
    this.isclose = true;
    clearTimeout(this.isconnum);
    clearTimeout(this.heartnum);
    this.ws.close();
    console.log("websocket退出");
  }
}

/*
//初始使用方式
let sock = new socket({
  heartdata: "", //心跳数据包，必须
  hearttime: 1000, //心跳发送时间
  contime: 1000, //重连时间间隔建议3秒以上
  url: url, //看不懂枪毙
  success: e => {
          console.log(e);
        }
});
sock.wsConnect()
sock.guanbi() //关闭websocket


*/
export default WebSockets;

二、小程序心跳处理：

 

//采用类方式封装
class websocket{
  constructor(opt) {
    //多久重连一次
    this.reTime=opt.reTime || 5000;
    //重连延迟函数序列
    this.settime="";
    //是否连接成功
    this.isconnect=false;
    //心跳发送数据
    this.heartdata=opt.heartdata||{};
    //多久发送一次心跳
    this.heartbeatsettime = opt.hearttime || 1000 * 50;
    //心跳延迟函数序列
    this.heartstime=0;
    //url
    this.url=opt.url||"";
    //是否关闭心跳代码
    this.colse = false;
    //发送信息回调
    this.success = opt.success || function () {};
  }
  //连接
  connectsocket(){
    return new Promise((suc,err)=>{
      if(this.url){
        wx.connectSocket({
          url:`${this.url}?topic=${this.heartdata.topic}&action=${this.heartdata.action}&abbr=${this.heartdata.abbr}&openid=${this.heartdata.openid}`,
          success:task=>{
            //将websocket任务返回出去
            this.monitor();
            suc();
          },
          fail:err=>{
            console.log(1,err);
            this.fails();
            err();
          }
        });
      }else {
        console.log("未输入地址");
        err();
      }
    });
  };
  //错误连接发生重连
  chonglian(){
    //必须先清理之前的定时器
    let that= this;
    clearTimeout(this.settime);
    //判断是否连接成功，成功则不再进行重新连接
    if(!this.isconnect){
      //延迟发送
      this.settime = setTimeout(()=>{
        that.connectsocket();
      },this.reTime);
    }
  };
  //心跳发送
  heartbeat(){
    let sock = this.socket;
    //console.log(this.heartdata);
    //先清理之前的心跳
    clearTimeout(this.heartstime);
    this.heartstime=setTimeout(()=>{
      wx.sendSocketMessage({
        data:JSON.stringify(this.heartdata),
        success:e=>{
          //发送成功则代表服务器正常
          this.succ();
        },
        fail:e=>{
          //发送失败则代表服务器异常
          this.fails();
        }
      });
      //注意心跳多久一次
    },this.heartbeatsettime);
  }
  //监听事件
  monitor(){
    //检测异常关闭则执行重连
    wx.onSocketError((e)=>{
      console.log(e);
      this.fails();
    });
    wx.onSocketClose((e)=>{
      console.log(e);
      this.fails();
    });
    //连接成功则设置连接成功参数
    wx.onSocketOpen(()=> {
      //成功则关闭重连函数
      this.succ();
      //首次连接发送数据
      wx.sendSocketMessage({
        data:JSON.stringify(this.heartdata),
        success:()=>{
          //发送成功则代表服务器正常
          this.succ();
        },
        fail:e=>{
          //发送失败则代表服务器异常
          this.fails();
        }
      });
      //回调函数
    });
    //接收发送信息
    this.sendsucc();
  }
  sendsucc(){
    //监听发送心跳之后数据是否正常返回，返回则再发一次心跳
    wx.onSocketMessage(res=>{
      this.success(res);
      this.succ();
    });
  }
  //成功的处理
  succ(){
    this.isconnect = true;
    this.heartbeat();
  }
  //失败的处理
  fails(){
    if(!this.colse){
      this.isconnect=false;
      this.chonglian();
    }
  }
  //心跳修改函数
  heartup(e){
    let that = this;
    return new Promise((suc,err) => {
    if(e){
      that.heartdata = e;
      //修改心跳之后立刻发送一次数据,单独发送，不和心跳数据重叠，但是会取消之前的心跳队列
        wx.sendSocketMessage({
          data:JSON.stringify(e),
          success:e=>{
            //发送成功则代表服务器正常
            suc(e);
          },
          fail:e=>{
            //发送失败则代表服务器异常
            err(e);
          }
        });
      
    }else {
      err("请输入心跳数据");
    }
    });
  }
  //仅发送一次心跳数据
  heartone(e){
    return new Promise((suc,err) => {
      if(e){
        //修改心跳之后立刻发送一次数据,单独发送，不和心跳数据重叠，但是会取消之前的心跳队列
        wx.sendSocketMessage({
          data:JSON.stringify(e),
          success:e=>{
            //发送成功则代表服务器正常
            suc(e);
          },
          fail:e=>{
            //发送失败则代表服务器异常
            err(e);
          }
        });
      }else {
        err("请输入心跳数据");
      }
    });
  }
  //结束心跳代码
  guanbi(){
    this.colse = true;
    clearTimeout(this.settime);
    clearTimeout(this.heartstime);
    wx.closeSocket();
    console.log("websock关闭");
  }
}

module.exports=websocket;