feiYi/App.vue

<script>
import md5Libs from '@/uni_modules/uview-ui/libs/function/md5';
import Vue from 'vue';
let that;
export default {
	data() {
		return {
			timeout: 30000, // 30s
			timeoutObj: null
		};
	},
	created() {
		// .判断是否已连接
		this.checkOpenSocket();
		// #ifdef APP-PLUS
		plus.navigator.closeSplashscreen();
		// #endif
	},
	onLaunch: async function () {
		console.log('App Launch');
		uni.hideTabBar();
		//加载配置

		uni.getSystemInfo({
			success: function (e) {
				// #ifndef MP
				Vue.prototype.StatusBar = e.statusBarHeight;
				if (e.platform == 'android') {
					Vue.prototype.CustomBar = e.statusBarHeight + 50;
				} else {
					Vue.prototype.CustomBar = e.statusBarHeight + 45;
				}
				// #endif

				// #ifdef MP-WEIXIN
				Vue.prototype.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				Vue.prototype.Custom = custom;
				Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// #endif

				// #ifdef MP-ALIPAY
				Vue.prototype.StatusBar = e.statusBarHeight;
				Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
				// #endif
			}
		});

		let res = await this.$api.getConfig();
		// console.log(res);
		if (!res.code) {
			return;
		}
		this.vuex_config = res.data;
	},
	onShow: function () {
		console.log('App 开启');
		uni.hideTabBar();
	},
	onHide: function () {
		console.log('App 关闭');
	},
	onLoad: function () {
		that = this;
		uni.hideTabBar();
	},
	methods: {
		// 判断是否已连接
		checkOpenSocket() {
			uni.sendSocketMessage({
				data: 'ping',
				success: (res) => {
					return;
				},
				fail: (err) => {
					// 未连接打开websocket连接
					this.openConnection();
				}
			});
		},
		openConnection() {
			// 打开连接
			// uni.closeSocket(); // 确保已经关闭后再重新打开
			uni.connectSocket({
				url: 'ws://192.168.10.80:8002',
				success(res) {
					console.log('连接成功 connectSocket=', res);
				},
				fail(err) {
					console.log('连接失败 connectSocket=', err);
				}
			});
			uni.onSocketOpen((res) => {
				console.log('连接成功');
				this.send();
			});
			this.onSocketMessage(); // 打开成功监听服务器返回的消息
		},
		send() {
			uni.sendSocketMessage({
				data: '{"command":"getshowpage"}',
				success: (res) => {
					console.log(res);
					console.log('发送成功....');
				},
				fail: (err) => {
					console.log(res);
					console.log('连接失败重新连接....');
					this.openConnection();
				}
			});
		},
		onSocketMessage() {
			// 消息
			this.timeout = 30000;
			this.timeoutObj = null;
			uni.onSocketMessage((res) => {
				console.log(res);
				this.getSocketMsg(res.data); // 监听到有新服务器消息
			});
		},
		// 监听到有新服务器消息
		getSocketMsg(reData) {
			// 监听到服务器消息
			console.log('收到服务器消息', reData);
			if (reData == 'pong') {
				return;
			}
			let data = JSON.parse(reData);
			if (data.command == 'updatepage') {
				if (data.id == 0) {
					uni.navigateTo({
						url: '/pages/index/startPage'
					});
				}
				if (data.id == 1) {
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}
			}
			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('连接失败重新连接....');
						that.openConnection();
					}
				});
			}, this.timeout);
		}
	}
};
</script>

<style lang="scss">
@import '@/uni_modules/uview-ui/index.scss';
@import 'common/app.css';
@import './GraceUI5/css/graceUI.css';
@import './GraceUI5/skin/black.css';
/* 加载图标字体 - 条件编译模式 */
/* #ifdef APP-PLUS-NVUE */
.gui-icons {
	font-family: graceIconfont;
}
/* #endif */
</style>