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

　　最近在开发小程序用到了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先

　　绑定事件

　　然后调用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事件又去重连了（渣男）

　　至此，心跳重连实现完毕

　　总结

　　Socket心跳重连在H5中可以有类似的实现，也有成熟的第三方库，比如说stomp+websocket+sockjs可以实现更加完整的更兼容的socket连接方案,可以下次给大家分享(看我心情)。

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。