微信小程序–通过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中全局注册组件。
然后直接在想要使用的页面直接挂载就好了。