微信小程序实现WebSocket心跳重连

最近在开发小程序用到了WebSocket，小程序提供了相应的原生API，与H5的API使用方式上有一些区别，因此流行的H5的一些成熟的类库使用起来有些困难，而原生API又存在一些缺陷，因此就本身实现了一套心跳重连机制。

惯例，先简单介绍一下Websocket。

Websocket简介

Websocket是什么

WebSocket 是一种网络通讯协议。RFC6455 定义了它的通讯标准。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 链接上进行全双工通信的协议。

为何须要Websocket

HTTP 协议是一种无状态的、无链接的、单向的应用层协议。它采用了请求/响应模型。通讯请求只能由客户端发起，服务端对请求作出应答处理。

因此当咱们想服务器主动给客户端发送消息，HTTP是作不到的，咱们只能使用轮询或者长轮询来实现相似的功能，这样的方式效率低而且浪费资源，为了解决这样的问题，WebSocket诞生了。

小程序中的WebSocket

小程序WebSocket的API

把你给懒得！本身官网看去!

为何要作心跳重连

在使用原生WebSocket的时候，咱们常常会感受不太稳定，服务端发送的消息有时候客户端接收不到，或者是客户端发送的消息服务端接收不到，虽然WebSocket也提供了onError和onClose的方法，可是常常会有各类未知状况致使断开链接而并不触发Error或Close事件。这样就致使实际链接已经断开了，而客户端和服务端殊不知道，还在傻傻的等着消息来。

因此咱们要解决的问题就很清晰了：

保证链接状态，链接断开时让客户端与服务端都能知道，进而重连。

上代码

页面载入后,咱们链接socket先

onLoad(){
    this.linkSocket()
  },
  linkSocket(){
    let that = this
    wx.connectSocket({
      url: app.globalData.wsUrl + 'websocket?' + this.data.taskId + '&' + this.data.userId,
      success() {
        console.log('链接成功')
        that.initEventHandle()
      }
    })
  },
复制代码

绑定事件

而后调用initEventHandle来绑定各类各样的事件

initEventHandle(){
    let that = this
    wx.onSocketMessage((res) => {
      //收到消息
    })
    wx.onSocketOpen(()=>{
      console.log('WebSocket链接打开')
    })
    wx.onSocketError(function (res) {
      console.log('WebSocket链接打开失败')
    })
    wx.onSocketClose(function (res) {
      console.log('WebSocket 已关闭！')
    })
  },
复制代码

这个先放在这咱们一会往里填东西

断线重连

reconnect(){
    if (this.lockReconnect) return;
    this.lockReconnect = true;
    clearTimeout(this.timer)
    if (this.data.limit<12){
      this.timer = setTimeout(() => {
        this.linkSocket();
        this.lockReconnect = false;
      }, 5000);
      this.setData({
        limit: this.data.limit+1
      })
    }
  },
复制代码

咱们设置一个锁和最大的重连次数，避免出现无限重连的状况，为了避免给服务器太大的压力我这里设置的是5秒重试一次，最多请求12次。

改造一下initEventHandle这样咱们就能够实现通常的触发Error的断线重连。

initEventHandle(){
    let that = this
    wx.onSocketMessage((res) => {
      //收到消息
    })
    wx.onSocketOpen(()=>{
      console.log('WebSocket链接打开')
    })
    wx.onSocketError((res)=>{ 
      console.log('WebSocket链接打开失败')
      this.reconnect()
    })
    wx.onSocketClose((res)=> {
      console.log('WebSocket 已关闭！')
      this.reconnect()
    })
  },
复制代码

关键的来的---心跳对象

先撸为敬

let heartCheck = {
  timeout: 10000, 
  timeoutObj: null,
  serverTimeoutObj: null,
  reset: function () {
    clearTimeout(this.timeoutObj);
    clearTimeout(this.serverTimeoutObj);
    return this;
  },
  start: function () {
    this.timeoutObj = setTimeout(()=> {
      console.log("发送ping");
      wx.sendSocketMessage({
        data:"ping",
        // success(){
        //   console.log("发送ping成功");
        // }
      });
      this.serverTimeoutObj = setTimeout(() =>{
        wx.closeSocket(); 
      }, this.timeout);
    }, this.timeout);
  }
};
复制代码

心跳对象内timeout为每10秒发一次心跳,timeoutObj、serverTimeoutObj是清除定时器用的对象，reset方法重置定时器，start发送心跳。

继续改造咱们的initEventHandle

initEventHandle(){
    let that = this
    wx.onSocketMessage((res) => {
      //收到消息
      if (res.data == "pong"){
        heartCheck.reset().start()
      }else{
        \\处理数据
      }
    })
    wx.onSocketOpen(()=>{
      console.log('WebSocket链接打开')
      heartCheck.reset().start()
    })
    wx.onSocketError((res)=>{ 
      console.log('WebSocket链接打开失败')
      this.reconnect()
    })
    wx.onSocketClose((res)=> {
      console.log('WebSocket 已关闭！')
      this.reconnect()
    })
  },
复制代码

打开链接的时候调用start开始心跳,每隔10秒向服务端发送消息"ping",服务端接收到消息后给咱们回个话"pong",就好像微信聊天。

在吗?

在

在吗?

在

在吗?

滚

别看在吗很烦，至少能肯定大家俩仍是好友，要不他把你拉黑了你还不知道（有点跑题了）

若是超过10秒服务端还没回复“pong”，则认为链接断开的

我擦，敢删我好友，我这东北爷们的暴脾气这能忍？我把你也删了 。。。。。。。。。。。而后赶忙从新申请好友

这是暴脾气的客户端直接把链接关闭，调用closeSocket，但是一关闭咱们的onSocketClose事件又去重连了（渣男）

至此，心跳重连实现完毕

总结

Socket心跳重连在H5中能够有相似的实现，也有成熟的第三方库，好比说stomp+websocket+sockjs能够实现更加完整的更兼容的socket链接方案,能够下次给你们分享(看我心情)。

若是以为还行就点个赞鼓励一下我。

若是以为写得什么垃圾，点个赞惩罚一下我把。