uni-app中websocket的使用 断开重连、心跳机制

前言

最近关于H5和APP的开发中使用到了webSocket，由于web/app有时候会出现网络不稳定或者服务端主动断开，这时候导致消息推送不了的情况，需要客户端进行重连。查阅资料后发现了一个心跳机制，也就是客户端间隔一段时间就向服务器发送一条消息，如果服务器收到消息就回复一条信息过来，如果一定时间内没有回复，则表示已经与服务器断开连接了，这个时候就需要进行重连。

被动断开则进行重连，主动断开的不重连。

说明：下图针对两个Tab项（Open Trades 和 Closed Trades），只希望在 tabIndex = 0 （Open Trades 高亮时）触发webSocket , 如果点击第二个栏目 , tabIndex = 1（Closed Trades高亮时）则主动关闭webSodket连接。

TabIndex = 0 时 ，被动断开则自动重连

原文链接：​ ​uni-app中websocket的使用 断开重连、心跳机制​​

效果

2. webScoket连接并接收推送的消息



4. 将接收的消息转换成目标数据，并渲染



6. 如果主动关闭，则不进行重连，监听关闭事件



8. 显示已关闭，不重连



10. 监听错误事件，比如地址，协议错误等，则会自动重连五次，五次重连仍失败后则需要进行手动重连







12. 如果服务端主动断开，心跳机制会每隔一段时间发送一条数据给服务端，如果没有回复则会进行webScoket重连。

代码

原文链接：​ ​uni-app中websocket的使用 断开重连、心跳机制​​

遇到问题

如果在使用中遇到什么问题 ，可以给我 ​ ​留言 ​​ ，看到留言后会在第一时间进行回复 。