5

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

 2 years ago
source link: https://blog.51cto.com/u_13734369/5558264
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

原创

一只大傻雕 2022-08-09 11:16:56 博主文章分类:Uni-app ©著作权

文章标签 自动重连 客户端 uniapp websockt 文章分类 其它 前端开发 阅读数195

最近关于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连接并接收推送的消息
uni-app中websocket的使用 断开重连、心跳机制_uniapp
将接收的消息转换成目标数据,并渲染
uni-app中websocket的使用 断开重连、心跳机制_客户端_02
如果主动关闭,则不进行重连,监听关闭事件
uni-app中websocket的使用 断开重连、心跳机制_uniapp_03
显示已关闭,不重连
uni-app中websocket的使用 断开重连、心跳机制_客户端_04
监听错误事件,比如地址,协议错误等,则会自动重连五次,五次重连仍失败后则需要进行手动重连
uni-app中websocket的使用 断开重连、心跳机制_客户端_05
uni-app中websocket的使用 断开重连、心跳机制_uniapp_06
uni-app中websocket的使用 断开重连、心跳机制_客户端_07
如果服务端主动断开,心跳机制会每隔一段时间发送一条数据给服务端,如果没有回复则会进行webScoket重连。
uni-app中websocket的使用 断开重连、心跳机制_uniapp_08
uni-app中websocket的使用 断开重连、心跳机制_websockt_09

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

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK