orderSystemJp/raising-vue-uniapp-wx/mp/components/order-notify-socket/index.vue

<!-- 顶栏订单状态通知 -->
<template>
	<div class="order-notify-socket m-t-5 m-b-5 font-32">
		<text class="p-r-10">
			<text v-if="socketOnlineStatus === 0" class="text-yellow">
				<text class="cuIcon-wifi"></text>
				<text class="m-l-8">连接中···</text>
			</text>
			<text v-if="socketOnlineStatus === 1" class="text-green">
				<text class="cuIcon-wifi"></text>
				<text class="m-l-8">在线</text>
			</text>
			<text v-if="socketOnlineStatus === 2" class="text-red">
				<text class="cuIcon-wifi"></text>
				<text class="m-l-8">关闭中</text>
			</text>
			<text v-if="socketOnlineStatus === 3" class="text-red">
				<text class="cuIcon-wifi"></text>
				<text class="m-l-8">已断开</text>
			</text>
		</text>
	</div>
</template>
<script>
	const app = getApp();
	import api from '@/utils/api'
	import util from '@/utils/util'
	import __config from '@/config/env';
	export default {
		name: 'OrderNotifySocket',
		props: {

		},
		data() {
			return {
				deviceInfo: uni.$u.sys(),
				//在线状态 0:CONNECTING  1:OPEN  2:CLOSING  3:CLOSED
				socketOnlineStatus: 0,
				// websocket相关
				socketObj: undefined, // websocket实例对象
				//心跳检测
				heartCheck: {
					// vue实例
					vueThis: this,
					// 超时时间
					timeout: 1000 * 3,
					// 计时器对象——向后端发送心跳检测
					timeoutObj: null,
					// 计时器对象——等待后端心跳检测的回复
					serverTimeoutObj: null,
					// 心跳Key(和后台协商一致)
					heartBeatString: 'RS_OM_ORDER_PAY_STATUS_NOTICE_HEART_BEAT',
					// 心跳检测重置
					reset: function() {
						clearTimeout(this.timeoutObj);
						clearTimeout(this.serverTimeoutObj);
						return this;
					},
					// 心跳检测启动
					start: function() {
						this.timeoutObj && clearTimeout(this.timeoutObj);
						this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
						this.timeoutObj = setTimeout(() => {
							// 这里向后端发送一个心跳检测，后端收到后，会返回一个心跳回复
							this.vueThis.socketObj.send({
								data: this.vueThis.heartCheck.heartBeatString
							});
							//this.vueThis.socketObj.send(this.vueThis.heartCheck.heartBeatString);
							console.log('【支付通知】WebSocket',
								`发送心跳检测[KEY: ${this.vueThis.heartCheck.heartBeatString}]`)
							this.serverTimeoutObj = setTimeout(() => {
								// 如果超过一定时间还没重置计时器，说明websocket与后端断开了
								console.log('【支付通知】WebSocket', `未收到心跳检测回复`)
								// 关闭WebSocket
								this.vueThis.socketObj.close();
							}, this.timeout);
						}, this.timeout);
					},
				},
				socketReconnectTimer: null, // 计时器对象——重连
				socketReconnectLock: false, // WebSocket重连的锁
				socketLeaveFlag: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）
			};
		},
		created() {
			console.log('【支付通知】WebSocket', `离开标记: ${this.socketLeaveFlag}`)
		},
		mounted() {
			// websocket启动
			this.createWebSocket();
		},
		destroyed() {
			// 离开标记
			this.socketLeaveFlag = true;
			if(this.socketObj){
				// 关闭WebSocket
				this.socketObj.close();
			}
		},
		methods: {
			// websocket启动
			createWebSocket() {
				let baseSocketUrl = __config.socketBasePath;
				//let baseSocketUrl = process.env.VUE_APP_WS_BASE_URL;

				let webSocketLink = `${baseSocketUrl}/ws/om/order/notice/${__config.tenantId}/${this.deviceInfo.deviceId}`;
				console.log('【支付通知】WebSocket', `远程连接地址: ${webSocketLink}`)
				try {
					this.socketObj = uni.connectSocket({
						url: webSocketLink,
						complete: () => {}
					});
					// websocket事件绑定
					this.socketEventBind();
				} catch (e) {
					console.error("catch" + e);
					// websocket重连
					this.socketReconnect();
				}
			},
			// websocket事件绑定
			socketEventBind() {
				// 连接成功建立的回调
				this.socketObj.onOpen(this.onopenCallback);
				// 连接发生错误的回调
				this.socketObj.onError(this.onerrorCallback);
				// 连接关闭的回调
				this.socketObj.onClose(this.oncloseCallback);
				// 向后端发送数据的回调
				//this.socketObj.onSend = this.onsendCallback;
				// 接收到消息的回调
				this.socketObj.onMessage(this.getMessageCallback);
			},
			// websocket重连
			socketReconnect() {
				if (this.socketReconnectLock) {
					return;
				}
				this.socketReconnectLock = true;
				this.socketReconnectTimer && clearTimeout(this.socketReconnectTimer);
				this.socketReconnectTimer = setTimeout(() => {
					console.log('【支付通知】WebSocket', '重连中......')
					this.socketOnlineStatus = this.socketObj.readyState
					this.socketReconnectLock = false;
					// websocket启动
					this.createWebSocket();
				}, 4000);
			},
			
			// websocket 给后台发送消息
			sendSocketMessage(msgBody) {
				if (this.socketOnlineStatus === 1) {
					// 普通发送——正常处理
					console.log('【支付通知】WebSocket', '发送Message到后台: ' + JSON.stringify(msgBody, 'null', '\t'))
					uni.sendSocketMessage({
						data: JSON.stringify(msgBody)
					});
				} else {
				}
			},
			// 连接成功建立的回调
			onopenCallback: function(event) {
				console.log('【支付通知】WebSocket', '已连接 SUCCESS ')
				this.socketOnlineStatus = 1
				// 心跳检测重置
				this.heartCheck.reset().start();
			},
			// 连接发生错误的回调
			onerrorCallback: function(event) {
				console.error('【支付通知】WebSocket', '发生错误')
				console.error(event)
				this.socketOnlineStatus = 3
				// websocket重连
				this.socketReconnect();
			},
			// 连接关闭的回调
			oncloseCallback: function(event) {
				console.error('【支付通知】WebSocket', '已关闭 CLOSE')
				this.socketOnlineStatus = 2
				// 心跳检测重置
				this.heartCheck.reset();
				if (!this.socketLeaveFlag) {
					// 没有离开——重连
					// websocket重连
					this.socketReconnect();
				}
			},
			// 向后端发送数据的回调
			onsendCallback: function() {
				console.log('【支付通知】WebSocket', '发送信息给后端')
			},
			// 接收到消息的回调
			getMessageCallback: function(msg) {
				if (JSON.stringify(msg.data).indexOf(this.heartCheck.heartBeatString) > -1) {
					// 心跳回复——心跳检测重置
					// 收到心跳检测回复就说明连接正常
					console.log('【支付通知】WebSocket', `收到心跳检测回复[KEY: ${this.heartCheck.heartBeatString}]`)
					// 心跳检测重置
					this.heartCheck.reset().start();
				} else {
					// 普通推送——正常处理
					// console.log('【支付通知】WebSocket', '收到推送消息: ' + JSON.stringify(JSON.parse(msg.data), 'null', '\t'))
					let data = msg.data;
					// 相关处理
					//console.log('【支付通知】WebSocket', `接收到的数据并做相关处理: ${JSON.stringify(data)}`)
					this.$emit('receivedMessage', JSON.parse(data))
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.order-notify-socket {
		text-align: right;
	}
</style>