支付宝小程序踩坑经验——WebSocket的连接与关闭

支付宝小程序WebSocket的相关监听事件

• 支付宝小程序WebSocket的每一次断开与连接都会将消息监听叠加而不是覆盖，导致一个信息接收多次，造成信息不准确。
• 微信小程序只会保留一次消息监听，将其余的覆盖掉。
• 一开始只注意uniapp给到的有关WebSocket的信息，他给到都有关开启的方法，遇到这个问题的时候，确实想到了在关闭链接的时候取消监听消息返回，却忘了去支付宝的文档中心查看。
• 附上链接:https://opendocs.alipay.com/mini/api/qc4q3t

解决思路：当关闭ws的链接时，监听到关闭成功后将用到的开启的相关ws的监听全部关闭，这样再连接是就不多出现多次消息返回了

• 代码：隐藏时关闭连接，显示时打开连接（ws即WebSocket）
• 这里我将支付宝的前缀my.改成了uni.，不过是都可以使用的，可能是uniapp支持这些接口并未写出来。

onShow: function() {
	console.log('app ws是否连接', this.wsstatus)
	//页面隐藏后 再显示了 就执行websoket连接
	// 延时获取状态值，要不获取的不是更新后的值
	setTimeout(()=>{
		console.log('app 显示了', this.wsstatus)
		if(!this.wsstatus){
			this.send_websoket({})
			.then(res=>{
				console.log('连接成功',res)
			}).catch(err=>{
				console.log('连接失败',err)
			})
		}
	},1000)
},
onHide: function() {
	console.log('App 被隐藏了', this.wsstatus);
	if (this.wsstatus) {
		uni.closeSocket({
			fail(err) {
				console.log('关闭失败', err)
			}
		});
		//监听是否关闭成功
		uni.onSocketClose((res) => {
			this.closews();
			console.log('WebSocket 已关闭！', res);
			// 链接关闭后切断所有监听
			// #ifdef MP-ALIPAY
			// 支付宝小程序的ws连接问题，关闭连接时需关闭对于接受，防止关闭失败
			uni.offSocketMessage();
			uni.offSocketError();
			uni.offSocketOpen();
			uni.offSocketClose();
			// #endif
		});
	}
	//小程序 隐藏了 3秒后关闭连接
}

我关闭了四个开启的监听，错误回调、开启监听、消息监听、链接监听
最好的是将开启的监听全部关闭，然后再打开，确保可以全部关闭，省的出现其他原因