微信小程序webSocket 重连,心跳,封装心得

     时间过得真快,不知不觉做小程序已经快1年了,这1年来学到了很多,感触最深的就是webSocket,但是小程序端的websocket很简单,所以我就简单的进行了一下封装,涉及到一些es6的语法,不懂的同学可以在文中了解到,还有this的指向,这个对js来说也挺重要的。

话不多说,上代码

如图所示: 使用export将我们定义的这个类暴露出去,export和import是es6的语法,深得node.js的模块化思想,在js编程中我们一定要好好运用这一思想,提高自己的编码水平。

   类中我们定义了一个静态变量初始化赋值为空对象,用于保存socketTask实例,getSocket是我们的一个入口函数,不管在小程序的那个页面想拿到socket都必须调用此方法,方法接受三个参数,前两个是变量,callback是一个回调函数,进入此方法后我们先判断callback,这段代码很好理解,就不多讲了。

 

如果callback存在的话,接下来判断webSocket实例是否存在,如果webSocket实例为空对象,则目前不存在socket链接,则调用检测该用户是否已经存在方法,如果存在,则判断socket的状态,这里给大家解释一下,socket实例会默认绑定一个属性,就是它的readyState,表示当前socket的状态,readyState的状态有4种,0表示connecting正在链接,1则表示open已经链接,2则表示closing,正在关闭,3表示closed已经关闭。   在这几种状态里你可以写自己的业务逻辑代码,在这里就不多介绍了。

这里是是否需要断线重连,socket断线的话有几种情况,这里我总结了三种,1:你自己主动关闭,2:网络断开,3:后台主动关闭。在这里我写了一个监听方法,监听网络状态是否改变,若存在网络,若需要重连,则调用入口方法,重新连接socket。

设置心跳的话,目的是为了保持长连接,这个很简单,这里就不展示了,原理就是你发给服务器一个ping,服务器就会回复你一个pong,可以通过定时器来实现。     剩下的大部分都是一些业务逻辑代码,这个大家都不一样,这里就不做展示了。

最后我的QQ是840942723,欢迎各位喜欢前端的小伙伴一起交流技术,后面我会把我在这大半年里面学到的东西分享出来,做一丝微弱贡献,虽然跟各位前端大佬比起来代码还很是稚嫩,但是慢慢就会变得优雅的,哈哈。