小程序 websocket

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

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

具体方法如下：

创建一个 WebSocket 连接。

监听WebSocket连接打开事件。

监指携听WebSocket错误。

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

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

关闭 WebSocket 连接。

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

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

最近在做 IOT 的项目，里面有个小程序要用到 webSocket ，借这个机会，封装了一个 uniapp小程序 适用的 Socket 类，包括断线重连，心跳检测等等，具体实现如下。

直知氏做接实例化封装的 socket 类，调用 initSocket 初始化就行了，当收到消息的时候，会核银触发全局 $emit 事件，只需要使用 $on 监听 message 事件就行。

我这边在 globalData 里面定义了 socketObj 全局变量，在首页 onShow 生命周期里面判断当前是否已经初始化了 socket 实例，再进行 *** 作。

home.vue

断线会自动重连。搭衡

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；

END

往期文章

个人主页

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

---