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

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

why 2660 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先

onLoad(){
  this.linkSocket()
},
linkSocket(){
  let that = this
  wx.connectSocket({
    url: app.globalData.wsUrl + &#39;websocket?&#39; + this.data.taskId + &#39;&&#39; + this.data.userId,
    success() {
      console.log(&#39;连接成功&#39;)
      that.initEventHandle()
    }
  })
},

绑定事件

然后调用initEventHandle来绑定各种各样的事件

initEventHandle(){
  let that = this
  wx.onSocketMessage((res) => {
    //收到消息
  })
  wx.onSocketOpen(()=>{
    console.log(&#39;WebSocket连接打开&#39;)
  })
  wx.onSocketError(function (res) {
    console.log(&#39;WebSocket连接打开失败&#39;)
  })
  wx.onSocketClose(function (res) {
    console.log(&#39;WebSocket 已关闭！&#39;)
  })
},

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

断线重连

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(&#39;WebSocket连接打开&#39;)
  })
  wx.onSocketError((res)=>{ 
    console.log(&#39;WebSocket连接打开失败&#39;)
    this.reconnect()
  })
  wx.onSocketClose((res)=> {
    console.log(&#39;WebSocket 已关闭！&#39;)
    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(&#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连接方案,可以下次给大家分享(看我心情)。

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

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

小程序开发设计如何实现跨平台开发与管理满足企业多元化需求

2660 2024-07-16

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

小程序开发设计如何实现跨平台开发与管理满足企业多元化需求

如何利用信创开发框架提升企业小程序开发效率与合规性

小游戏的大机遇：实时内容互动引擎全新上线，开创互动新时代

最近发表

更多内容

小程序SDK

Finclip技术文档

小程序开发

小程序容器

小程序框架

Finclip小程序平台

Finclip用户投稿

车联网

推荐文章

小程序SDK是什么意思？小程序sdk和插件有什么区别？

小程序支付功能怎么实现？

企业app开发流程是什么？

app运营模式有哪些？

小程序多端引流怎么做？

小程序生态分析的机会和威胁

Flutter入门这一篇效率文章就够了

原生与跨平台解决方案分析,跨平台软件开发技术方案

热更新技术：让软件更新变得更加轻松快速

解决方案

银行解决方案

证券解决方案

互联网解决方案

政企OA解决方案

科技解决方案

loT解决方案

信任解决方案

热评文章

AppCan:基于混合模式的移动应用开发,移动混合模

Hybrid App混合模式开发的了解

小程序容器技术助力券商数字营销突围，小程序容器化的意

用mpvue开发微信小程序基础知识（vue.js开发

小程序多端框架全面测评对比，强烈推荐！

券商app架构 - 解析券商应用程序的构建与设计