首頁 > 微信小程式 > 小程式開發 > 用微信小程式實作WebSocket心跳重連

用微信小程式實作WebSocket心跳重連

hzc
發布: 2020-06-15 10:30:25
轉載
3272 人瀏覽過

最近在开发小程序用到了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(&#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連接方案,可以下次給大家分享(看我心情)。

如果覺得還好就按讚鼓勵我。

如果覺得寫得什麼垃圾,就點個讚懲罰我把。

用微信小程式實作WebSocket心跳重連

推薦教學:《微信小程式

以上是用微信小程式實作WebSocket心跳重連的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板