温州仰山乡用微信小程序实现WebSocket心跳重连

阅读 25226  ·  发布日期 2020-08-24 17:26  ·  温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】 最近在开发小程序用到了WebSocket,小程序提供了相应的原生API,与H5的API使用方式上有一些区别,所以流行的H5的一些成熟的类库使用起来有些困难,而原生API又存在一些缺陷,所以就自己实现了一套心跳重连机制。惯例,先简单介绍一下Websocket。Websocket简介Websocket是什么WebSocke... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...

用微信小程序实现WebSocket心跳重连

最近在开发小程序用到了WebSocket,小程序提供了相应的原生API,与H5的API使用方式上有一些区别,所以流行的H5的一些成熟的类库使用起来有些困难,而原生API又存在一些缺陷,所以就自己实现了一套心跳重连机制。
惯例,先简单介绍一下Websocket。
Websocket简介Websocket是什么WebSocket 是一种网络通信协议。
RFC6455 定义了它的通信标准。
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
为什么需要WebsocketHTTP 协议是一种无状态的、无连接的、单向的应用层协议。
它采用了请求/响应模型。
通信请求只能由客户端发起,服务端对请求做出应答处理。
所以当我们想服务器主动给客户端发送消息,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 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事件又去重连了(渣男)至此,心跳重连实现完毕总结Socket心跳重连在H5中可以有类似的实现,也有成熟的第三方库,比如说stomp+websocket+sockjs可以实现更加完整的更兼容的socket连接方案,可以下次给大家分享(看我心情)。
如果觉得还行就点个赞鼓励一下我。
如果觉得写得什么垃圾,点个赞惩罚一下我把。
推荐教程:
《微信小程序》以上就是用微信小程序实现WebSocket心跳重连的详细内容,更多请关注php中文网其它相关文章!
微信
分享相关标签:
微信小程序本文转载于:
掘金社区,如有侵犯,请联系a@php.cn删除
上一篇:
小程序开发经验的总结
下一篇:
微信小程序能被收藏吗?相关文章相关视频微信小程序 绝对路径 require微信小程序必须买域名吗微信小程序502是什么意思自学微信小程序从零到一:
项目构建后http请求封装用微信小程序实现WebSocket心跳重连微信小程序开发工具的安装初识微信小程序(1)深入了解微信小程序(一) [温州做小程序]