近期由于工作需要开发微信小程序,需使用websocket进行连接,由于所要用来接收和发送websocket连接数据的页面比较多;同时发现如果不自定义心跳包,全局的调用生命周期只有onLanch和onShow ,由于onLanch只能在小程序注册时全局调用一次,而onShow只有在小程序进入后台再重新进入前台才能再次执行,故在websocket因网络或其它问题中断以后不能重新启动连接,故必须自定义心跳包。
但在个平台的大神文章中要么是在有心跳包的情况下,每个单独页面使用websocket;要么是在全局统一使用一个websocket而没有心跳包机制,参考借鉴了大神们的思路,自己做了一下改进,从而实现,全局统一使用一个websocket,且有心跳包机制,且其它数据不与心跳包干扰,下发到各个页面;欢迎大神们欢迎指教交流。
具体实现如下:
app.js
App({
globalData: {
ipw: "wss://www.*****.cn/******/",//自己的服务器网址
limit: 0,
timeout: 10000,
timeoutObj: null,
serverTimeoutObj: null,
callback: function () {},
},
onLaunch: function() {
this.linkSocket();
},
//建立websocket连接
linkSocket() {
var that = this
wx.connectSocket({
url: that.globalData.ipw + "webSocketServer.mn",
success() {
that.initEventHandle()
}
})
},
//绑定事件
initEventHandle() {
var that = this
wx.onSocketMessage((res) => {
if (res.data == "pong") {
that.reset()
that.start()
} else {
that.globalData.callback(res)
}
})
wx.onSocketOpen(() => {
console.log('WebSocket连接打开')
that.reset()
that.start()
})
wx.onSocketError((res) => {
console.log('WebSocket连接打开失败')
that.reconnect()
})
wx.onSocketClose((res) => {
console.log('WebSocket 已关闭!')
that.reconnect()
})
},
//重新连接
reconnect() {
var that = this;
if (that.lockReconnect) return;
that.lockReconnect = true;
clearTimeout(that.timer)
if (that.globalData.limit < 10) {//连接10次后不再重新连接
that.timer = setTimeout(() => {
that.linkSocket();
that.lockReconnect = false;
console.log("次数:" + that.globalData.limit)
}, 5000);//每隔5秒连接一次
that.globalData.limit = that.globalData.limit + 1
}
},
//心跳包开始
reset: function () {
var that = this;
clearTimeout(that.globalData.timeoutObj);
clearTimeout(that.globalData.serverTimeoutObj);
return that;
},
start: function () {
var that = this;
var randomNum = that.randomWord(false, 16);//生成随机码
that.globalData.timeoutObj = setTimeout(() => {
console.log("发送ping");
wx.sendSocketMessage({
data: randomNum + "ping",
success() {
console.log("发送ping成功");
}
});
that.globalData.serverTimeoutObj = setTimeout(() => {
wx.closeSocket();
}, that.globalData.timeout);
}, that.globalData.timeout);
},
//心跳包结束
//创建随机数,服务器用来存储是哪个小程序的心跳包的key,由于本案逻辑需要与其它信息存储的key分开,如果逻辑不需要,可以不进行分离,自定义存储的key
randomWord: function (randomFlag, min, max) {
var str = "",
range = min,
arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
// 随机产生
if (randomFlag) {
range = Math.round(Math.random() * (max - min)) + min;
}
for (var i = 0; i < range; i++) {
var pos = Math.round(Math.random() * (arr.length - 1));
str += arr[pos];
}
return str;
}
})
PageA.js
var app = getApp();
Page({
onShow: function() {
var that = this;
app.globalData.callback = function (res) {//接收服务器发来的非心跳包数据
/**
*里面写收到服务器发来的非心跳包数据,根据业务需求做后续逻辑处理
*/
}
},
example:function(){//根据业务需求自己定义名称,此处为举例
wx.sendSocketMessage({
data: "要向服务器发送的数据",
})
}
其它页面同PageA;至此功能完结,如有疑问,欢迎留言。