MingGaoApp_vue/MingGaoApp/App.vue

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

			// 文本消息
			socketTask: null,
			urlData: "ws://114.115.147.140: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, // 多少秒执行监测
			timeoutObj: null, // 检测服务器端是否还活着
			reconnectTimeOutObj: null, // 重连之后多久再次重连
			// 测试
			app: [],
			hdskdh: null
		},
		onLoad() {},
		onLaunch: function() {
			console.log('启动了')
			// App启动

			var that = this
			uni.getStorage({
				key: 'session_key',
				success: function(res) {
					// console.log(res)
					that.globalData.token = res.data
					// console.log('登录成功了')
					that.msgInit(); // 文本初始化
				},
				fail: function(err) {
					// console.log(err)
					// console.log('没有登录成功')
				}
			})
		},
		onShow: function() {
			// App展示在前台
			// console.log('App Show')、
		},
		onHide: function() {
			// App不再再展示在前台
			// console.log('App Hide')
			this.close()
		},
		methods: {
			// 实时通信 - 初始化
			msgInit() {
				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) => {
					// 清除重连定时器
					clearInterval(that.globalData.reconnectTimeOutObj)
					// 开启检测
					that.start()
					that.globalData.socketTask.send({
						data: JSON.stringify(obj),
						async success(res) {
							that.globalData.is_open_socket = true
							console.log("消息发送成功");
							
						},
					});
				})

				// // 接收服务器返回的消息
				// // 注：只有连接正常打开中 ，才能正常收到消息
				that.globalData.socketTask.onMessage((res) => {
					console.log("收到服务器内容：");
					var val = JSON.parse(res.data)
					if (val.action == 'list') {
						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) {
								// console.log("消息发送成功");
							},
						});
					} else if (val.action == 'none') {
						// console.log('进入了')
						that.globalData.list = val.data
						// console.log(that.globalData.list)
						this.$store.state.list = val.data
						// console.log(this.$store.state.list)
					} else if (val.action == 'recv_video') {
						// console.log(val.data)
						that.globalData.video = val.data
						this.$store.state.video = val.data
						// console.log(this.$store.state.video)
					}
					
					
					this.reset();
					console.log('消息可正常接收');
				});
				// console.log(that.socketTask)
				
				// 连接断开
				// 如果希望websocket连接一直保持，在close或者error上绑定重新连接方法。
				this.globalData.socketTask.onClose((res) => {
					console.log(res, '连接关闭');
					that.reconnect();
				})
				
				// 连接失败
				that.globalData.socketTask.onError((res) => {
					console.log(res, '连接错误');
					that.reconnect();
				})
			},

			// 心跳机制
			start() {
				// console.log(this.globalData.timeoutObj)
				// console.log('进入心跳机制了', this.globalData.timeout)
				this.globalData.timeoutObj = setInterval(() => {
					//这里发送一个心跳，后端收到后，返回一个心跳消息，
					//onmessage拿到返回的心跳就说明连接正常
					var obj = {
						'action': 'list', // 动作标识，必填
						'recv_user_id': '', // 接收人用户id， 非必填
						'data': {}
					}
					this.globalData.socketTask.send(JSON.stringify(obj));
					console.log('进入心跳机制了', this.globalData.timeout)
				}, this.globalData.timeout)
			},
			// 清除心跳机制
			reset() {
				// 清除定时器重新发送一个心跳信息
				// clearTimeout(this.globalData.timeoutObj);
				clearInterval(this.globalData.timeoutObj);
				this.start();
			},

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

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

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

			// 手动关闭
			close() {
				console.log('已经手动关闭了')
				this.globalData.socketTask.close()
			},
		},
	}
</script>

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