小程序 websocket

微信的 WebSocket 接口和HTML5的 WebSocket 基本一样，是HTTP协议升级来的，做为一个新的 Socket 在B/S上使用，它实现了浏览器与服务器全双工通信。

因为这里是做小程序，所以就不对 WebSocket 的底层和协议做过多的说明了，只是稍微介绍一下。想了解详细的 WebSocket 可以参考如下：

具体方法如下：

创建一个 WebSocket 连接。

监听WebSocket连接打开事件。

监听WebSocket错误。

通过 WebSocket 连接发送数据，需要先 wx.connectSocket ，并在 wx.onSocketOpen 回调之后才能发送。

监听WebSocket接受到服务器的消息事件。

关闭 WebSocket 连接。

定时心跳，按各种情况设置为10-20秒。心跳作用：通知后台保活，如果停止心跳消息，后台会主动断开，走断开流程。

使用过程中，可能因为网络问题，导致websocket断开连接，首先更具业务需求，判断是否需要重连，如果要重连不建议立刻重连，可做一个延迟 *** 作，再进行重连。

心跳宝典微信小程序还不错的，打开微信搜索ABC健康就可以轻松找到这个小程序，简单确认一些信息并开放摄像头等权限后就可以开始进行测试，期间没有看到半点广告或是收费的迹象，从单就这一点我就对这个小程序有了不少好感。用户的身体数据及相关测试入口在一个十分显眼的位置，点击中间的“+”符号既可进入测试，接下来只需要用食指覆盖闪光灯与摄像头即可，等待90秒即可获取血氧等基础信息，期间不要移动手指和手腕，以确保数据的准确性。测试过程中，我突然想到一些网友吐槽自己将血氧仪、智能手环放在水果等物品上，同样可以测出数据，在完成初次数据后，我找来刚买的砂糖橘，并使用ABC健康对这个橘子进行了一次“身体检测”。

有意思的事情出现了，在检测程序运行的初期，确实出现了心跳、心率等数据，但是很快就d出提示，ABC健康居然意识到正在检测的物体并非“手指”。看来ABC健康比市面上大多数类似的检测APP、小程序都要更“聪明”，背后恐怕也有专业团队在追踪和优化检测算法。

最近在开发小程序用到了WebSocket，小程序提供了相应的原生API，与H5的API使用方式上有一些区别，所以流行的H5的一些成熟的类库使用起来有些困难，而原生API又存在一些缺陷，所以就自己实现了一套心跳重连机制。

惯例，先简单介绍一下Websocket。

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。

所以当我们想服务器主动给客户端发送消息，HTTP是做不到的，我们只能使用轮询或者长轮询来实现类似的功能，这样的方式效率低并且浪费资源，为了解决这样的问题，WebSocket诞生了。

把你给懒得！自己官网看去!

在使用原生WebSocket的时候，我们经常会感觉不太稳定，服务端发送的消息有时候客户端接收不到，或者是客户端发送的消息服务端接收不到，虽然WebSocket也提供了onError和onClose的方法，但是经常会有各种未知情况导致断开连接而并不触发Error或Close事件。这样就导致实际连接已经断开了，而客户端和服务端却不知道，还在傻傻的等着消息来。

所以我们要解决的问题就很清晰了：

保证连接状态，连接断开时让客户端与服务端都能知道，进而重连。

页面载入后,我们连接socket先

然后调用initEventHandle来绑定各种各样的事件

这个先放在这我们一会往里填东西

我们设置一个锁和最大的重连次数，避免出现无限重连的情况，为了不给服务器太大的压力我这里设置的是5秒重试一次，最多请求12次。

改造一下initEventHandle这样我们就可以实现一般的触发Error的断线重连。

先撸为敬

心跳对象内timeout为每10秒发一次心跳,timeoutObj、serverTimeoutObj是清除定时器用的对象，reset方法重置定时器，start发送心跳。

继续改造我们的initEventHandle

---