微信小程序--通过webSocket获取消息、监听数据、封装全局顶部消息通知

微信小程序–通过webSocket获取消息、监听数据、封装全局顶部消息通知

连接webSocket

推荐使用 SocketTask 的方式去管理 webSocket 链接，每一条链路的生命周期都更加可控，同时存在多个 webSocket 的链接的情况下使用 wx 前缀的方法可能会带来一些和预期不一致的情况。

这里推荐使用微信官方建议的SocketTask去管理webSocket链接，由于后面要做顶部消息提示，所以放到了app.js去处理。

// app.js
const { WS_API } = require('./utils/util')
App({
  onLaunch() {

  },
  connectWS() {
    let SocketTask
    let userInfo = wx.getStorageSync('userInfo')
    if (userInfo.uid) {
      SocketTask = wx.connectSocket({
        url: WS_API + userInfo.uid,
        success: (result) => {
          console.log(result, '连接成功')
        }
      })
      SocketTask.onOpen((res) => {
        console.log('连接成功')
      })
      SocketTask.onMessage(({ data }) => {
        if (data === '连接成功') return
        console.log(data, '接受到的数据')
        this.globalData.notify = data
      })
      SocketTask.onClose(() => {
        console.log('连接断开')
        this.connectWS()
      })
      SocketTask.onError((fail) => {
        console.log(fail, '连接失败')
      })
    }
  },
  globalData: {
    isLogin: false,
    notify: ''
	}
})

定义了连接的方法，接下来就是什么时候去调用了，这里放到了用户登录成功之后，改变app.js定义的全局参数，通过在app.js中监听这个参数的变化去调用连接。

监听数据

onLaunch() {
	// 这里当小程序重启的时候判断登录状态是否有效，有效则重连，失效则重新登录
    wx.checkSession({
      success: (res) => {
          if (res.errMsg === 'checkSession:ok') {
          this.connectWS()
        }
      },
      fail: (fail) => {
        wx.showModal({
          title: '提示',
          content: '登录状态失效请重新登录',
          showCancel: false,
          confirmText: '重新登陆',
          complete: () => {
            wx.clearStorageSync()
            wx.reLaunch({
              url: '/pages/login/login'
            })
          }
        })
      }
    })
    // 这里去监听全局参数isLogin的变化,为true调用方法连接
    Object.defineProperty(this.globalData, 'isLogin', {
      set: (val) => {
        if (val) {
          this.connectWS()
        }
      }
    })
  },

到这里在全局连接webSocket就做好了，接下来就是封装消息通知组件，将接收到的数据展示出来。

封装全局顶部消息通知

新建自定义组件，通知样式可根据自身情况封装，主要在js文件中去监听app.js中获取到的数据,并显示出来。

<!--components/myNotify/myNotify.wxml-->
<view class="myNotify_container">
  <van-transition 
    name="fade-down"
    show="{{show}}"
  >
    <view class="container_box">
      <van-icon name="circle" />
      <text class="container_boxText">{{text}}</text>
    </view>
  </van-transition>
</view>

/* components/myNotify/myNotify.wxss */
.myNotify_container {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: PingFangSC, PingFang SC;
  font-style: normal;
  width: 50%;
  z-index: 999;
}
.container_box {
  background-color: #fff;
  font-size: 24rpx;
  padding: 12rpx 20rpx;
  border-radius: 16rpx;
  box-shadow: inset 0rpx 0rpx 4rpx 4rpx rgba(0,0,0,0.05);
  color: #000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  line-height: 50rpx;
}
.container_boxText {
  margin-left: 5rpx;
}

// components/myNotify/myNotify.js
const app = getApp()
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },
  observers: {
    'show': function (val) {
      if (val) {
      	// 设置只显示1.5s
        setTimeout(() => {
          this.setData({
            show: false
          })
        }, 1500);
      }
    }
  },
  lifetimes: {
    attached: async function () {
    // 监听 app.js 中的全局参数也就是获取到的数据 notify
      Object.defineProperty(app.globalData, 'notify', {
        set: (val) => {
          console.log(val, '监听到app数值变化')
          this.changeShow(val)
        }
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    show: false,
    text: ''
  },


  /**
   * 组件的方法列表
   */
  methods: {
    changeShow(text) {
      setTimeout(() => {
        this.setData({
          show: true,
          text
        })
      }, 1500);
    },
  }
})

{
  "component": true,
  "usingComponents": {
    "van-transition": "@vant/weapp/transition/index",
    "van-icon": "@vant/weapp/icon/index"
  }
}

使用

需要将组件挂载到要显示的页面，如果页面很多可以直接在app.json中全局注册组件。

然后直接在想要使用的页面直接挂载就好了。

实现效果