??感謝大家的點(diǎn)贊和轉(zhuǎn)發(fā)，歡迎大家關(guān)注本人的博客。試用期指導(dǎo)，項(xiàng)目開(kāi)發(fā)，簡(jiǎn)歷優(yōu)化，畢業(yè)設(shè)計(jì)/論文，歡迎添加本人微信。

?新人作者，歡迎關(guān)注和收藏????????

微信小程序中使用websocket分為兩步：

1、現(xiàn)在微信公眾平臺(tái)的開(kāi)發(fā)者工具中配置socket的域名

?2、開(kāi)始編寫(xiě)使用websocket的業(yè)務(wù)代碼

?2.1發(fā)起請(qǐng)求建立一個(gè)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)
      }
    })

這里是通過(guò)微信自帶的一個(gè)wx.connectSocket函數(shù)來(lái)傳入響應(yīng)的socket域名和端口號(hào)來(lái)建立連接的，注意這個(gè)函數(shù)會(huì)返回一個(gè)SocketTask對(duì)象，里面包含了socket任務(wù)的信息，可以用來(lái)管理sock任務(wù)。一個(gè)微信小程序頁(yè)面最多同時(shí)建立五條socket任務(wù)。?

?2.2監(jiān)聽(tīng)socket連接建立，向服務(wù)器發(fā)送身份認(rèn)證協(xié)議

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

這里通過(guò)SocketTask.onOpen來(lái)監(jiān)聽(tīng)socket是否建立成功，如果建立成功在監(jiān)聽(tīng)的回調(diào)中調(diào)用SocketTask.send()方法向服務(wù)器發(fā)送身份認(rèn)證的報(bào)文，并且監(jiān)聽(tīng)是否發(fā)送成功。?

?2.3身份認(rèn)證成功后向服務(wù)器發(fā)送綁卡信息（本次業(yè)務(wù)需求），并且監(jiān)聽(tīng)服務(wù)器發(fā)送的報(bào)文。

SocketTask.onMessage((res) => {
          //監(jiān)聽(tīng) WebSocket 接受到服務(wù)器的消息事件
          let data = JSON.parse(res.data)
          console.log(data, '服務(wù)器的消息')
          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,//門(mén)店名稱(chēng)
              baseId:that.data.cards[0].LeaguerBaseID
            }
            SocketTask.send({
              data: JSON.stringify(data),
              success: function (res) {
                console.log(res, '綁卡認(rèn)證信息發(fā)送成功')
              }
            })
          }
        })

這里調(diào)用SocketTask.onMessage()來(lái)監(jiān)聽(tīng)服務(wù)發(fā)送的報(bào)文，成功的回調(diào)中會(huì)返回一個(gè)data用來(lái)存儲(chǔ)服務(wù)發(fā)送的報(bào)文。?

2.4在離開(kāi)頁(yè)面的時(shí)候關(guān)閉socket

onUnload: function () {
    let that = this
    this.data.socketTask[0].close({
      success: function (res) {
        console.log(res, '離開(kāi)頁(yè)面關(guān)閉socket')
        that.stopHeartBeat() //離開(kāi)頁(yè)面并關(guān)閉socket之后停止心跳
      },
      fail: function (err) {
        console.log(err, '關(guān)閉socket失敗了')
      }
    })
}

注意：小程序離開(kāi)原生頁(yè)面會(huì)調(diào)用onUnload生命周期，也就是銷(xiāo)毀該頁(yè)面的頁(yè)面棧，而進(jìn)入web-view頁(yè)面則會(huì)調(diào)用onHide生命周期，因?yàn)閣eb-view相當(dāng)于蓋在原生頁(yè)面上的組件,因此銷(xiāo)毀socket需要注意不同的場(chǎng)景調(diào)用不同的生命周期鉤子

總結(jié)：經(jīng)過(guò)這樣幾個(gè)步驟跟服務(wù)器建立一個(gè)基本的websocket連接就算是完成了。

注意：SocketTask.onOpen和ocketTask.onMessage都是自動(dòng)監(jiān)聽(tīng)的因此調(diào)用一次即可

在完成websocket連接的建立之后還需要建立一個(gè)心跳連接，心跳連接的作用是用來(lái)監(jiān)聽(tīng)socket是否斷開(kāi)連接，如果斷開(kāi)連接需要進(jìn)行自動(dòng)重連。

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, '關(guān)閉的原因')
       })
       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
       })
     }
   })
 },

?這個(gè)心跳函數(shù)的主要邏輯就是在socket建立之后向服務(wù)端發(fā)送一個(gè)心跳消息，如果發(fā)送成功了就證明socket連接正常，設(shè)置一個(gè)定時(shí)器每隔一段時(shí)間就發(fā)送一次心跳，如果失敗了也設(shè)置一個(gè)定時(shí)器每隔一段時(shí)間在發(fā)一次心跳，并且記錄失敗的次數(shù)，如果失敗的次數(shù)超過(guò)上限，就會(huì)將socketTask的任務(wù)數(shù)組置空，然后停止心跳，重新執(zhí)行socket()方法建立連接跟心跳，主要是一種遞歸的思想。

這樣一個(gè)具有心跳機(jī)制的socket連接就完成建立了

??感謝大家的點(diǎn)贊和轉(zhuǎn)發(fā)，歡迎大家關(guān)注本人的博客。試用期指導(dǎo)，項(xiàng)目開(kāi)發(fā)，簡(jiǎn)歷優(yōu)化，畢業(yè)設(shè)計(jì)/論文，歡迎添加本人微信。

?新人作者，歡迎關(guān)注和收藏????????

?覺(jué)得作者寫(xiě)的不錯(cuò)或者心情愉悅的老板也可以投幣打賞，感謝觀看，希望能給大家?guī)?lái)幫助?

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-848497.html

到了這里，關(guān)于微信小程序websocket的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！