uniapp在小程序连接webScoket实现余额支付

webScoket文档:uni.connectSocket(OBJECT) | uni-app官网

/plugins/event.js

const Dep = function() {this.Evens = Object.create(null);
}
class Event {constructor({dep = new Dep()} = {}) {if (dep.constructor === Object && Object.keys(dep).length === 0) {dep.Evens = Object.create(null);}this.Dep = dep;}/** 绑定事件 可以重复绑定* @param {Object} handler		需要绑定的事件名称* @param {Object} fn	事件处理函数*/onNotify(handler, fn, oneEv = false) {try{this.off(handler,()=>{});}catch(e){};if (typeof fn != 'function') {return console.error(`The registered custom event type must be a function \r\n ${fn.toString()}`);}if (this instanceof Event) {let typeArr = this.Dep.Evens[handler];if (!typeArr) {this.Dep.Evens[handler] = [];}const eventArr = this.Dep.Evens[handler]if (oneEv) {eventArr.splice(0, eventArr.length);}eventArr.push(fn);} else {console.error(`You can't manually modify the 'this' pointer is '${handler}' Event type \r\n ${fn.toString()}`)}return this}/** 绑定事件 仅会绑定一次事件,如果发现有重名的事件则全部移除* @param {Object} handler		需要绑定的事件名称* @param {Object} fn	事件处理函数*/one(handler, fn) {if (this instanceof Event) {this.on(handler, fn, true);} else {console.error(`You can't manually modify the 'this' pointer is '${handler}' Event type \r\n ${fn.toString()}`)}return this}/** 解除已经绑定事件 * @param {Object} handler		指定需要解除的事件类型	不传则清楚全部* @param {Object} callback		解除事件后的回调函数*/off(handler, callback) {if (this instanceof Event) {let callInfo = {0: {success: false,msg: `'${handler}' event is not defined`},1: {success: true,msg: 'Successful ok'}};if (!handler) {this.Dep.Evens = {};return true;}let typeArr = this.Dep.Evens[handler];if (typeArr) {delete this.Dep.Evens[handler];return callback.call(this, callInfo[1]);}return callback.call(this, callInfo[0]);} else {console.error(`You can't manually modify the 'this' pointer`)}return this}/**	触发指定事件* @param {Object} type		需要触发的事件* @param {Object} options	为此事件传递的参数*/onPublish(type, options) {if (this instanceof Event) {let eventArr = this.Dep.Evens[type];if (!eventArr || eventArr.length == 0) {return console.error(`The specified event does not exist is '${type}'`)}let i = eventArr.length - 1;while (true) {eventArr[i].call(this, options);i--if (i < 0) {break}}} else {console.error(`You can't manually modify the 'this' pointer`)}return this}
}
export default Event;

/utils/socket.js

import Events from '@/plugins/event';
class webScoket extends Events {constructor(uri) {super()this.isConnected = false //socket连接记录this.timer = null //心跳定时器this.uri = urithis.url = `wss://changecabinet.yunheznkj.com/websocket/${uri}`// 创建WebSocket连接。this.ws = uni.connectSocket({url: this.url,success(res) {console.log('链接成功')console.log(res)},fail(err) {console.log('链接失败')console.error(err)},complete: () => {}});// 连接打开事件this.ws.onOpen(res => {console.log(`WebSocket 已连接:${this.url}`)this.isConnected = true;});// 接受到服务器的消息事件this.ws.onMessage(res => {this.onPublish(this.uri, JSON.parse(res.data))});// 连接关闭事件this.ws.onClose(res => {console.warn('WebSocket 已断开')this.isConnected = false;});}close() {return new Promise((resolve, reject) => {if (this.isConnected) {clearInterval(this.timer);this.ws.close()}resolve()})}send(data) {this.ws.send({data: data.msg})}
}export default webScoket

页面调用

实现逻辑:前端点击支付按钮,同时调起webScoket连接和发送支付接口。如果余额不足和支付失败,后端通过接口通知前端。如果支付成功,后端通过webScoket通知前端。

<script>import WS from '@/utils/socket'import {payAndGet} from '@/api/user.js'export default {data() {return {orderNo: '',$ws: null}},onLoad(e) {this.orderNo = e.orderNo},onHide() {if (this.$ws) {this.$ws.close()}},beforeDestroy() {if (this.$ws) {this.$ws.close()}},methods: {// 支付async payAndGet() {this.socketInit()const res = await payAndGet({orderNo: this.orderNo})if (res.code == 1001) { // 余额不足this.$ws.close()} else if (res.code == 200) { // 支付成功} else {// 支付失败this.$ws.close()}},// 链接设备socketInit() {let uri = `gzyh_device_result_` + this.orderNothis.$ws = new WS(uri)this.$ws.onNotify(uri, res => {if (res.code == 200) {// 支付成功执行逻辑}})},}}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/62462.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

飞塔防火墙只允许国内IP访问

飞塔防火墙只允许国内IP访问 方法1 新增地址对象&#xff0c;注意里面已经细分为中国内地、中国香港、中国澳门和中国台湾 方法2 手动新增国内IP的对象组&#xff0c;目前好像一共有8632个&#xff0c;每个对象最多支持600个IP段

超详细ensp配置VRRP和MSTP协议

一、简介 1、什么是VRRP&#xff1a; &#xff08;1&#xff09;VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09;的概念&#xff1a; VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09;指的是一种实现路由器冗余备份的协议&#xff0c;常用于…

东风破捉妖师横空出世

一.异动拉升实时监测 东风破就像是一个大盘监测平台&#xff0c;是现实版的捉妖师&#xff0c;一旦妖股横空出世&#xff0c;就会在东风破面前原形毕露。东风破AI算法逻辑是监测存在异动拉升的股票&#xff0c;实时分析上证&#xff0c;深证&#xff0c;创业和科创板的股票数据…

结构体struct的一些细节

struct过于灵活&#xff0c;导致一些细节问题。 下面对有关struct的定义的细节展开讨论。 注意&#xff1a;c/c环境下&#xff0c;union和struct的定义和使用基本是一样的。 定义方式1 struct { ...}abc;特点&#xff1a; 只定义了一个abc变量&#xff0c;而没有定义结构体…

C++的类功能整合

1. 类的基本概念 类是面向对象编程的核心&#xff0c;它封装了数据和操作数据的函数。 #include <iostream> using namespace std;class MyClass { public:int publicData;void publicFunction() {cout << "Public function" << endl;}private:i…

一个5位数,判断它是不是回文数。即12321是回文数,个位与万位相同,十位与千位相同。-多语言

目录 C 语言实现 Python 实现 Java 实现 Js 实现 题目&#xff1a;一个5位数&#xff0c;判断它是不是回文数。即12321是回文数&#xff0c;个位与万位相同&#xff0c;十位与千位相同。 程序分析&#xff1a;学会分解出每一位数。 C 语言实现 #include <stdio.h>…

Scala—数组(不可变数组Array、可变数组ArrayBuffer)用法详解

Scala集合概述-链接 大家可以点击上方链接&#xff0c;先对Scala的集合有一个整体的概念&#x1f923;&#x1f923;&#x1f923; 在 Scala 中&#xff0c;数组是一种特殊的集合类型&#xff0c;可以是可变的也可以是不可变的。 1. 不可变数组 在 Scala 中&#xff0c;不可变…

数据库期末复习题库

1. Mysql日志功能有哪些? 记录日常操作和错误信息&#xff0c;以便了解Mysql数据库的运行情况&#xff0c;日常操作&#xff0c;错误信息和进行相关的优化。 2. 数据库有哪些备份方法 完全备份&#xff1a;全部都备份一遍表备份&#xff1a;只提取数据库中的数据&#xff0…

TsingtaoAI具身智能高校实训方案通过华为昇腾技术认证

日前&#xff0c;TsingtaoAI推出的“具身智能高校实训解决方案-从AI大模型机器人到通用具身智能”基于华为技术有限公司AI框架昇思MindSpore&#xff0c;完成并通过昇腾相互兼容性技术认证。 TsingtaoAI&华为昇腾联合解决方案 本项目“具身智能高校实训解决方案”以实现高…

如何使用 Chrome 无痕浏览模式访问网站?

无痕浏览&#xff08;Incognito Mode&#xff09;是 Google Chrome 浏览器提供的一种隐私保护功能&#xff0c;它允许用户在一个独立的会话中浏览网页&#xff0c;而不会记录用户的浏览历史、下载历史、表单数据等。这对于希望保护个人隐私或进行临时性匿名浏览的用户来说非常有…

如何从 Hugging Face 数据集中随机采样数据并保存为新的 Arrow 文件

如何从 Hugging Face 数据集中随机采样数据并保存为新的 Arrow 文件 在使用 Hugging Face 的数据集进行模型训练时&#xff0c;有时我们并不需要整个数据集&#xff0c;尤其是当数据集非常大时。为了节省存储空间和提高训练效率&#xff0c;我们可以从数据集中随机采样一部分数…

无人值守工业控制系统网络安全解决方案

一、现状概述 随着物联网、工业大数据、工业云等技术的发展&#xff0c;工业互联网时代即将到来&#xff0c;工业大数据分析、工业数据可视化、工业生产智能优化分析成为当下发展趋势&#xff0c;使得基于数字技术、网络互连技术的智能监控、无人值守成为可能。目前&#xff0…

.NET 8 实现通用权限开发框架

在.NET 8中实现一个通用权限开发框架&#xff0c;不仅可以提高开发效率&#xff0c;还能保证系统的安全性和可扩展性。本文将介绍如何使用.NET 8构建一个通用权限框架&#xff0c;并提供实例代码展示。 1. 框架概述 一个通用权限开发框架通常包括用户管理、角色管理、权限管理等…

网络安全体系与网络安全模型

4.1 网络安全体系概述 4.1.1 网络安全体系概述 一般面言&#xff0c;网络安全体系是网络安全保障系统的最高层概念抽象&#xff0c;是由各种网络安全单元按照一定的规则组成的&#xff0c;共同实现网络安全的目标。网络安全体系包括法律法规政策文件、安全策略、组织管理、技术…

彻底理解如何保证ElasticSearch和数据库数据一致性问题

一.业务场景举例 需求&#xff1a; 一个卖房业务&#xff0c;双十一前一天&#xff0c;维护楼盘的运营人员突然接到合作开发商的通知&#xff0c;需要上线一批热门的楼盘列表&#xff0c;上传完成后&#xff0c;C端小程序支持按楼盘的名称、户型、面积等产品属性全模糊搜索热门…

微信小程序下拉刷新与上拉触底的全面教程

微信小程序下拉刷新与上拉触底的全面教程 引言 在微信小程序的开发中,用户体验至关重要。下拉刷新和上拉触底是提高用户交互体验的重要功能,能够让用户轻松获取最新数据和内容。本文将详细介绍这两个功能的实现方式,结合实际案例、代码示例和图片展示,帮助开发者轻松掌握…

Robot Framework中常用变量的一些操作

一. 简介 前面学习了 Robot Framework中常用变量&#xff0c;文章如下&#xff1a; Robot Framework框架中常用的变量-CSDN博客 本文继续来学习这几个变量&#xff08;标量&#xff0c;列表&#xff0c;字典&#xff09;的操作。 二. Robot Framework中常用变量的一些操作 …

vue3项目搭建-6-axios 基础配置

axios 基础配置 安装 axios npm install axios 创建 axios 实例&#xff0c;配置基地址&#xff0c;配置拦截器,目录&#xff1a;utils/http.js 基地址&#xff1a;在每次访问时&#xff0c;自动作为相对路径的根 // axios 基础封装 import axios from "axios";…

23种设计模式-抽象工厂(Abstract Factory)设计模式

文章目录 一.什么是抽象工厂设计模式&#xff1f;二.抽象工厂模式的特点三.抽象工厂模式的结构四.抽象工厂模式的优缺点五.抽象工厂模式的 C 实现六.抽象工厂模式的 Java 实现七.代码解析八.总结 类图&#xff1a; 抽象工厂设计模式类图 一.什么是抽象工厂设计模式&#xff1f…

uart_pl011.c驱动API的zephyr测试

API概述 本次测试针对uart的uart_poll_in和uart_poll_outAPI进行测试&#xff0c; uart_poll_in static int pl011_poll_in(const struct device *dev, unsigned char *c)这是一个轮询方式的接收函数&#xff1a; 功能&#xff1a;检查 UART 是否有新数据到达&#xff0c;如…