当前位置：网站首页>uni-app中websocket的使用 断开重连、心跳机制

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

2022-08-09 15:09:00 【51CTO】

前言

最近关于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连接并接收推送的消息

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

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

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

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

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

  8. 显示已关闭，不重连

    9. uni-app中websocket的使用 断开重连、心跳机制_客户端_04

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

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

    uni-app中websocket的使用 断开重连、心跳机制_客户端_06

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

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

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

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

代码

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

遇到问题

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

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://blog.51cto.com/u_13734369/5558264

边栏推荐

猜你喜欢

随机推荐