uni-app vue3封装websocket,支持微信小程序
一、创建useWebSocket.js 文件
// useWebSocket.js // 获取链接的URL前缀
import {BASE_URL
} from "./request";import {ref,onMounted,onBeforeUnmount
} from "vue";// 假设我们使用 uni-app 的 globalData 或 Vuex 来管理用户状态
// 这里为了简单起见,我们假设用户ID是直接从某处获取的 const useWebSocket = (url,reconnectInterval = 10000,maxReconnectAttempts = 5
) => {const isMounted = ref(true);const isConnected = ref(false);const messages = ref([]);let reconnectAttempts = 0;const connect = () => {if (isConnected.value) {uni.closeSocket(); // 关闭已有的 WebSocket 连接 }const uri = `ws://${BASE_URL}/websocket/tender/${url}`;// 使用微信小程序的 WebSocket API uni.connectSocket({url: uri,success: () => {console.log("WebSocket连接已打开");isConnected.value = true;// 监听消息 uni.onSocketMessage((res) => {messages.value = JSON.parse(res.data);});// 监听WebSocket的关闭 uni.onSocketClose(() => {console.log("WebSocket连接已关闭");isConnected.value = false;if (isMounted.value && reconnectAttempts < maxReconnectAttempts) {setTimeout(connect, reconnectInterval * (reconnectAttempts + 1));reconnectAttempts++;}});// 监听WebSocket的错误 uni.onSocketError((res) => {console.error("WebSocket发生错误:", res.errMsg);if (isMounted.value) {setTimeout(connect, reconnectInterval);}});},fail: (err) => {console.error("WebSocket连接失败:", err);}});};const sendMessage = (message) => {if (isConnected.value) {uni.sendSocketMessage({data: message,success: () => {console.log('消息发送成功');},fail: (err) => {console.error('发送失败', err);}});}};onMounted(() => {isMounted.value = true;connect();});onBeforeUnmount(() => {isMounted.value = false;if (isConnected.value) {uni.closeSocket();}});return {isConnected,messages,sendMessage};
};export default useWebSocket;
二、在 .vue文件中使用
<script setup>import {onLoad} from "@dcloudio/uni-app";import {ref,watchEffect} from 'vue';
// 引入useWebSocket
import useWebSocket from "@/api/useWebSocket.js";
onLoad((options) => {id.value = options.idmessages.value = useWebSocket(options.id, 10000, 5);})// 监听messages
watchEffect(() => {let timeVal = {...messages.value};console.log(timeVal);})</script>
相关文章:
uni-app vue3封装websocket,支持微信小程序
一、创建useWebSocket.js 文件 // useWebSocket.js // 获取链接的URL前缀 import {BASE_URL } from "./request";import {ref,onMounted,onBeforeUnmount } from "vue";// 假设我们使用 uni-app 的 globalData 或 Vuex 来管理用户状态 // 这里为了简单起…...
杭州算力小镇:AI泛化解锁新机遇,探寻AI Agent 迭代新路径
人工智能技术不断迭代,重点围绕着两个事情,一是数据,二是算力。 算法的迭代推动着AI朝向多模态的方向发展,使之能够灵活应对不同领域的不同任务,模型的任务执行能力大大提升,人工智能泛化能力被推上高潮。…...
IT行业的现状与发展趋势
IT行业的现状与发展趋势 随着信息技术的迅速发展,IT行业已成为全球经济的重要支柱之一。无论是传统行业的数字化转型,还是新兴技术的快速崛起,IT行业都在不断推动社会的进步和发展。本文将探讨IT行业的现状及未来发展趋势。 IT行业的现状 …...
华为认证HCIA篇--网络通信基础
大家好呀!我是reload。今天来带大家学习一下华为认证ia篇的网络通信基础部分,偏重一些基础的认识和概念性的东西。如果对网络通信熟悉的小伙伴可以选择跳过,如果是新手或小白的话建议还是看一看,先有个印象,好为后续的…...
【linux】regulartor-fixed
作用:创建一个固定的 regulator。一般是一个 GPIO 控制了一路电,只有开(enable) \ 关(disabled)两种操作。 device-tree node io_vdd_en: regulator-JW5217DFND {compatible "regulator-fixed"…...
11年408考研真题解析-计算机网络
第一题: 解析:网络层虚电路服务和数据报服务 传输服务只有:有连接可靠和无连接不可靠两种,直接排除BC。 网络层指的是IP协议,由图二可知:运输层,网际层,网络接口层唯一有连接可靠的协…...
wireshark使用要点
目录 IP过滤 端口过滤 内容过滤 过滤udp 过滤tcp IP过滤 ip.src XXX.XXX.XXX.XXX 只显示消息源地址为XXX.XXX.XXX.XXX的信息 ip.dst XXX.XXX.XXX.XXX 只显示消息目的地址为XXX.XXX.XXX.XXX的信息 ip.addr XXX.XXX.XXX.XXX显示消息源地址为XXX.XXX.XXX.XXX࿰…...
WebGL扩展与WebGPU
目录 WebGPU扩展的探索使用实验性或未标准化的特性示例:使用纹理压缩扩展多视口渲染自定义着色器阶段可变多重采样抗锯齿...
基于小安派AiPi-Eyes-Rx的N合1触摸屏游戏
基于小安派AiPi-Eyes-Rx的N合1触摸屏游戏 目前存在的游戏: 植物大战僵尸:demos/pvz羊了个羊:demos/yang消消乐:demos/xiaoxiaole华容道:demos/huarongdao PVZ功能展示可见: 羊了个羊: 消消…...
Java List sort() 排序
sort是java.util.List接口的默认方法。 List的排序方法在Java 8中被引入。 排序方法接受比较器作为参数,并根据指定的比较器对这个列表进行排序。 default void sort(Comparator<? super E> c) 示例代码: import java.text.Collator; import …...
Vue.js 与 Flask 或 Django 后端配合
Vue.js 与 Flask 或 Django 后端配合是一种常见的全栈开发方式,用于构建动态且响应迅速的 Web 应用程序。Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,而 Flask 和 Django 是 Python 语言的两个非常流行的 Web 框架。下面将分别介绍 Vue.js …...
抽奖拼团卷轴模式系统开发小程序源代码解析
在当今的互联网商业环境中,抽奖、拼团与卷轴模式等创新玩法被广泛应用于小程序开发中,旨在通过多样化的互动方式吸引用户参与,提升用户粘性和平台活跃度。本文将围绕“抽奖拼团卷轴模式系统开发小程序源代码”这一主题,探讨其技术…...
MySql语言操作数据库---增删改查数据库,表,数据
思维导图 SQL语言共分为四大类: 数据定义语言DDL:数据定义语言DDL用来创建数据库中的各种对象-----[库]、[表]、[视图]、[索引]、 数据操纵语言DML:(1) 插入:INSERT (2) 更新:UPDATE (3) 删除:DELETE 数据查询语言DQL:数据查询语…...
C++深入学习string类成员函数(2):容器管理
引言 C 标准库中的容器(如 std::string、std::vector、std::list 等)都提供了一系列容器管理成员函数,用于处理容器的大小、容量、清空等操作。容器管理成员函数可以分为几类,主要包括容量查询、修改容器大小、清空容器等操作。 …...
MariaDB 和 MySQL 全面对比:选择数据库需要考虑这几点
谁在使用 MySQL 和 MariaDB? MySQL 和 MariaDB 都发布了各自的用户名单。 使用 MySQL 的有 Facebook、Github、YouTube、Twitter、PayPal、诺基亚、Spotify、Netflix 等。 使用 MariaDB 的有 Redhat、DBS、Suse、Ubuntu、1&1、Ingenico 等。 功能比较…...
Python 实现图形学几何变换算法
目录 Python 实现图形学几何变换算法几何变换介绍变换矩阵Python 实现几何变换代码解释总结 Python 实现图形学几何变换算法 在计算机图形学中,几何变换是非常重要的概念。它们允许我们对对象的位置、大小、方向进行操作,比如平移、缩放、旋转、反射等。…...
接口测试|超详细面试题【附答案】
今天给姐妹们整理了一套超详细的附答案的接口测试面试题,姐妹们快学起来吧~ 接口测试的重要性,相信不用我多说了。接口测试是现在软件测试工程师一个加分项。因为很多朋友一开始做了几年的软件测试都是在做功能测试,做界面UI的测试ÿ…...
Qt网络编程——QTcpServer和QTcpSocket
文章目录 核心APITCP回显服务器TCP回显客户端 核心API QTcpServer用于监听端口和获取客户端连接 名称类型说明对标原生APIlisten(const QHostAddress&, quint16 port)方法绑定指定的地址和端口号,并开始监听bind和listennextPendingConnection()方法从系统中获…...
CentOS 7 aarch64制作openssh 9.9p1 rpm包 —— 筑梦之路
本篇文章还是基于开源项目openssh-rpms制作。 https://github.com/boypt/openssh-rpms.git 官方发行说明: OpenSSH: Release Notes 1. 修改version.env 2. 下载源码包 openssl网站改版,下载地址和之前不一样了 # 下载openssl1.1.1w源码包cd downlo…...
Flink和Spark的区别
1、设计理念不同 flink:Flink是基于事件驱动的,是面向流的处理框架, Flink基于每个事件一行一行地流式处理,是真正的流式计算. 另外他也可以基于流来模拟批进行计算实现批处理。 spark:Spark的技术理念是使用微批来模拟流的计算,…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果 {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...
TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
