微信小程序中实现 WebSocket 心跳重连的策略与技巧

why 2540 2024-07-16

最近在开发小程序用到了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先

1

2

3

4

5

6

7

8

9

10

11

12

13

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来绑定各种各样的事件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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 已关闭!')

  })

},

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

断线重连

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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的断线重连。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

initEventHandle(){

  let that = this

  wx.onSocketMessage((res) => {

    //收到消息

  })

  wx.onSocketOpen(()=>{

    console.log(&#39;WebSocket连接打开&#39;)

  })

  wx.onSocketError((res)=>{

    console.log(&#39;WebSocket连接打开失败&#39;)

    this.reconnect()

  })

  wx.onSocketClose((res)=> {

    console.log(&#39;WebSocket 已关闭!&#39;)

    this.reconnect()

  })

},

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

先撸为敬

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

initEventHandle(){

  let that = this

  wx.onSocketMessage((res) => {

    //收到消息

    if (res.data == "pong"){

      heartCheck.reset().start()

    }else{

      \\处理数据

    }

  })

  wx.onSocketOpen(()=>{

    console.log(&#39;WebSocket连接打开&#39;)

    heartCheck.reset().start()

  })

  wx.onSocketError((res)=>{

    console.log(&#39;WebSocket连接打开失败&#39;)

    this.reconnect()

  })

  wx.onSocketClose((res)=> {

    console.log(&#39;WebSocket 已关闭!&#39;)

    this.reconnect()

  })

},

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

在吗?

在吗?

在吗?

别看在吗很烦,至少能确定你们俩还是好友,要不他把你拉黑了你还不知道(有点跑题了)

如果超过10秒服务端还没回复“pong”,则认为连接断开的

我擦,敢删我好友,我这东北爷们的暴脾气这能忍?我把你也删了 。。。。。。。。。。。然后赶紧重新申请好友

这是暴脾气的客户端直接把连接关闭,调用closeSocket,可是一关闭我们的onSocketClose事件又去重连了(渣男)

至此,心跳重连实现完毕

总结


Socket心跳重连在H5中可以有类似的实现,也有成熟的第三方库,比如说stomp+websocket+sockjs可以实现更加完整的更兼容的socket连接方案,可以下次给大家分享(看我心情)。

如果觉得还行就点个赞鼓励一下我。

如果觉得写得什么垃圾,点个赞惩罚一下我把。

image.png


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:获取小程序 unionid 的有效方法与步骤详解
下一篇:小程序开发过程中的经验梳理与成果总结
相关文章

 发表评论

暂时没有评论,来抢沙发吧~