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

最新推荐文章于 2024-11-09 19:42:33 发布

原创

最新推荐文章于 2024-11-09 19:42:33 发布 · 7k 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #websocket

该博客详细介绍了如何在小程序中使用WebSocket建立长连接，实现消息通知功能。主要步骤包括在app.js中初始化socket，设置心跳检测，监听socket的打开、关闭和消息事件，以及在用户登录状态变化时动态连接或关闭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) {
      //登录状态下调用连接socke