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

编辑：宝哥软件园来源：互联网时间：2021-12-08

新天龙八部

角色扮演 | 1.85G

评分

立即下载

微信小程序实现WebSocket心跳重连(图1)

最近在小程序的开发中使用了WebSocket，小程序提供了相应的原生API，与H5的API有些不同。因此，H5一些流行的成熟类库很难使用，而原生API有一些缺陷，所以我自己实现了心跳重连机制。

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

Websocket简介

Websocket是什么

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

WebSocket是一种在单个TCP连接上进行全双工通信的协议，它是从HTML5开始的。

为什么需要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 ' web Socket？this . data . taskid ' ' this . data . userid，success(){ console . log(' connection successed ')that . initeventhandle()})})，复制代码

绑定事件

，然后调用initeventhandler绑定各种事件。

ititeventandlee(){ let那=thiswx . onscockettessage((RES)={//收到消息})wx . onscocketopen(()={ console . log(' WebSocket connection open ')})wx . onscocketerror(function(RES){ console . log(' WebSocket connection未能打开')})wx . onscocketclose(function(RES){ console . log(' WebSocket已关闭！')}}，复制代码。先把这个放在这里，我们以后再填。

断线重连

reconnect(){ if(this . lock reconnect)返回；this.lockReconnect=truecleartime out(this . timer)if(this . data . limit 12){ this . timer=setTimeout(()={ this . linksocket()；this.lockReconnect=false}, 5000);这个。setdata ({limit3360this。data.limit1}}}，复制代码。我们设置了锁和最大重连次数，避免无限重连。为了不给服务器太大压力，我在这里设置了5秒钟重试，最多请求12次。

修改initEventHandle，这样就可以实现触发错误的一般断开重连。

init偶数

tHandle(){ 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",就好像微信聊天。

微信小程序实现WebSocket心跳重连(图2)