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的使用 断开重连、心跳机制​

效果

  1. webScoket连接并接收推送的消息
  2. uni-app中websocket的使用 断开重连、心跳机制

  3. 将接收的消息转换成目标数据,并渲染
  4. uni-app中websocket的使用 断开重连、心跳机制

  5. 如果主动关闭,则不进行重连,监听关闭事件
  6. uni-app中websocket的使用 断开重连、心跳机制

  7. 显示已关闭,不重连
  8. uni-app中websocket的使用 断开重连、心跳机制

  9. 监听错误事件,比如地址,协议错误等,则会自动重连五次,五次重连仍失败后则需要进行手动重连
  10. uni-app中websocket的使用 断开重连、心跳机制

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

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

  11. 如果服务端主动断开,心跳机制会每隔一段时间发送一条数据给服务端,如果没有回复则会进行webScoket重连。
  12. uni-app中websocket的使用 断开重连、心跳机制

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

代码

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

遇到问题

发表评论

相关文章