• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序实现websocket长连接以及断开连接之后自动重连

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

app.js

let socketMsgQueue = []
let isLoading = false

App({
  globalData: {
    userInfo: null,
    localSocket: {},
    callback: function () {}
  },
  showLoad() {
    if(!isLoading) {
      wx.showLoading({
        title: \'请稍后...\',
      })
      isLoading = true
    }
  },
  hideLoad() {
    wx.hideLoading()
    isLoading = false
  },
  initSocket() {
    let that = this
    that.globalData.localSocket = wx.connectSocket({
      // url: \'wss://test.enzhico.net/app\'
      url: \'wss://mapp.enzhico.net/app\'
    })
    that.showLoad()
    that.globalData.localSocket.onOpen(function (res) {
      console.log(\'WebSocket连接已打开!readyState=\' + that.globalData.localSocket.readyState)
      that.hideLoad()
      while (socketMsgQueue.length > 0) {
        var msg = socketMsgQueue.shift();
        that.sendSocketMessage(msg);
      }
    })
    that.globalData.localSocket.onMessage(function(res) {
      that.hideLoad()
      that.globalData.callback(res)
    })
    that.globalData.localSocket.onError(function(res) {
      console.log(\'readyState=\' + that.globalData.localSocket.readyState)
    })
    that.globalData.localSocket.onClose(function (res) {
      console.log(\'WebSocket连接已关闭!readyState=\' + that.globalData.localSocket.readyState)
      that.initSocket()
    })
  },
  //统一发送消息
  sendSocketMessage: function (msg) {
    if (this.globalData.localSocket.readyState === 1) {
      this.showLoad()
      this.globalData.localSocket.send({
        data: JSON.stringify(msg)
      })
    } else {
      socketMsgQueue.push(msg)
    }
  },
  onShow: function(options) {
    if (this.globalData.localSocket.readyState !== 0 && this.globalData.localSocket.readyState !== 1) {
      console.log(\'开始尝试连接WebSocket!readyState=\' + this.globalData.localSocket.readyState)
      this.initSocket()
    }
  }
})

 

page 页面 

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
  var that = this
  app.globalData.callback = function (res) {
   //res  接收websocket onMessage事件返回的数据
  }
}
//向服务器发送数据
app.sendSocketMessage(data: JSON.stringify({});
)

  

 

SocketTask

 这个对象是通过wx.connetSocket(obj)来获取的,他有一个属性值readyState,有4个状态值:

1 CONNECTING:0 连接中

2 OPEN:1 已连接

3 CLOSING:2 关闭中

4 CLOSED:3 已关闭

 刚开始我们使用的做法是全局一个变量socketOpen,用来表示这个socket是否打开,没有打开就重连,否则就直接调用发送消息接口了。但是经过测试发现网络不稳定,会出现这个变量没有得到及时更新一直是true。然后就不再去连接了,但实际上已经断开了

所以最后就把这个socketOpen变量去掉,直接判断SocketTask对象的属性值readyState,如果是1的话就表示直接可用;

 

 

 

基本思路:

1 全局维护一个SocketTask对象,用来表示websocket连接,小程序onShow时判断是否断线,是否需要重连

2 同时定义一个全局的回调函数callback回调函数,每个页面初始化的时候更新这个回调函数,那么每个页面中收到的返回信息就会执行当前页面逻辑

3 维护一个消息队列,所有的消息请求会首先判断连接是否可用,可用直接send,不可用将消息push到这个队列中。

4 在app.js的onShow函数中判断连接是否连上,如果没有连上就会触发websocket连接

5 SocketTask对象的onOpen()负责从消息队列中取出请求消息,并发送这个请求消息

6 SocketTask对象的onMessage() 负责接收返回消息。并调用每个页面自己定义的回调函数

7 SocketTask对象的onClose() 监听函数中,触发websocket连接

 

 

来自:https://blog.csdn.net/h_a_h_ahahah/article/details/80645939

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap