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>相关文章：
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…...
：检查外部类型)
【C语言】连接陷阱探秘(4)：检查外部类型
目录 一、外部类型概述 1.1. 外部类型的重要性 1.2. 外部类型在C语言中的使用 1.3. 注意事项 二、常见的外部类型陷阱 2.1. 结构体和联合体的大小不匹配 2.1.1. 示例代码 2.1.2. 正确的做法 2.2. 枚举类型的值不匹配 2.3. 函数签名不一致 2.3.1. 函数签名不一致的问…...
Hexo博客在多个设备同步
title: ‘Hexo博客在多个设备同步’ date: 2024-11-28 19:08:08 categories: Hexo教程 cover: /img/cover4.jpg description: ‘实现Hexo博客在不同的设备上都可以使用和上传’ 博客链接1 ：Hexo搭建博客的多终端同步问题 博客链接2:Hexo博客多台电脑设备同步管理 …...
Pytorch使用手册-使用 TensorBoard 可视化模型、数据和训练过程（专题十）
在 60 分钟速成课程中，我们展示了如何加载数据，将其传递通过我们定义的作为 nn.Module 子类的模型，训练该模型并在测试数据上进行测试。为了查看发生了什么，我们在模型训练过程中打印一些统计信息，以便了解训练是否进展顺利。然而，我们可以做得更好：PyTorch 与 TensorBo…...
Linux网络——NAT/代理服务器
一.NAT技术 1.NAT IP转换 之前我们讨论了, IPv4 协议中, IP 地址数量不充足的问题，NAT 技术就是当前解决 IP 地址不够用的主要手段, 是路由器的一个重要功能。 NAT 能够将私有 IP 对外通信时转为全局 IP. 也就是一种将私有 IP 和全局IP 相互转化的技术方法: 很…...
使用ffmpeg命令实现视频文件间隔提取帧图片
将视频按每隔五秒从视频中提取一张图片 使用 ffmpeg 工具，通过设置 -vf（视频过滤器）和 -vsync 选项 命令格式 ffmpeg -i input_video.mp4 -vf "fps1/5" output_%03d.png 解释： -i input_video.mp4：指定输…...
Elasticsearch实战：从搜索到数据分析的全面应用指南
Elasticsearch（简称 ES）是一个强大的分布式搜索引擎和分析工具，它能够快速处理海量数据，并提供全文检索、结构化搜索、数据分析等功能。在现代系统中，它不仅是搜索的核心组件，也是数据分析的有力工具。 本文…...
【CSS in Depth 2 精译_064】10.3 CSS 中的容器查询相对单位 + 10.4 CSS 容器样式查询 + 10.5 本章小结
当前内容所在位置（可进入专栏查看其他译好的章节内容） 【第十章 CSS 容器查询】 ✔️ 10.1 容器查询的一个简单示例 10.1.1 容器尺寸查询的用法 10.2 深入理解容器 10.2.1 容器的类型10.2.2 容器的名称10.2.3 容器与模块化 CSS 10.3 与容器相关的单位 ✔…...
)
滑动窗口讲解(c基础)
滑动窗口的基本概念 滑动窗口是一种高效处理线性数据结构（如数组、字符串）的算法技巧。它就像是一个可移动的 “框”，框住数据结构中的一部分元素，通过不断地移动这个 “框”（即滑动窗口），对框内…...
Flink的双流join理解
如何保证Flink双流Join准确性和及时性、除了窗口join还存在哪些实现方式、究竟如何回答才能完全打动面试官呢。。你将在文中找到答案。 1 引子 1.1 数据库SQL中的JOIN 我们先来看看数据库SQL中的JOIN操作。如下所示的订单查询SQL，通过将订单表的id和订单详情表ord…...
_kaic)
springboot341+vue校园求职招聘系统设计和实现pf(论文+源码)_kaic
毕 业 设 计（论 文） 校园求职招聘系统设计与实现 摘 要 传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，…...
dmdba用户资源限制ulimit -a 部分配置未生效
dmdba用户资源限制ulimit -a 部分配置未生效 1 环境介绍2 数据库实例日志报错2.1 mpp01 实例日志报错2.2 mpp02 实例日志报错 3 mpp02 服务器资源限制情况4 关闭SELinux 问题解决4.1 临时关闭 SELinux4.2 永久关闭 SELinux 5 达梦数据库学习使用列表 1 环境介绍 Cpu x86 Os Ce…...
kafka-clients之CommonClientConfigs
CommonClientConfigs是kafka-clients库中一个包含Kafka通用配置项的类，它定义了Kafka Producer、Consumer、Admin等客户端共享的配置。以下是其中的主要配置项及其含义： 1. bootstrap.servers 类型：List<String>说明：Kafk…...
支持多种快充协议的取电芯片，支持最大功率140W
前言 在快节奏的现代生活中，人们对于小家电的依赖日益加深，而随之而来的充电问题也日益凸显。传统的充电方式往往受限于电压、电流的限制，难以满足不同设备对电力的多样化需求。而PD快充协议的诞生，则为这一难题提供了全新的解决…...
《Vue零基础入门教程》第十四课：列表渲染
往期内容 《Vue零基础入门教程》第六课：基本选项 《Vue零基础入门教程》第八课：模板语法 《Vue零基础入门教程》第九课：插值语法细节 《Vue零基础入门教程》第十课：属性绑定指令 《Vue零基础入门教程》第十一课：事…...
Linux系统 进程
Linux系统 进程 进程私有地址空间用户模式和内核模式上下文切换 进程控制进程控制函数获取进程 ID创建和终止进程回收子进程让进程休眠加载并运行程序 系统调用错误处理利用fork和execve运行程序 进程 异常是允许操作系统内核提供进程（process）概念的基…...
文件具有selinux标签如下 system_u:object_r:httpd_sys_content:s0:c3 解释一下每段的含义?
文件具有selinux标签如下 system_u:object_r:httpd_sys_content:s0:c3 解释一下每段的含义? SELinux标签通常由四个部分组成，分别用于定义文件的上下文、访问控制策略以及系统安全性。针对你提供的标签：system_u:object_r:httpd_sys_content:s0:c3&…...
对偶分解算法详解及其Python实现
目录 对偶分解算法详解及其实现第一部分：对偶分解算法概述1.1 什么是对偶分解算法1.2 应用场景1.3 算法优点第二部分：对偶分解算法的数学推导2.1 问题形式2.2 对偶问题2.3 算法框架第三部分：对偶分解算法的Python实现第四部分：案例1——支持向量机中的对偶分解（策略模式）…...
Linux之web服务器
一、web 服务器简介 1.www 简介 www 是全球信息广播的意思，上网即使用 www 来查询信息，它结合多种多媒体，通过超链接以 Internet 传递信息。上网时，网站提供数据，客户端用浏览器解析数据。 www 所用协议为 HTTP&…...
十二、Pod的扩缩容-手动/自动-HPA
在实际生产系统中，经常会遇到某个服务需要扩容的场景，也可能会遇到由于资源紧张或者工作负载降低而需要减少服务实例数量的场景。此时可以利用Deployment/RC的Scale机制来完成这些工作。 Kubernetes对Pod的扩缩容操作提供了手动和自动两种模式，手动模式通过运行kubectl sca…...
RabbitMQ高级特性：TTL、死信队列与延迟队列
RabbitMQ高级特性：TTL、死信队列与延迟队列 RabbitMQ作为一款开源的消息代理软件，广泛应用于分布式系统中，用于实现消息的异步传递和系统的解耦。其强大的高级特性，包括TTL（Time-To-Live）、死信队列&#…...
UPLOAD LABS | UPLOAD LABS 靶场初识
关注这个靶场的其它相关笔记：UPLOAD LABS —— 靶场笔记合集-CSDN博客 0x01：UPLOAD LABS 靶场简介 UPLOAD LABS 靶场是一个专门用于学习文件上传漏洞攻击和防御的靶场。它提供了一系列文件上传漏洞的实验环境，用于帮助用户了解文件上传漏洞的…...
杰发科技AC7803——不同晶振频率时钟的配置
计算公式 PLL_POSDIV [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62] PLL_PREDIV_1 1 2 4 USE_XTAL 24M SYSCLK_FREQ 64M SYSCLK_DIVIDER 1 VCO USE_XTAL*…...
cocos creator 触摸事件官方案例
cocos creator 触摸事件官方案例 1、官方示例； 2、对官方示例的总结： （1）介绍了鼠标事件和触摸事件的类型，这里主要关注的是在移动端和PC端都可以触发的触摸事件。 （2）节点事件的派发&#…...
浅谈人工智能之基于容器云进行图生视频大模型搭建
浅谈人工智能之基于容器云进行图生视频大模型搭建 根据之前我们所讲过的内容： 文生图 文生视频 我们继续讲解图生视频大模型搭建。 引言 随着深度学习技术的不断发展，图生视频（image-to-video）大模型成为了计算机视觉和自然语言…...
【爬虫框架：feapder，管理系统 feaplat】
github：https://github.com/Boris-code/feapder 爬虫管理系统 feaplat：http://feapder.com/#/feapder_platform/feaplat 爬虫在线工具库 ：http://www.spidertools.cn ：https://www.kgtools.cn/1、feapder 简介 对于学习 Python…...
txt地图格式处理
1、txt地图格式 [属性描述] 坐标系2000国家大地坐标系 几度分带3 投影类型高斯克吕格 计量单位米 带号38 精度0.001 转换参数,,,,,, [地块坐标] 5,475.888,1,测试地块1,面,J50G077061,公路用地,地下, J1,1,113.22222222222222,23.129111721551794 J2,1,113.2722314…...
【0346】Postgres内核 Startup Process 通过 signal 与 postmaster 交互实现 （5）
1. Startup Process 进程 postmaster 初始化过程中， 在进入 ServerLoop() 函数之前，会先通过调用 StartChildProcess() 函数来开启辅助进程，这些进程的目的主要用来完成数据库的 XLOG 相关处理。 如： 核实 pg_wal 和 pg_wal/archive_status 文件是否存在Postgres先前是否发…...
蜜罐攻击网络渗透工具推荐
推荐一批侧重蜜罐攻击的网络渗透测试工具： Glastopf – 主要用于监测网络安全事件的工具。以蜜罐形式可以模拟数千个漏洞，以收集针对Web应用程序的攻击数据。 Kippo – 中交互性的SSH 蜜罐攻击器，用于记录暴力破解攻击。 Kojoney – 一种低…...
26页PDF | 数据中台能力框架及评估体系解读（限免下载）
一、前言 这份报告详细解读了数据中台的发展历程、核心概念、能力框架及成熟度评估体系。它从阿里巴巴的“大中台，小前台”战略出发，探讨了数据中台如何通过整合企业内部的数据资源和能力，加速业务迭代、降低成本，并推动业务增长…...
AI开发 - GPT之魂 用Python 演示chatGPT的自注意力机制 - 机器学习
自注意力机制（Self-Attention）就是让模型在处理每个词时，学会“关注重点”，而不是平均地对每个词一视同仁。这种机制让 GPT 能更聪明地理解句子的上下文和语义之间的关系。 自注意力机制是 GPT 的核心，它帮助模型在理解…...
Vue CLI 提供了哪些功能
前言 Vue CLI 为开发者提供了一整套强大且灵活的工具链，极大地提升了开发效率和代码质量。无论是创建项目、管理依赖、配置环境，还是进行测试和优化，Vue CLI 都能为你提供全面的支持。本文将深入探讨 Vue CLI 所提供的各种功能，并…...
网络爬虫的原理
网络爬虫就是根据网络，把上面的相关信息比如源代码以字符串的形式爬取下来，并且涉及到网站下的一系列网站。 DNS域名解析服务器可以通过ping域名/ip来测试是否连通，dns可以记录网站访问次数，从而评估出网站的使用权重，…...
02_Django路由Router
二、Django路由Router 在实际开发过程中，一个Django 项目会包含很多的 app ，这时候如果我们只在主路由里进行配置就会显得杂乱无章，所以通常会在每个 app 里，创建各自的urls.py路由模块，然后从根路由出发，…...
计算属性和监听属性
Vue.js 中的计算属性与监听属性 Vue.js 是一个流行的前端框架，它提供了许多强大的特性来简化 Web 应用的开发。其中，计算属性（Computed Properties）和监听属性（Watchers）是两个非常重要的概念，…...
JAVA项目-------医院挂号系统
1，项目目的 1、科室管理：新增科室，删除科室（如果有医生在，则不能删除该科室），修改科室。 2、医生管理：录入医生信息，以及科室信息。修改医生信息（主要是修改…...
《Learn Three.js》学习（3）光源
前言： WebGL本身不支持光源，不使用three.js,则需使用着色程序来模拟光源。 学习大纲： Three.js中的光源 特定光源的使用时机 如何调整和配置所有光源的行为 如何创建镜头光晕 光源表 基础光源：THRER.AmbientLight、THERE.Point…...
npm error code ETIMEDOUT 简单排查
今天突然没到一个仓库的ius问题。改完之后想发布npm包 出现下面的场景 npm addUser npm adduser npm notice Log in on https://registry.npmjs.org/ Create your account at: https://www.npmjs.com/login?next/login/cli/12596c8b-ba4a-4763-8a97-215087d380c4 Press ENTER…...
Flink高可用配置（HA）
从Flink架构中我们可以看到，JobManager这个组件非常重要，是中心协调器，负责任务调度和资源管理。默认情况下，每个Flink集群只有一个JobManager实例。这会产生单点故障（SPOF）：如果JobManager崩溃，则无法提交新程序，正在运行的程序也会失败。通过JobManager的高可用性，…...
VITE+VUE3+TS环境搭建
前言（与搭建项目无关）： 可以安装一个node管理工具，比如nvm，这样可以顺畅的切换vue2和vue3项目，以免出现项目跑不起来的窘境。我使用的nvm，当前node 22.11.0 目录 搭建项目 添加状态管理库&…...
windows上安装使用kubectl访问容器内服务
以云服务商提供的容器服务为例： 登录云服务，选择容器服务选择集群管理，选择集群概览点击kubeconfig按钮，进入说明页面官网下载kubectl 1、到 Kubernetes 版本变更 页面，查看 kubernetes 已发行版本，确认需要安装的 kubectl 版本。 2、kubectl 版本和集群的 kubernetes 版…...
软件工程第14章小测
单项选择题 第1题 定义类A和B Class A{ public B methodA(){...} } Class B{ public void methodB(){...} } 下面代码中的耦合是（）。 Class Client{ public static void main(String args){ A oa new A(); a.methodA().methodB(); } } …...
HarmonyOS4+NEXT星河版入门与项目实战（23）------组件转场动画
文章目录 1、控件图解2、案例实现1、代码实现2、代码解释3、实现效果4、总结1、控件图解 这里我们用一张完整的图来汇整 组件转场动画的用法格式、属性和事件，如下所示： 2、案例实现 这里我们对上一节小鱼游戏进行改造，让小鱼在游戏开始的时候增加一个转场动画，让小鱼自…...
word转pdf
在线xml格式化： 在线 XML 格式化 | 菜鸟工具 Java使用FreeMarker自动生成Word文档（带图片和表单） Java使用FreeMarker自动生成Word文档（带图片和表单）_freemarker word模板-CSDN博客 将word转pdf JAVA 使用aspose…...
@bytemd/vue掘金markdown插件预览内容有误
vue项目使用bytemd/vue 来预览字符串格式的markdown内容，总会多出如图的一段代码， 请问有没有大佬知道为什么？ 很急，求教！！！！！...
产品知识培训全面指南
在当今竞争激烈的市场环境中，产品知识已成为企业成功的关键因素。特别是对于软件即服务（SaaS）公司而言，产品的复杂性要求团队对产品有深入的了解，以便有效地与潜在客户沟通并促成交易。本指南将深入探讨产品知识培训的…...
VSCode修改资源管理器文件目录树缩进（VSCode目录结构、目录缩进、文件目录外观）workbench.tree.indent
文章目录 方法点击左下角小齿轮点击设置点击工作台，点击外观，找到Tree: Indent设置目录树的缩进 方法 点击左下角小齿轮 点击设置 点击工作台，点击外观，找到Tree: Indent设置目录树的缩进 "workbench.tree.indent"默认…...
周鸿祎再次“创业”，盯上百度
周鸿祎特地拍了部短剧来推广的新产品，终于上线了。 11月27日晚间，360正式发布多模态内容创作引擎“纳米搜索”。 作为当前AI应用最红的赛道之一，AI搜索已经有腾讯、秘塔、商汤、抖音等公司入局。传统搜索老大百度也在发力。竞争不妨碍有搜索…...
夜神模拟器+安卓7安装burpsuite系统证书
夜神模拟器安卓7安装burpsuite系统证书 安卓 7.0 以上安装 CA 证书： 安卓 5 所安装的 burp 证书是安装到系统根目录下的，从 Android 7.0 开始，系统不再信任用户 CA 证书，所以需要把 CA 证书安装到系统 CA 证书目录。 效果: 导出…...
TavilySearchResults报错
报错 pydantic_core._pydantic_core.ValidationError: 1 validation error for TavilySearchAPIWrapper Value error, Did not find tavily_api_key, please add an environment variable TAVILY_API_KEY which contains it, or pass tavily_api_key as a named parameter. …...