小程序 webSocket 接入

2020-05-15  本文已影响0人  王芊芊

业务需求要求发送公告通知实时推送在线的所有用户以及一些数据实时统计(订单量)
因此记录一下该功能的实现

// 数据定义
let connectStatus = 0 // websocket 连接状态 0:未连接,1:已连接
let heartListen = null // 心跳
...
Page({

  /* 重连 */
  reconnect() {
    console.log('index-尝试重连')
    wx.closeSocket() // 重连之前手动关闭一次
    this.connectSocket()
  },
  /* 创建连接 */
  connectSocket: function () {
    //使用 wss 协议
    let that = this
    var url = 'wss://test.com';    // 写入自己的url
    console.log(url,'开始连接')
    wx.connectSocket({
      url: url,
      header: {
        'content-type': 'application/json'
      },
      method: 'post',
      success: res => {
        // console.log('连接成功', res)
        // 设置连接状态
        connectStatus = 1
        // 心跳
        clearInterval(heartListen)
        heartListen = setInterval(() => {
          if (connectStatus === 0) {
            console.log('监听到没心跳了,抢救一下')
            clearInterval(heartListen)
            that.reconnect()
          } else {
            //发送信息(后端指定的,我这儿是0)
            wx.sendSocketMessage({
              data: '0',
              success: function (ret) {
                console.log('发送', ret)
              },
              fail: function (resp) {}
            });
          }
        }, 55000)
      },
      fail: err => {
        console.error('连接失败')
      }
    })
    // 监听webSocket错误
    wx.onSocketError(res => {
      console.log('index-监听到 WebSocket 打开错误,请检查!')
      // 修改连接状态
      connectStatus = 0
    })
    // 监听WebSocket关闭
    wx.onSocketClose(res => {
      console.log('监听到 WebSocket 已关闭!')
      connectStatus = 0
    })
    // websocket打开
    wx.onSocketOpen(res => {
      console.log('监听到 WebSocket 连接已打开!')
    })
    // 收到websocket消息
    wx.onSocketMessage(res => {
      if (res.data!=1){
        var resdata = JSON.parse(res.data)
      }else{
        var resdata = res
      }
      that.getSocketMsg(resdata)  // 收到的消息为字符串,需处理一下
    })
  },
  /* 收到消息 */
  getSocketMsg(data) {
  // 收到的信息是字符串,需要JSON.parse()转成json
    console.log('收到消息', data)
    let that = this
    // let dataInfo = JSON.parse(data)
   ...
    // 此处根据数据返回写入对应业务需求的逻辑
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   this.connectSocket()
  },
})

html5 WebSocket的Js实例教程可以参考以下地址
https://www.cnblogs.com/tinywan/p/5894403.html

上一篇 下一篇

猜你喜欢

热点阅读