uniApp简单使用webSocket实现核销二维码业务

 主要功能逻辑 - >

用户支付订单获取订单详情 - > 点击订单详情建立长连接 ->  商家使用机器核销二维码 -> 二维码被核销后及时刷新页面使用状态并告知用户核销成功 

代码区 

//组件
import capHeader from '../../componentsA/Com/headerCap.vue'
import showPrice from '../../componentsA/Com/showPrice.vue'
import localTion from '../../../components/Business/PositionLocal.vue'
import AddressSerivce from '../../componentsA/Com/AddressSerivce.vue'
import orderInfo from '../../componentsA/orderDetails/orderInfo.vue'
import service from '../../componentsA/orderDetails/service.vue'
import subTitle from '../../componentsA/Com/subTitle.vue'
import carduserInfo from '../../componentsA/orderDetails/cardUseInfo.vue'



//api
import {
	getOrderInfoById,
	getOrderUseInfo,
	cancelOrder,
	orderRefund
} from '../../Api/orderDetailsApi/index.js'


export default {
	data() {
		return {
			PageInfo: {
				title: '订单详情'
			},
			paramsData: '', //传递的参数
			info: '',
			StoreInfo: '', //门店信息
			OrderInfo: '', //订单信息
			GoodsInfo: '', //商品详情
			OrderReduction: '', //优惠信息,
			OrderUseInfo: '', //订单二维码使用信息
			nowStoreId: '', //当前门店id
			refundNum: 1, //退票数量
			minNum: 1, //最小退票数量
			maxNum: 1, //最大退票数量
			delayTime: false, //控制重连间隔时间
			isWebSocket:false , //长连接状态 true 已连接 false 未连接
		}
	},
	onLoad(params) {
		//解析参数
		let item = JSON.parse(decodeURIComponent(params.item));
		this.paramsData = item; //保存
		this.nowStoreId = this.$Com.storeId; //获取sotreId 门店
	},
	onShow() {
		this.init();
	}, 
	mounted() {
		this.initWebSocket(); //建立webSocket连接
	}, 
	// 离开该层时执行，划重点了！！！
	destroyed: function() {
		// 离开路由之后断开websocket连接
		if(this.isWebSocket){
			this.closeSocket();
		}
	},
	methods: {
		init() {
			//重新刷新页面数据
			this.getOrderInfoByIdApi(this.paramsData); //获取订单信息
			this.getOrderUseInfoApi(this.paramsData); //获取订单核销信息
		},
		//websocket- Start
		initWebSocket() {
			let that = this; 
			//每次开启前 先检查是否已经有链接 - 有则 关闭长连接 避免重复连接
			if(this.isWebSocket){
				this.closeSocket();
				this.isWebSocket = false ; //代表链接已被关闭
			}
			// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
			let userId = this.$store.state.vuex_userInfoAuth.globalUser.id;
			let url = this.$Com.websocketCommonUrl + userId; //拼接webSocket url并带上用户id  
			console.log(url, 'webSocket链接地址');
			uni.connectSocket({
				url,
				success(result) {
					console.log('1.向地址发起webSocket连接成功', result)
				},
				fail(err) {
					console.log('向地址发起webSocket连接失败！！!', err)
					this.reconnect(); //如果没连上 则会每5秒 重新连接一次
				}
			});
			uni.onSocketOpen(() => {
				this.isWebSocket = true ; //代表连接已被打开
				console.log('2.监听webScoket连接被打开!')
			});
			uni.onSocketError(function(res) {
				this.reconnect(); //重新尝试链接
				console.log('err - >WebSocket连接打开出错，请检查！');
			});
			uni.onSocketClose(function(res) {
				console.log('close - > WebSocket 已主动关闭');
			});
			uni.onSocketMessage((r) => {
				console.log(r, '接受到的服务器消息', r.data);
				that.init();
				this.$refs.orderDetailsToast.show({
					type:'success',
					title:'核销成功!',
				})
			})
		},
		//关闭webSocket连接
		closeSocket() {
			uni.closeSocket({
				success: () => {
					console.log('离开页面关闭连接成功')
				}
			})
		},
		//重连
		reconnect() {
			if (this.delayTime) return;
			this.delayTime = true;
			//没连接上会一直重连，设置延迟避免请求过多
			setTimeout(() => {
				console.info("尝试重连...");
				this.initWebSocket();
				this.delayTime = false;
			}, 5000);
		},
		//webSocket -END 
		  
	},
	components: {
		capHeader,
		showPrice,
		localTion,
		AddressSerivce,
		orderInfo,
		service,
		subTitle,
		carduserInfo
	}
}

 记录过程 努力成长