WeChat 애플릿을 사용하여 WebSocket 하트비트 재연결 구현
- hzc앞으로
- 2020-06-15 10:30:253212검색
最近在开发小程序用到了WebSocket，小程序提供了相应的原生API，与H5的API使用方式上有一些区别，所以流行的H5的一些成熟的类库使用起来有些困难，而原生API又存在一些缺陷，所以就自己实现了一套心跳重连机制。
惯例，先简单介绍一下Websocket。
Websocket简介
Websocket是什么
WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
为什么需要Websocket
HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。
所以当我们想服务器主动给客户端发送消息，HTTP是做不到的，我们只能使用轮询或者长轮询来实现类似的功能，这样的方式效率低并且浪费资源，为了解决这样的问题，WebSocket诞生了。
小程序中的WebSocket
小程序WebSocket的API
把你给懒得！自己官网看去!
为什么要做心跳重连
在使用原生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초 이상 "퐁"이라고 응답하지 않으면 연결이 끊어진 것으로 간주됩니다
죄송합니다. 감히 제 친구를 삭제하시다니, 동북지방 남자의 난폭한 성격을 제가 어찌 참을 수 있겠습니까? 나도 당신을 삭제했습니다. . . . . . . . . . . 그럼 빨리 다시 친구 신청
직접 연결을 끊고 closeSocket을 호출하는 성격 나쁜 클라이언트인데, onSocketClose 이벤트를 닫자마자 다시 연결(scumbag)
이 시점에서 하트비트 재연결이 완료됩니다.
요약
소켓 하트비트 재연결은 H5에서 유사한 구현을 가질 수 있으며 성숙한 타사 라이브러리도 있습니다. 예를 들어, Stomp+websocket+sockjs는 더 완벽하고 호환 가능한 소켓 연결 솔루션을 달성할 수 있습니다. (기분에 따라 다릅니다.)
좋다고 생각하시면 좋아요와 격려 부탁드립니다.
글이 쓰레기라고 생각된다면 엄지손가락을 치켜세우고 벌을 주세요.
추천 튜토리얼: "WeChat 미니 프로그램"
위 내용은 WeChat 애플릿을 사용하여 WebSocket 하트비트 재연결 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!