vue3的websocket连接

直接上代码

分方法代码-util.ts中

let websock: any = null;
let global_callback: any = null;
//创建多个WebSocket实例,没想到怎么优化,先这么写
function createWebSocket(callback: any, url: any) {// || websock.readyState === WebSocket.CLOSEDif (websock == null || typeof websock !== WebSocket) {initWebSocket(callback, url);}
}
function initWebSocket(callback: any, url: any) {global_callback = callback;// 初始化websocketwebsock = new WebSocket(url);websock.onmessage = function (e: any) {websocketonmessage(e, "0");};websock.onclose = function (e: any) {websocketclose(e);};// 连接发生错误的回调方法websock.onerror = function () {console.log("WebSocket连接发生错误");};
}// 实际调用的方法
function sendSock(agentData: any) {if (websock.readyState === websock.OPEN) {// 若是ws开启状态websocketsend(agentData);} else if (websock.readyState === websock.CONNECTING) {// 若是 正在开启状态,则等待1s后重新调用setTimeout(function () {sendSock(agentData);}, 1000);} else {// 若未开启 ,则等待1s后重新调用setTimeout(function () {sendSock(agentData);}, 1000);}
}// 数据接收 type是当有多个websocket接受数据的时候 能区分哪个对应哪个
function websocketonmessage(msg: any, type) {let result: any = null;result = msg.data;switch (type) {case "0":global_callback(result);break;default:break;}
}
// 关闭链接
function closeSock() {if (websock) {websock.close();}
}// 关闭
function websocketclose(e: any) {console.log("connection closed (" + e.code + ")");
}export { sendSock, createWebSocket, closeSock };

页面使用

onMounted(() => {// 引用之前暴露出来的创建  WebSocketUrl1 是链接地址eg:ws://192.168.0.0:8080/websocket/page1createWebSocket((msg: any) => {// console.log("websocket1的回调函数收到服务器信息:" + msg);// 当接收到消息的时候 调用的方法mapFlightPositionFun(msg);}, WebSocketUrl1);
}
onBeforeUnmount(() => {closeSock();
}const mapFlightPositionFun = Data => {//  当Data开始传递数据的时候 在里面调用if (Data !== "连接成功") {}
}

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

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

相关文章

【自我学习】圣多纳释放莱斯特

一、莱斯特莱文森 莱斯特莱文森(Lester Levenson)的人生中有几件事特别引人注目和令人钦佩,这些事情不仅体现了他的个人成就,也展示了他对心理健康和情绪释放领域的重大贡献。 1. 健康危机的转变 莱斯特莱文森在42岁时遭遇了严…

好用的Web数据库管理工具推荐(ChatGPT的推荐)

在现代数据管理和开发中,Web数据库管理工具变得越来越重要。这些工具不仅提供了直观的用户界面,还支持跨平台操作,方便用户在任何地方进行数据库管理。 目录 1. SQLynx 2. phpMyAdmin 3. Adminer 4. DBeaver 5 结论 以下是几款推荐的Web…

臻奶惠的行业优势与市场竞争力解析

臻奶惠在智能售货机领域深耕多年,其加盟合作模式在行业中展现出了多方面的优势。以下是对该公司智能售货机加盟优势的深入分析: 技术先进性: 臻奶惠智能售货机以高度自动化的运营模式著称,特别是在自动补货、远程监控和数据分析…

史上最全,呕心沥血总结oracle推进SCN方法(六)

作者介绍:老苏,10余年DBA工作运维经验,擅长Oracle、MySQL、PG数据库运维(如安装迁移,性能优化、故障应急处理等) 公众号:老苏畅谈运维 欢迎关注本人公众号,更多精彩与您分享。前面介…

RocketMQ教程(六):RocketMQ的消息生产

环境配置 RocketMQ版本:5.2.0 RocketMQ SDK版本:5.2.0 引入依赖 implementation org.apache.rocketmq:rocketmq-client:5.2.0 消息生产 消息的种类分成四种,普通消息、顺序消息、事务消息和延时消息,发生消息的方式也分为同步发送、异步发送、单向发送 三种。 1、普通消…

15. 《C语言》——【如何动态内存开辟】

亲爱的读者,大家好!我是一名正在学习编程的高校生。在这个博客里,我将和大家一起探讨编程技巧、分享实用工具,并交流学习心得。希望通过我的博客,你能学到有用的知识,提高自己的技能,成为一名优…

CST软件眼图工具Eye Diagram Tools (中)--- Classical流程

距离上次眼图介绍快两年了,由于上期已经将重点推荐的方法(statistical流程)介绍了,所以一直没急着涉及这个话题。 仿真实例011:眼图工具Eye Diagram Tools(上) 先总结一下之前介绍过的内容&am…

容器:现代计算的基础设施

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

Jmeter函数二次开发说明

jmeter 二次开发使用 jmeter二次开发实现方法 使用maven依賴进行开发 导入jmeter的maven依赖&#xff0c;需要和你使用的jmeter版本一致。 <!-- https://mvnrepository.com/artifact/org.apache.jmeter/ApacheJMeter_core --> <dependency><groupId>org.ap…

uniapp,微信小程序,在map组件外与中的代码区别

需求&#xff1a;整屏地图&#xff0c;需要在地图上方编写筛选条件&#xff0c;地图中标注经纬度定位与自定义样式 次情形仅用于微信小程序&#xff0c;其他的没去验证过 1&#xff0c;在地图上方编写赛选条件&#xff0c;及其他&#xff0c;不需要根据地图经纬度进行定位&…

大模型初学者怎么入门大语言模型(LLM)?

前言 在当今的科技浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;和机器学习技术已经取得了长足的进步&#xff0c;其中大模型的发展尤为引人注目。大模型&#xff0c;通常指的是拥有海量参数、能够处理复杂任务的深度学习模型&#xff0c;如自然语言处理&#xff08;…

将字符串转换为Python数据类型

ast.literal_eval() 用于将字符串转换为Python数据类型&#xff0c;如列表、字典等&#xff0c;是安全且有限制的。 eval() 可以执行任意的Python代码&#xff0c;但存在安全风险&#xff0c;应避免使用。 json.loads() 用于将JSON字符串转换为Python对象&#xff0c;如字典…

RT-DETR 详解之 Uncertainty-minimal Query Selection

引言 在上一章博客中博主已经完成查询去噪向量构造部分的讲解&#xff08;DeNoise&#xff09;在本篇博客中&#xff0c;我们将进行Uncertainty-minimal Query Selection创新点的讲解。 Uncertainty-minimal Query Selection是RT-DETR提出的第二个创新点&#xff0c;其作用是…

UE5 Sequencer 使用指导 - 学习笔记

https://www.bilibili.com/video/BV1jG411L7r7/?spm_id_from333.337.search-card.all.click&vd_source707ec8983cc32e6e065d5496a7f79ee6 Sequencer 01 1.1 调整视口 调整窗口数量 调整视口类型为Cinematic视口 视口显示网格&#xff0c;或者条件参考线 1.2 关卡动画与…

bexcel

import requests from lxml import etree from time import sleep import numpy as np from openpyxl import Workbook # 进行UA伪装 headers {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.3…

QT QString字符串去除空白方法

空白包括 \t’, ‘\n’, ‘\v’, ‘\f’, ‘\r’, ’ ’ 1.去除字符串前面的空格 QString str1 " 1 2 3 "; str1.remove(QRegExp("^ \\s*")); //结果&#xff1a;“1 2 3”2.去除字符串后面的空格 QString str2 " 4 5 6 ";str2.remove(QRegE…

架构设计-用户信息及用户相关的密码信息设计

将用户的基本信息和用户密码存放在不同的数据库表中是一种常见的安全做法&#xff0c;这种做法旨在增强数据的安全性和管理的灵活性。以下是这种做法的几个关键原因&#xff1a; 安全性增强&#xff1a; 当用户密码被单独存放在一个表中时&#xff0c;可以使用更强大的加密和哈…

计算机毕业设计 | SpringBoot+vue的教务管理系统

1&#xff0c;绪论 1.1 项目背景 在这个资讯高度发展的时代&#xff0c;资讯管理变革已经是一个更为宽泛、更为全面的潮流。为了保证中国的可持续发展&#xff0c;随着信息化技术的不断进步&#xff0c;教务管理体系也在不断完善。与此同时&#xff0c;伴随着信息化的飞速发展…

Android:UI:Drawable:View/ImageView与Drawable

文章目录 在View/ImageVIew中显示DrawableDrawable对View的更新操作在View/ImageVIew中显示Drawable API View.setBackground(Drawable) ImageView.setImagDrawable(Drawable) 源码分析 View.mBackground在View.draw(Canvas)中绘制,调用Drawable.draw(Canvas) ImageView.m…