©2020-2024 ioDraw All rights reserved
最近小程序中有使用到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通知处理就完成了，欢迎各位大佬评论