WebSocket 的封装使用

import { ElMessage } from "element-plus";// 全局WebSocket实例   
let ws = null;   
let isConnected = false;   
let currentWsUrl = ''; // 用于存储当前的wsUrl   
let baseURL = 'ws://XXX.com:8081';const initWebSocket = (wsUrl, sendData) => {return new Promise((resolve, reject) => {// 检查wsUrl是否发生变化if (wsUrl!== currentWsUrl) {// 如果wsUrl发生变化,关闭已有的WebSocket连接if (ws) {ws.close();ws = null;isConnected = false;}currentWsUrl = wsUrl;// 创建新的WebSocket实例ws = new WebSocket(baseURL + wsUrl);}// 连接成功后的回调函数ws.onopen = function (params) {// console.log("客户端连接成功");isConnected = true;// 向服务器发送消息ws.send(JSON.stringify(sendData));};// 从服务器接受到信息时的回调函数ws.onmessage = function (e) {// console.log("收到服务器响应", e.data);var data = e.data;if (data!== undefined) {if (data.indexOf("{")!== -1) {try {let parsedData = JSON.parse(data);resolve(parsedData);} catch (error) {reject(error);}} else {reject(data);}}};// 连接关闭后的回调函数ws.onclose = function (e) {// console.log("关闭客户端连接");isConnected = false;};// 连接失败后的回调函数ws.onerror = function (evt) {ElMessage.error("连接失败了");};if (isConnected) {ws.send(JSON.stringify(sendData));}// 窗口关闭时,关闭websocket连接,防止连接还没断开就关闭窗口,这样服务端会抛异常。window.onbeforeunload = function () {if (ws) {ws.close();ws = null;}};});   
};export default initWebSocket;

 引入使用

import initWebSocket from "@/utils/webSocket.js";const getData = () => {let sendData = {type: "info",};initWebSocket(globalStore.wsUrl, sendData).then((res) => {if (res?.s === 1) {Object.assign(info, res?.d);} else {ElMessage.error(res?.d);}}).catch((err) => {ElMessage.error("WebSocket出现错误");});
};getData()

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

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

相关文章

119.【C语言】数据结构之快速排序(调用库函数)

目录 1.C语言快速排序的库函数 1.使用qsort函数前先包含头文件 2.qsort的四个参数 3.qsort函数使用 对int类型的数据排序 运行结果 对char类型的数据排序 运行结果 对浮点型数据排序 运行结果 2.题外话:函数名的本质 1.C语言快速排序的库函数 cplusplus网的介绍 ht…

vulnhub靶机billu_b0x精讲

靶机下载 https://www.vulnhub.com/entry/billu-b0x,188/ 信息收集 扫描存活主机 nmap -sP 192.168.73.0/24 192.168.73.141为目标主机,对其进行进一步信息收集 端口扫描 nmap --min-rate10000 -p- 192.168.73.141 目标只开放了22和80端口 针对端口进行TCP探…

react相关报错--持续更新中

日常项目报错记录 一、开源项目问题集合安装依赖和启动问题1. 启动时候报The react-scripts package provided by Create React App requires a dependency: "babel-loader": "8.1.0"问题解决方法1:解决方法2: 二、reactAnt Design使用遇到的问题1. 使用ta…

vue实现下拉多选、可搜索、全选功能

最后的效果就是树形的下拉多选&#xff0c;可选择任意一级选项&#xff0c;下拉框中有一个按钮可以实现全选&#xff0c;也支持搜索功能。 在mounted生命周期里面获取全部部门的数据&#xff0c;handleTree是讲接口返回的数据整理成树形结构&#xff0c;可以自行解决 <div c…

【SpringMVC】REST 风格

REST&#xff08;Representational State Transfer&#xff0c;表现形式状态转换&#xff09;是一种访问网络资源的格式。传统的资源描述方式通常如下&#xff1a; http://localhost/user/getById?id1http://localhost/user/saveUser 而 REST 风格的描述则更简洁&#xff1a…

Jenkins使用记录

参考资料 https://www.cnblogs.com/hanmk/p/6808932.html https://www.cnblogs.com/gltou/p/15329634.html 1、安装jenkisn、 2、安装jenkisn需要的插件 如 git等、 3、java服务引用 jenkins API三方包 4、Jekins启动&#xff0c;手动在jekins控制面板 创建一个 jenkisn 构建模…

Unity Dots理论学习-1.关于性能

如果你是一个有经验的游戏开发者&#xff0c;那么你知道在目标平台上进行性能优化是贯穿整个开发周期的任务。也许你的游戏在高端PC上运行得很好&#xff0c;但在低端移动平台上&#xff0c;帧率是不是会慢很多&#xff0c;导致明显的卡顿&#xff1f;加载时间是不是过长&#…

数据库概念(MySQL第一期)

p.s.这是萌新自己自学总结的笔记&#xff0c;如果想学习得更透彻的话还是请去看大佬的讲解 目录 数据库就是管理数据的仓库 数据库&#xff1a;DataBase(DB)&#xff0c;是存储数据的仓库&#xff0c;数据是有组织的进行存储 数据库管理系统&#xff1a;DataBase Management S…

【ES6复习笔记】ES6的模块化(18)

模块化的概念 模块化是指将一个复杂的系统分解为多个模块&#xff0c;每个模块完成一个特定的功能&#xff0c;模块之间通过接口进行通信。模块化的目的是提高代码的可读性、可维护性和可重用性。 模块化规范产品&#xff0c; ES6 之前的模块化规范有&#xff1a; CommonJS …

C语言初阶习题【19】三子棋游戏

1.实现三子棋游戏 2.思路 我们把游戏实现部分放在game.c和game.h中&#xff0c;把游戏的测试代码放到test.c中 main函数在test.c中。 2.1 test.c中 先写main 函数&#xff0c;在main函数中调用test函数。 int main() {test();return 0; }test.c函数实现让玩家进行选择是否…

金融租赁系统的创新发展与市场竞争力提升探讨

内容概要 随着经济的快速发展&#xff0c;金融租赁系统逐渐成为金融市场中不可或缺的一环。它不仅提供了灵活的资金解决方案&#xff0c;还促进了企业的资本结构优化与资源配置效率。因此&#xff0c;了解该系统的市场背景与发展现状至关重要。 在现今环境下&#xff0c;新兴…

设计模式与游戏完美开发(2)

更多内容可以浏览本人博客&#xff1a;https://azureblog.cn/ &#x1f60a; 该文章主体内容来自《设计模式与游戏完美开发》—蔡升达 第二篇 基础系统 第四章 游戏主要类——外观模式&#xff08;Facade&#xff09; 一、游戏子功能的整合 一个游戏程序常常由内部数个不同的…

linux自动化批量分发SSH密钥同时批量测试SSH连接教程(包含自动化脚本代码)

1、检查端口 检查分发对象22端口是否打开 nmap -p22 ip地址如果要批量检查端口可以参考我写的这篇文章&#xff1a;linux自动化一键批量检查主机端口 2、命令行分发密钥原理 Linux分发密钥原理主要涉及SSH&#xff08;Secure Shell&#xff09;协议&#xff0c;该协议用于…

OpenHarmony源码编译后烧录镜像教程,RK3566鸿蒙开发板演示

本文介绍瑞芯微主板/开发板编译OpenHarmony源码后烧录镜像的教程&#xff0c;触觉智能Purple Pi OH鸿蒙开发板演示。搭载了瑞芯微RK3566四核处理器&#xff0c;树莓派卡片电脑设计&#xff0c;支持开源鸿蒙OpenHarmony3.2-5.0系统&#xff0c;适合鸿蒙开发入门学习。 编译源码…

【GO基础学习】gin框架路由详解

文章目录 gin框架路由详解&#xff08;1&#xff09;go mod tidy&#xff08;2&#xff09;r : gin.Default()&#xff08;3&#xff09;r.GET()路由注册 &#xff08;4&#xff09;r.Run()路由匹配 总结 gin框架路由详解 先创建一个项目&#xff0c;编写一个简单的demo&#…

vue之axios基本使用

文章目录 1. axios 网络请求库2. axiosvue 1. axios 网络请求库 <body> <input type"button" value"get请求" class"get"> <input type"button" value"post请求" class"post"> <!-- 官网提供…

使用 Spring Boot 实现文件上传:从配置文件中动态读取上传路径

使用 Spring Boot 实现文件上传&#xff1a;从配置文件中动态读取上传路径 一、前言二、文件上传的基本概念三、环境准备1. 引入依赖2. 配置文件设置application.yml 配置示例&#xff1a;application.properties 配置示例&#xff1a; 四、编写文件上传功能代码1. 控制器类2. …

AI 神经网络在智能家居场景中的应用

在科技持续进步的当下&#xff0c;智能家居领域正经历着深刻变革&#xff0c;AI 神经网络技术的融入成为推动这一变革的关键力量&#xff0c;为家居生活带来了诸多显著变化与提升&#xff0c;本文将几种常见的AI算法应用做了一下总结&#xff0c;希望对物联网从业者有所帮助。 …

ubuntu快速入门

1.进入某个文件夹 cd workspace/2.tab自动补全 3.列出当前文件夹所有文件 ls列出所有文件包括隐藏文件 ls -a 4.创建文件夹 mkdir linuxLearn 5.创建文件 gedit command.sh在commmand.sh键入 echo hello echo hi? echo how are you? PS:touch hello.txt(也可以创建新…

Day56 图论part06

108.冗余连接 并查集应用类题目,关键是如何把题意转化成并查集问题 代码随想录 import java.util.Scanner;public class Main{public static void main (String[] args) {Scanner scanner = new Scanner(System.in);int n = scanner.nextInt();DisJoint disjoint = new DisJo…