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 时 ，被动断开则自动重连。

效果

1. webScoket连接并接收推送的消息
   
2. 将接收的消息转换成目标数据，并渲染
   
3. 如果主动关闭，则不进行重连，监听关闭事件
   
4. 显示已关闭，不重连
   
5. 监听错误事件，比如地址，协议错误等，则会自动重连五次，五次重连仍失败后则需要进行手动重连
   
   
   
6. 如果服务端主动断开，心跳机制会每隔一段时间发送一条数据给服务端，如果没有回复则会进行webScoket重连
   
   

代码

1. 新建 socket.js ， 将以下代码复制进去 ，向外暴露。

   import api from '@/common/js/config.js' // 接口Api，图片地址等等配置，可根据自身情况引入，也可以直接在下面url填入你的 webSocket连接地址
   class socketIO {
   	constructor(data, time, url) {
           this.socketTask = null
   		this.is_open_socket = false //避免重复连接
   		this.url = url ? url : api.websocketUrl  //连接地址
   		this.data = data ? data : null
   		this.connectNum = 1 // 重连次数
   		this.traderDetailIndex = 100 // traderDetailIndex ==2 重连
   		this.accountStateIndex = 100 // accountStateIndex ==1 重连
   		this.followFlake = false // followFlake == true 重连
   		//心跳检测
   		this.timeout = time ? time : 15000 //多少秒执行检测
   		this.heartbeatInterval = null //检测服务器端是否还活着
   		this.reconnectTimeOut = null //重连之后多久再次重连
   	}
   
   	// 进入这个页面的时候创建websocket连接【整个页面随时使用】
   	connectSocketInit(data) {
   		this.data = data
   		this.socketTask = uni.connectSocket({
   			url: this.url,
   			success: () => {
   				console.log("正准备建立websocket中...");
   				// 返回实例
   				return this.socketTask
   			},
   		});
   		this.socketTask.onOpen((res) => {
   			this.connectNum = 1
   			console.log("WebSocket连接正常！");
   			this.send(data)
   			clearInterval(this.reconnectTimeOut)
   			clearInterval(this.heartbeatInterval)
   			this.is_open_socket = true;
   			this.start();
   			// 注：只有连接正常打开中 ，才能正常收到消息
   			this.socketTask.onMessage((e) => {
   				// 字符串转json
   				let res = JSON.parse(e.data);
   				console.log("res---------->", res) // 这里 查看 推送过来的消息
   				if (res.data) {
   					uni.$emit('getPositonsOrder', res); 
   				}
   			});
   		})
   		// 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
   		uni.onSocketError((res) => {
   			console.log('WebSocket连接打开失败，请检查！');
   			this.socketTask = null
   			this.is_open_socket = false;
   			clearInterval(this.heartbeatInterval)
   			clearInterval(this.reconnectTimeOut)
   			uni.$off('getPositonsOrder')
   			if (this.connectNum < 6) {
   				uni.showToast({
   					title: `WebSocket连接失败，正尝试第${this.connectNum}次连接`,
   					icon: "none"
   				})
   				this.reconnect();
   				this.connectNum += 1
   			} else {
   				uni.$emit('connectError');
   				this.connectNum = 1
   			}
   
   		});
   		// 这里仅是事件监听【如果socket关闭了会执行】
   		this.socketTask.onClose(() => {
   			console.log("已经被关闭了-------")
   			clearInterval(this.heartbeatInterval)
   			clearInterval(this.reconnectTimeOut)
   			this.is_open_socket = false;
   			this.socketTask = null
   			uni.$off('getPositonsOrder')
   			if (this.connectNum < 6) {
   				this.reconnect();
   			} else {
   				uni.$emit('connectError');
   				this.connectNum = 1
   			}
   
   		})
   	}
       // 主动关闭socket连接
   	Close() {
   		if (!this.is_open_socket) {
   			return
   		}
   		this.socketTask.close({
   			success() {
   				uni.showToast({
   					title: 'SocketTask 关闭成功',
   					icon: "none"
   				});
   			}
   		});
   	}
   	//发送消息
   	send(data) {
   		console.log("data---------->", data);
   		// 注：只有连接正常打开中 ，才能正常成功发送消息
   		if (this.socketTask) {
   			this.socketTask.send({
   				data: JSON.stringify(data),
   				async success() {
   					console.log("消息发送成功");
   				},
   			});
   		}
   	}
   	//开启心跳检测
   	start() {
   		this.heartbeatInterval = setInterval(() => {
   			this.send({
   				"traderid": 10260,
   				"type": "Ping"
   			});
   		}, this.timeout)
   	}
   	//重新连接
   	reconnect() {
   		//停止发送心跳
   		clearInterval(this.heartbeatInterval)
   		//如果不是人为关闭的话，进行重连
   		if (!this.is_open_socket && (this.traderDetailIndex == 2 || this.accountStateIndex == 0 || this
   			.followFlake)) {
   			this.reconnectTimeOut = setInterval(() => {
   				this.connectSocketInit(this.data);
   			}, 5000)
   		}
   	}
   	/**
   	 * @description 将 scoket 数据进行过滤 
   	 * @param {array} array
   	 * @param {string} type 区分 弹窗 openposition 分为跟随和我的
   	 */
   	arrayFilter(array, type = 'normal', signalId = 0) {
   		let arr1 = []
   		let arr2 = []
   		let obj = {
   			arr1: [],
   			arr2: []
   		}
   		arr1 = array.filter(v => v.flwsig == true)
   		arr2 = array.filter(v => v.flwsig == false)
   		if (type == 'normal') {
   			if (signalId) {
   				arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId)
   				return arr1
   			} else {
   				return arr1.concat(arr2)
   			}
   		} else {
   			if (signalId > 0) {
   				arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId)
   				obj.arr1 = arr1
   			} else {
   				obj.arr1 = arr1
   			}
   			obj.arr2 = arr2
   			
   			return obj
   		}
   	}
   }
   module.exports = socketIO

2. 在入口文件中 将 socketIO 挂载在 Vue 原型上 ， 也可以按需引入置顶页面

   import socketIO from '@/common/js/scoket.js'
   Vue.prototype.socketIo = new socketIO()

3. 在需要用到webSocket的页面中使用如下方法（可根据自身业务需求进行整改）

   scoketClose() {
       this.socketIo.connectNum = 1
       const data = {
           "value1": "demo1"
           "value2": "demo2"
       }
       this.socketIo.send(data) // 这是给后端发送特定数据 关闭推送
       this.socketIo.Close() // 主动 关闭连接 ， 不会重连
   },
   
   getWebsocketData() {
       // 要发送的数据包
       const data = {
           "value": "value1",
           "type": "type1"
       }
       // 打开连接
       this.socketIo.connectSocketInit(data)
       // 接收数据
       uni.$on("getPositonsOrder", (res) => {
           this.connect = true
           const {
               Code,
               data
           } = res
           if (Code == xxxx) {
               // 根据后端传过来的数据进行 业务编写。。。
           } else {
              
           }
       })
       // 错误时做些什么
       uni.$on("connectError", () => {
           this.connect = false
           this.scoketError = true
       })
   }

4. 离开页面，记得断开连接。

   onUnload() {
       this.scoketClose()
       this.socketIo.traderDetailIndex = 100 // 初始化 tabIndex 
   }

遇到问题

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