微信小程序添加全局 socket 并接收消息通知

最近小程序中有使用到socket，来建立长连接，实现消息通知。总结一下实现思路。

首先，在app.js中初始化socket，并处理消息，添加心跳检测。

App({
  globalData: {
    supplierId: null,
    socketUrl: null, // socketUrl
    timeout: 10000, // 延迟
    socketHeartTimer: null,
    callback: function () {}, // socket连接回调函数
    socketClientTimer: null, // socket连接定时器
    isSocketConnect: false, // 当前socket是否连接
  },
  onShow() {
    // 检查用户登录状态，并决定是否开启socket
    this.checkLoginUserSocket();
    //判断是否登录 连接socket
    this.globalData.socketClientTimer = setInterval(() => {
      // 定时器---检查用户登录状态，并决定是否开启socket
      this.checkLoginUserSocket();
    }, 30000)
  },
  // 小程序进入后台
  onHide() {
    // 关闭全局socket状态连接定时器
    clearInterval(this.globalData.socketClientTimer)
    // 关闭socket
    this.closeSocketFunction()
  },
  // 检查用户登录状态，并决定是否开启socket
  checkLoginUserSocket() {
    this.globalData.supplierId = wx.getStorageSync('supplierId') || null;
    if (this.globalData.supplierId) {
      //登录状态下调用连接socket 且判断是否已经连接socket 
      if (!this.globalData.isSocketConnect) {
        // console.log("-----用户一登录---连接socket")
        this.connectSocketFunciton()
      }
    } else {
      // console.log("-----用户未登录--关闭socket")
      //未登录状态下清除定时器关闭socket
      this.closeSocketFunction()
    }
  },
  //小程序连接socket
  connectSocketFunciton() {
    var that = this
    var socketUrl = `wss://192。168.1.33/wss/websocket/${that.globalData.supplierId}`
    wx.connectSocket({
      url: socketUrl,
      success: (res => {
        // 标识socket已连接
        that.globalData.isSocketConnect = true
        // 初始化连接监听
        that.initEventHandler()
      }),
      fail: (fail => {})
    })
  },
  // 绑定监听
  initEventHandler() {
    var that = this
    // socket连接开启
    wx.onSocketOpen((result) => {
      // 开启心跳
      that.startHeart()
    })
    // socket连接关闭
    wx.onSocketClose((res) => {
      if (that.globalData.isSocketConnect) {
        that.connectSocketFunciton()
      }
    })
    // 接收socket消息
    wx.onSocketMessage((res) => {
      console.log("onSocketMessage", res)
      //第一次消息如果为init就绑定uid
      // var data = JSON.parse(res.data)
      //这里data可以根据后端返回的数据做一些处理 根据自己的需求做出对应的处理
      // 全局socket接收消息的方法回调
      that.globalData.callback(res)
    })
  },
  //发送心跳
  startHeart() {
    if (this.globalData.isSocketConnect) {
      this.globalData.socketHeartTimer = setInterval(() => {
        wx.sendSocketMessage({
          data: 'heartBath',
          success: function (res) {},
          fail: function (res) {}
        })
      }, 45 * 1000)
    } else {
      clearTimeout(this.globalData.socketHeartTimer)
    }
  },
  //此页面关闭socket和定时器的函数
  closeSocketFunction: function () {
    if (this.globalData.isSocketConnect) {
      // 标识socket已断开
      this.globalData.isSocketConnect = false
      // 关闭socket连接
      wx.closeSocket()
      // 关闭socket心跳定时器
      clearInterval(this.globalData.socketHeartTimer)
    }
  },
})

然后再接收到消息时添加回调方法：

// 接收socket消息
wx.onSocketMessage((res) => {
  console.log("onSocketMessage", res)
  //第一次消息如果为init就绑定uid
  // var data = JSON.parse(res.data)
  //这里data可以根据后端返回的数据做一些处理 根据自己的需求做出对应的处理
  // 全局socket接收消息的方法回调
  that.globalData.callback(res)
})

然后再需要进行通知处理的页面添加如下代码：

onShow() {
    this.onSoekctCallback();
},
// 收到消息处理
onSoekctCallback: function () {
    app.globalData.callback = (res) => {
        console.log("获取到消息了", res.data);
        if (res.data === 'success' || res.data === 'heartBath') return
        let { supplierId } = this.data;
        this.onRequireNoticeList(supplierId);
    }
},

最后，小程序的socket通知处理就完成了，欢迎各位大佬评论