【uniapp】uniapp之websocket心跳重连机制

快来打我* 2021-07-27 01:19 1957阅读 0赞

<script>
    export default {
    	data() {
    		return {
    			timeout: 30000, // 30s
    			timeoutObj: null
    		};
    	},
    	onLoad() {
    		// .判断是否已连接
    		this.checkOpenSocket();
    	},
    	methods: {
    		// 判断是否已连接
    		checkOpenSocket() {
    			uni.sendSocketMessage({
    				data: 'ping',
    				success: res => {
    					return;
    				},
    				fail: err => {
    					// 未连接打开websocket连接
    					this.openConnection();
    				}
    			});
    		},
    		openConnection() {
    			// 打开连接
    			// uni.closeSocket(); // 确保已经关闭后再重新打开
    			uni.connectSocket({
    				url: 'ws:........',
    				success(res) {
    					console.log('连接成功 connectSocket=', res);
    				},
    				fail(err) {
    					console.log('连接失败 connectSocket=', err);
    				}
    			});
    			uni.onSocketOpen(res => {
    				console.log('连接成功');
    			});
    			this.onSocketMessage(); // 打开成功监听服务器返回的消息
    		},
    		//	打开成功监听服务器返回的消息
    		onSocketMessage() {
    			// 消息
    			this.timeout = 30000;
    			this.timeoutObj = null;
    			uni.onSocketMessage(res => {
    				console.log(res)
    				this.getSocketMsg(res.data); // 监听到有新服务器消息
    			});
    		},
    		// 监听到有新服务器消息
    		getSocketMsg(reData) {
    			// 监听到服务器消息
    			console.log('收到服务器消息', reData);
    			this.reset();  // 检测心跳reset,防止长时间连接导致连接关闭
    		},
    		// 检测心跳reset
    		reset() {
    			clearInterval(this.timeoutObj);
    			this.start(); // 启动心跳
    		},
    		// 启动心跳 start
    		start() {
    			this.timeoutObj = setInterval(function() {
    				uni.sendSocketMessage({
    					data: 'ping',
    					success: res => {
    						console.log('连接中....');
    					},
    					fail: err => {
    						console.log('连接失败重新连接....');
    						this.openConnection();
    					}
    				});
    			}, this.timeout);
    		}
    	}
    };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，1957人围观）

还没有评论，来说两句吧...

相关阅读

相关 WebSocket心跳机制

目录 1 WebSocket简介 2 WebSocket事件与方法 2.1 创建WebSocket实例 2.2 WebSocket

秒速五厘米/ 2024年04月08日 11:29/ 0 赞/ 79 阅读

相关理解WebSocket心跳及重连机制

理解WebSocket心跳及重连机制在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服

Dear 丶/ 2023年10月18日 10:25/ 0 赞/ 19 阅读

相关理解WebSocket心跳及重连机制

在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些

落日映苍穹つ/ 2022年12月22日 08:48/ 0 赞/ 321 阅读

相关 java ftp 心跳_理解WebSocket心跳及重连机制

在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些

柔光的暖阳◎/ 2022年11月03日 11:08/ 0 赞/ 335 阅读

相关 vue + websocket心跳重连机制

注意！！！ 1. 当页面涉及到主动关闭连接的操作时，则不能在 this.onclose() 内调用 this.reconnect() 重连方法（除非你能够区分主动断开

川长思鸟来/ 2022年10月15日 07:58/ 0 赞/ 337 阅读

相关初探和实现websocket心跳重连

[初探和实现websocket心跳重连][websocket] 心跳重连缘由在使用websocket过程中，可能会出现网络断开的情况，比如信号不好，或者网络临时性关闭

我就是我/ 2022年06月05日 08:11/ 0 赞/ 244 阅读

相关初探和实现websocket心跳重连

心跳重连缘由在使用websocket过程中，可能会出现网络断开的情况，比如信号不好，或者网络临时性关闭，这时候websocket的连接已经断开，而浏览器不会执行webs

墨蓝/ 2022年05月30日 00:20/ 0 赞/ 255 阅读

相关 socket心跳重连机制

先看没有心跳重连的：[https://mp.csdn.net/postedit/87882743][https_mp.csdn.net_postedit_87882743]

港控/mmm°/ 2021年11月17日 09:18/ 0 赞/ 473 阅读

相关理解WebSocket心跳及重连机制

在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些

╰+哭是因爲堅強的太久メ/ 2021年08月13日 22:23/ 0 赞/ 540 阅读

相关【uniapp】uniapp之websocket心跳重连机制

<script> export default { data() { return { timeout: 30000, //

快来打我*/ 2021年07月27日 01:19/ 0 赞/ 1958 阅读