微信小程序websocket的使用

  感谢大家的点赞和转发，欢迎大家关注本人的博客。试用期指导，项目开发，简历优化，毕业设计/论文，欢迎添加本人微信。

 新人作者，欢迎关注和收藏👏🏻👏🏻

微信小程序中使用websocket分为两步：

1、现在微信公众平台的开发者工具中配置socket的域名

 2、开始编写使用websocket的业务代码

 2.1发起请求建立一个socket连接

let SocketTask = wx.connectSocket({
      url: 'wss://app-test.kidsplace.cn:18887',
      success: function (res) {
        console.log(res)
        that.setData({
          heartbeatfail: 0
        })
        that.setData({
          socketConect: true
        })
      },
      fail: function (err) {
        console.log(err)
      }
    })

这里是通过微信自带的一个wx.connectSocket函数来传入响应的socket域名和端口号来建立连接的，注意这个函数会返回一个SocketTask对象，里面包含了socket任务的信息，可以用来管理sock任务。一个微信小程序页面最多同时建立五条socket任务。 

 2.2监听socket连接建立，向服务器发送身份认证协议

SocketTask.onOpen((res) => {
     console.log(res)
     // that.startHeartBeat(that.data.socketTask[0])
     SocketTask.send({
       //向服务器发送消息
       data: JSON.stringify(params),
       success: function (res) {
         console.log(res, '发送成功了')
          
       },
       fail: function (err) {
         console.log(err, '发送失败了')
       }
     })
   })

这里通过SocketTask.onOpen来监听socket是否建立成功，如果建立成功在监听的回调中调用SocketTask.send()方法向服务器发送身份认证的报文，并且监听是否发送成功。 

 2.3身份认证成功后向服务器发送绑卡信息（本次业务需求），并且监听服务器发送的报文。

SocketTask.onMessage((res) => {
          //监听 WebSocket 接受到服务器的消息事件
          let data = JSON.parse(res.data)
          console.log(data, '服务器的消息')
          if (data.code == '200' && data.success && data.msgType == 'auth_ack') {
            let data = {
              type: "bindCard",
              cardId: that.data.cards[0].LeaguerCode,
              BusinessID:that.data.cards[0].BusinessID,
              phone: sessionService.get('userInfo').member.phone,
              memberId:  sessionService.get('userInfo').member.id,
              BusinessName:that.data.cards[0].BusinessName,//门店名称
              baseId:that.data.cards[0].LeaguerBaseID
            }
            SocketTask.send({
              data: JSON.stringify(data),
              success: function (res) {
                console.log(res, '绑卡认证信息发送成功')
              }
            })
          }
        })

这里调用SocketTask.onMessage()来监听服务发送的报文，成功的回调中会返回一个data用来存储服务发送的报文。 

2.4在离开页面的时候关闭socket

onUnload: function () {
    let that = this
    this.data.socketTask[0].close({
      success: function (res) {
        console.log(res, '离开页面关闭socket')
        that.stopHeartBeat() //离开页面并关闭socket之后停止心跳
      },
      fail: function (err) {
        console.log(err, '关闭socket失败了')
      }
    })
}

注意：小程序离开原生页面会调用onUnload生命周期，也就是销毁该页面的页面栈，而进入web-view页面则会调用onHide生命周期，因为web-view相当于盖在原生页面上的组件,因此销毁socket需要注意不同的场景调用不同的生命周期钩子

总结：经过这样几个步骤跟服务器建立一个基本的websocket连接就算是完成了。

注意：SocketTask.onOpen和ocketTask.onMessage都是自动监听的因此调用一次即可

在完成websocket连接的建立之后还需要建立一个心跳连接，心跳连接的作用是用来监听socket是否断开连接，如果断开连接需要进行自动重连。

startHeartBeat() {
    this.setData({
      heart: true
    })
    this.heartbeat()
  },
heartbeat() {
   let that = this
   if (!this.data.heart) {
     return
   }
   let data = {
     type: 'heartBeat',
     msg: 'this is heatbeat'
   }
   this.data.socketTask[0].send({
     data: JSON.stringify(data),
     success: function (res) {
       console.log(res, '心跳成功,连接正常')
       if (that.data.heart) {
         that.data.heartBeatTimeout = setTimeout(() => {
           that.heartbeat(that.data.socketTask[0])
         }, that.data.timeout)
       }
     },
     fail: function (err) {
       that.data.socketTask[0].onClose((err) => {
         console.log(err, '关闭的原因')
       })
       console.log(err, '心跳失败,连接中断')
       if (that.data.heartbeatfail > 2) {
         that.setData({
           socketTask: []
         })
         that.socekt()
       }
       if (that.data.heart) {
         that.data.heartBeatTimeout = setTimeout(() => {
           that.heartbeat(that.data.socketTask[0])
         }, that.data.timeout)
       }
       that.setData({
         heartbeatfail: that.data.heartbeatfail + 1
       })
     }
   })
 },

 这个心跳函数的主要逻辑就是在socket建立之后向服务端发送一个心跳消息，如果发送成功了就证明socket连接正常，设置一个定时器每隔一段时间就发送一次心跳，如果失败了也设置一个定时器每隔一段时间在发一次心跳，并且记录失败的次数，如果失败的次数超过上限，就会将socketTask的任务数组置空，然后停止心跳，重新执行socket()方法建立连接跟心跳，主要是一种递归的思想。

这样一个具有心跳机制的socket连接就完成建立了

  感谢大家的点赞和转发，欢迎大家关注本人的博客。试用期指导，项目开发，简历优化，毕业设计/论文，欢迎添加本人微信。

 新人作者，欢迎关注和收藏👏🏻👏🏻

 觉得作者写的不错或者心情愉悦的老板也可以投币打赏，感谢观看，希望能给大家带来帮助