详解微信小程序实现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连接方案,可以下次给大家分享(看我心情)。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。