微信小程序websocket重连机制实现
最近在开发小程序用到了WebSocket,小程序提供了相应的原生API,与H5的API使用方式上有一些区别,所以流行的H5的一些成熟的类库使用起来有些困难,而原生API又存在一些缺陷,所以就自己实现了一套微信小程序websocket心跳重连机制。
具体的微信小程序WebSocket的API介绍,可以去小程序开发者中心查看,我这里就不做过多的解释。
为什么要做websocket心跳重连
在使用原生WebSocket的时候,我们经常会感觉不太稳定,服务端发送的消息有时候客户端接收不到,或者是客户端发送的消息服务端接收不到,虽然WebSocket也提供了onError和onClose的方法,但是经常会有各种未知情况导致断开连接而并不触发Error或Close事件。这样就导致实际连接已经断开了,而客户端和服务端却不知道,还在傻傻的等着消息来。
所以我们要解决的问题就很清晰了:
保证连接状态,连接断开时让客户端与服务端都能知道,进而重连。
上代码
页面载入后,我们连接socket先
onLoad(){
this.linkSocket()
},
linkSocket(){
let that = this
wx.connectSocket({
url: app.globalData.wsUrl + 'websocket?' + this.data.taskId + '&' + this.data.userId,
success() {
console.log('连接成功')
that.initEventHandle()
}
})
}
绑定事件
然后调用initEventHandle来绑定各种各样的事件
initEventHandle(){
let that = this
wx.onSocketMessage((res) => {
//收到消息
})
wx.onSocketOpen(()=>{
console.log('WebSocket连接打开')
})
wx.onSocketError(function (res) {
console.log('WebSocket连接打开失败')
})
wx.onSocketClose(function (res) {
console.log('WebSocket 已关闭!')
})
}
这个先放在这我们一会往里填东西
断线重连
reconnect(){
if (this.lockReconnect) return;
this.lockReconnect = true;
clearTimeout(this.timer)
if (this.data.limit<12){
this.timer = setTimeout(() => {
this.linkSocket();
this.lockReconnect = false;
}, 5000);
this.setData({
limit: this.data.limit+1
})
}
}
我们设置一个锁和最大的重连次数,避免出现无限重连的情况,为了不给服务器太大的压力我这里设置的是5秒重试一次,最多请求12次。
改造一下initEventHandle这样我们就可以实现一般的触发Error的断线重连。
initEventHandle(){
let that = this
wx.onSocketMessage((res) => {
//收到消息
})
wx.onSocketOpen(()=>{
console.log('WebSocket连接打开')
})
wx.onSocketError((res)=>{
console.log('WebSocket连接打开失败')
this.reconnect()
})
wx.onSocketClose((res)=> {
console.log('WebSocket 已关闭!')
this.reconnect()
})
}
关键的来的—心跳对象
先撸为敬
let heartCheck = {
timeout: 10000,
timeoutObj: null,
serverTimeoutObj: null,
reset: function () {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
return this;
},
start: function () {
this.timeoutObj = setTimeout(()=> {
console.log("发送ping");
wx.sendSocketMessage({
data:"ping",
// success(){
// console.log("发送ping成功");
// }
});
this.serverTimeoutObj = setTimeout(() =>{
wx.closeSocket();
}, this.timeout);
}, this.timeout);
}
}
心跳对象内timeout为每10秒发一次心跳,timeoutObj、serverTimeoutObj是清除定时器用的对象,reset方法重置定时器,start发送心跳。
继续改造我们的initEventHandle
initEventHandle(){
let that = this
wx.onSocketMessage((res) => {
//收到消息
if (res.data == "pong"){
heartCheck.reset().start()
}else{
\\处理数据
}
})
wx.onSocketOpen(()=>{
console.log('WebSocket连接打开')
heartCheck.reset().start()
})
wx.onSocketError((res)=>{
console.log('WebSocket连接打开失败')
this.reconnect()
})
wx.onSocketClose((res)=> {
console.log('WebSocket 已关闭!')
this.reconnect()
})
}
打开连接的时候调用start开始心跳,每隔10秒向服务端发送消息”ping”,服务端接收到消息后给我们回个话”pong”,就好像微信聊天。

如果超过10秒服务端还没回复“pong”,则认为连接断开的
我擦,敢删我好友,我这东北爷们的暴脾气这能忍?我把你也删了 。。。。。。。。。。。然后赶紧重新申请好友
这是暴脾气的客户端直接把连接关闭,调用closeSocket,可是一关闭我们的onSocketClose事件又去重连了(渣男)
至此,微信小程序websocket心跳重连实现完毕。
更多关于websocket断线重连机制的实现可以看看这篇文章:websocket断线重连机制的实现