MingGaoApp_vue/MingGaoApp/App.vue

<script>
	export default {
		globalData: {
			token: "",

			// 文本消息
			socketTask: null,
			urlData: "wss://www.toreskj.com/api/api_gateway?method=control_center.real_time.im_message",
			// urlData: "ws://192.168.1.17:12345/api/api_gateway?method=control_center.real_time.im_message",
			is_open_socket: false, // 确保websocket是打开状态
			list: [],
			userId: null, // 用户ID

			// 即构
			video: null, //房间密码和token

			// 测试 - 心跳检测
			status: null, // websocket是否关闭
			lockReconnect: false, // 避免重复连接
			// timeout: 5000, // 多少秒执行监测
			timeout: 10000, // 多少秒执行监测
			timeoutObj: null, // 检测服务器端是否还活着
			reconnectTimeOutObj: null, // 重连之后多久再次重连
			// 测试
			app: [],
			
			// 消息发送加载
			msgSetTime: null,
		},
		onLoad() {},
		onLaunch: function() {
			console.log('启动了')
			// App启动

			var that = this
			// uni.getStorage({
			// 	key: 'session_key',
			// 	success: function(res) {
			// 		that.globalData.token = res.data
			// 		// console.log('登录成功了')
			// 		that.msgInit(); // 文本初始化
			// 	},
			// 	fail: function(err) {
			// 		console.log(err)
			// 		console.log('没有登录成功')
			// 	}
			// })
		},
		onShow: function() {
			var that = this
			// App展示在前台
			console.log('+++++++++++++++++++App Show-------------------------------------')
			// this.msgInit(); // 再进行请求
			uni.getStorage({
				key: 'session_key',
				success: function(res) {
					that.globalData.token = res.data
					// console.log('登录成功了')
					console.log(res)
					that.msgInit(); // 文本初始化
				},
				fail: function(err) {
					console.log(err)
					console.log('没有登录成功')
				}
			})
		},
		onHide: function() {
			// App不再再展示在前台
			this.close(); // 关闭
		},
		methods: {
			// 实时通信 - 初始化
			msgInit() {
				console.log('进入了实时通信初始化=--------------------------', this.globalData.token)
				var that = this
				// 连接webscoket
				that.globalData.socketTask = uni.connectSocket({
					url: this.globalData.urlData + "&token=" + that.globalData.token,
					success(data) {
						// console.log("websocket连接中");
					}
				});

				// 发送消息 - 获取对话列表
				var obj = {
					'action': 'list', // 动作标识，必填
					'recv_user_id': '', // 接收人用户id， 非必填
					'data': {}
				}
				that.globalData.socketTask.onOpen((res) => {	
					console.log('websocket开启了')
					// 清除重连定时器
					// clearTimeout(that.globalData.reconnectTimeOutObj)
					// that.notReconnect()
					that.globalData.socketTask.send({
						data: JSON.stringify(obj),
						async success(res) {
							that.globalData.is_open_socket = true
							console.log("消息发送成功");
							uni.hideLoading(); // 关闭通信异常弹框
							
						},
					});
					that.start() // 开启心跳机制
				})

				// // 接收服务器返回的消息
				// // 注：只有连接正常打开中 ，才能正常收到消息
				that.globalData.socketTask.onMessage((res) => {
					// console.log("收到服务器内容：");
					var val = JSON.parse(res.data)
					console.log('这是返回的内容---------', val)
					if (val.action == 'list') {
						clearTimeout(that.globalData.msgSetTime); // 消息发送成功，清除发送失败定时器
						console.log('这是发送人的ID', that.globalData.userId)
						var obj1 = {
							'action': 'list', // 动作标识，必填
							'recv_user_id': that.globalData.userId, // 接收人用户id， 非必填
							'data': {
								'msg_status': false, // 消息未读
								'msg_info': '', // 发送消息
							}
						}
						that.globalData.socketTask.send({
							data: JSON.stringify(obj1),
							async success(res) {
							},
						});
						that.globalData.userId = null
					} else if (val.action == 'none') {
						console.log('进入了none', val)
						that.globalData.list = val.data
						this.$store.state.list = val.data
					} else if (val.action == 'recv_video') {
						that.globalData.video = val.data
						this.$store.state.video = val.data
						setTimeout(() => {
							console.log('跳转了')
							this.$store.getters.watchData;
						}, 1500)
					} else if (val.action == 'ok') {
						this.start(); // 心跳机制
					}
					
					
					// this.reset();
					// console.log('消息可正常接收');
				});
				
				// 连接断开
				// 如果希望websocket连接一直保持，在close或者error上绑定重新连接方法。
				this.globalData.socketTask.onClose((res) => {
					// console.log(res, '连接关闭');
					clearTimeout(this.globalData.timeoutObj);
					setTimeout(() => {
						that.reconnect();
					}, 5000)
				})
				
				// 连接失败
				that.globalData.socketTask.onError((res) => {
					// console.log(res, '连接错误');
					uni.showLoading({
						title: "通信异常，连接中..."
					})
					clearTimeout(this.globalData.timeoutObj);
					setTimeout(() => {
						that.reconnect();
					}, 5000)
				})
			},

			// 心跳机制
			start() {
				var that = this
				this.globalData.timeoutObj = setTimeout(() => {
					//这里发送一个心跳，后端收到后，返回一个心跳消息，
					//onmessage拿到返回的心跳就说明连接正常
					var obj = {
						'action': 'keepalive', // 动作标识，必填
						'type': 'App',
						'recv_user_id': '', // 接收人用户id， 非必填
						'data': {
							 msg_status: false,
							 msg_info: "",
						}
					}
					that.globalData.socketTask.send({
						data: JSON.stringify(obj),
						async success(res) {
							that.globalData.is_open_socket = true
							// console.log('消息发送成功1111')
						}
					});
					console.log('进入心跳机制了', that.globalData.socketTask)
					let ws_temp = null
					ws_temp = that.globalData.socketTask
					that.globalData.socketTask = ws_temp
					ws_temp = null
				}, this.globalData.timeout)
			},
			// 清除心跳机制
			reset() {
				// 清除定时器重新发送一个心跳信息
				// clearTimeout(this.globalData.timeoutObj);
				clearTimeout(this.globalData.timeoutObj);
				this.start();
			},

			// 重连
			reconnect() {
				// 防止多个方法调用，多处重连
				if (this.lockReconnect) {
					return;
				};
				this.lockReconnect = true;

				console.log('准备重连');

				//没连接上会一直重连，设置延迟避免请求过多
				this.globalData.reconnectTimeOutObj = setTimeout(() => {
					// 重新连接
					this.msgInit()
					console.log('正在重新连接')
					this.lockReconnect = false;
				}, 4000);
			},
			
			// 清除重连
			notReconnect() {
				clearTimeout(this.globalData.reconnectTimeOutObj)
			},

			// 手动关闭
			close() {
				var that = this
				// console.log('已经手动关闭了')
				that.globalData.socketTask.close()
				that.globalData.socketTask = null
				clearTimeout(that.globalData.timeoutObj);
				clearTimeout(that.globalData.reconnectTimeOutObj);
			},
		},
	}
</script>

<!-- // App.vue文件  中首行的位置引入，注意给style标签加入lang="scss"属性 -->
<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>