websocket实现进度条

websocket实现进度条

做一个简易的websocket实现进度条的练习,效果如下:
环形进度效果

前端vue3

<template><el-progress type="circle" :percentage="this.progressValue" :status="this.perstatus" /><el-button @click="sendMessage()">获取进度</el-button>
</template><script>
import { ref } from 'vue';
const progressValue = ref(0);
const perstatus = ref('');
const socket = new WebSocket('ws://url/ws');export default {name: 'App',components: {},mounted(){this.connect();},unmounted(){this.beforeDestroy();},data(){return {progressValue,perstatus};},methods:{connect() {socket.onopen = function() {console.log('WebSocket connected');};socket.onmessage = function(event) {console.log('Received message: ', event.data);progressValue.value= +event.dataif(progressValue.value>=100){perstatus.value='success'}console.log(progressValue.value+"---"+perstatus.value);};socket.onerror = function(event) {console.error('WebSocket error observed:', event);};},beforeDestroy() {if (socket) {socket.close();console.log('close socket connect');}},sendMessage() {if (socket.readyState === WebSocket.OPEN) {socket.send('get progress');}},}
}
</script>

后端java

  1. pom.xml引入websocket
<dependency><groupId>org.springframework</groupId><artifactId>spring-websocket</artifactId><version>5.3.19</version></dependency>
  1. 先配置一个websocket的配置类。
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(webSocketHandler(), "/ws")//这里的url一定要和前端的对应上.setAllowedOrigins("*"); // 允许跨域}@Beanpublic WebSocketHandler webSocketHandler() {return new WebSocketHandler();}
}
  1. 实现websocket的操作方法。
public class WebSocketHandler extends TextWebSocketHandler {@Overridepublic void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {// 处理接收到的消息System.out.println("Received message: " + message.getPayload());int progress = 0;for (int i = 0; i < 10; i++) {try {Thread.sleep(500);progress=progress+10;// 发送消息回客户端session.sendMessage(new TextMessage(progress+""));} catch (InterruptedException e) {e.printStackTrace();}}}
}

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

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

相关文章

docker tomcat 404

HTTP 404状态码表示“Not Found”&#xff0c;即服务器无法找到请求的页面。 当用户尝试访问一个不存在的网页时&#xff0c;服务器会返回这个状态码。这个状态码是HTTP协议的一部分&#xff0c;用于告知客户端&#xff08;通常是浏览器&#xff09;服务器无法完成请求。404状…

黑马JavaWeb企业级开发(知识清单)02——HTML实现标题:样式(CSS引入、CSS选择器、span标签)和超链接

文章目录 前言一、标题样式1&#xff1a;新闻标题颜色1. CSS三种引入方式2. 颜色表示3. javacode实现 二、标题样式2&#xff1a;发布时间颜色1. < span >标签2. CSS选择器1&#xff09;元素&#xff08;标签&#xff09;选择器&#xff08;优先级最低&#xff09;2&…

IC秋招RTL代码合集

一 全加器和半加器 全加器 module full_adder1(input Ai, Bi, Ci,output So, Co);assign So Ai ^ Bi ^ Ci ;assign Co (Ai & Bi) | (Ci & (Ai | Bi)); endmodule module full_adder1(input Ai, Bi, Cioutput So, Co);assign {Co, So} Ai Bi Ci ; endm…

wireshark过滤器,如何使用wireshark捕获指定域名的流量

过滤器比较高级&#xff0c;但是也很重要&#xff0c;我决定通过一个案例来学习过滤器的知识点。 比如&#xff0c;我现在访问 zhangdapeng.com 我希望能够捕获关于这个域名下的流量&#xff0c;该如何实现呢&#xff1f; 我选择了捕获以太网的流量&#xff0c;但是目前捕获到…

python-爬虫实例(4):获取b站的章若楠的视频

目录 前言 道路千万条&#xff0c;安全第一条 爬虫不谨慎&#xff0c;亲人两行泪 获取b站的章若楠的视频 一、话不多说&#xff0c;先上代码 二、爬虫四步走 1.UA伪装 2.获取url 3.发送请求 4.获取响应数据进行解析并保存 总结 前言 道路千万条&#xff0c;安全第一条 爬…

Redis和mysql如何保持数据一致?

1.先更新Mysql&#xff0c;再更新Redis&#xff0c;如果更新Redis失败&#xff0c;可能仍然不一致 2. 先删除Redis缓存数据&#xff0c;再更新Mysql&#xff0c;再次查询的时候在将数据添加到缓存中&#xff0c;这种方案能解决1方案的问题&#xff0c;但是在高并发 下性能较低…

技术速递|C# 13:探索最新的预览功能

作者&#xff1a;Kathleen Dollard 排版&#xff1a;Alan Wang C# 13 已初具雏形&#xff0c;其新特性侧重于灵活性、性能以及使您最喜欢的功能在日常中变得更容易使用。我们以公开的方式构建 C#&#xff0c;在今年的 Microsoft Build 大会上&#xff0c;我们会让您一睹 C# 13 …

基于vite + pnpm monorepo 实现一个UI组件库

基于vite pnpm monorepo的vue组件库 仓库地址 思路 好多文章都是直接咔咔咔的上代码。跟着做也没问题&#xff0c;但总觉得少了些什么。下次做的时候还要找文章参考。。 需求有三个模块&#xff0c;那么就需要三个包。使用monorepo进行分包管理。 a. 组件库 b. 组件库文档…

Linux C语言 54-目录操作

Linux C语言 54-目录操作 本节关键字&#xff1a;Linux、C语言、目录操作、遍历目录 相关C库函数&#xff1a;opendir、readdir、closedir 遍历目录 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <dirent.h> #include <…

如何在Linux上部署Django Web应用

在Linux上部署Django Web应用需要遵循以下步骤&#xff1a; 安装Python和虚拟环境&#xff1a; 首先&#xff0c;确保你的Linux系统已经安装了Python。可以使用以下命令检查Python版本&#xff1a; python --version如果没有安装Python&#xff0c;则可以使用包管理工具安装它&…

Java:114-Spring Boot的底层原理(上篇)

Spring Boot的底层原理 之前学习过了Spring Boot&#xff08;在88章博客&#xff09;&#xff0c;但是并没有很深入的了解&#xff0c;这里致力于在原来的基础上学习更多Spring Boot知识 回顾&#xff08;注意&#xff1a;只是回顾&#xff0c;所以更多细节在88章博客&#x…

MySQL零散拾遗(五)---- 对 GROUP BY 要点进行详细介绍

在GROUP BY的使用过程中&#xff0c;SELECT 中出现的非组函数的字段必须声明在 GROUP BY 中。 还记得 MySQL零散拾遗&#xff08;四&#xff09; 中&#xff0c;提到的 GROUP BY 的使用要点嘛&#xff1f; SELECT 中出现的非组函数的字段必须声明在 GROUP BY 中。反而&#x…

array.some() ==> 查找数组list中,是否有包含与当前currKey的值不一样的misId

需求&#xff1a; const list [ {misId: e, name: 小白}, {misId: e, name: 小白白}, {misId: r, name: 小王}, {misId: r, name: 小小王} ] let currKey r 查找数组list中&#xff0c;是否有包含与当前currKey的值不一样的misId 解决&#xff1a; 要查找数组lis…

【2】Spring Cloud 工程搭建

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;Spring Cloud实战&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 1.声明项目依赖和项目构建插件 2.完善子项目订单服务 2.1完善启动…

开源发票识别InvoiceNet项目Windows部署踩坑记(1)

今天安装在github上的InvoiceNet开源项目&#xff0c;准备对它进行测试&#xff0c;安装过程出现了一些问题&#xff0c;做个记录&#xff0c;给遇到兄弟爬坑。 第一个问题&#xff0c;conda的问题&#xff0c; 这是另外一个包管理器&#xff0c;不仅仅可以管理python的虚拟…

layui+thymeleaf+jquery实现多图片,多视频的上传、预览、放大、编辑功能

layuithymeleafjquery实现多图片&#xff0c;多视频的上传、预览、放大、编辑功能 html: <!--多图片上传--> <div class"layui-row layui-col-space10"><div class"layui-form-item"><div class"layui-form-item layui-form-te…

mybatis xml 文件中引用Java类的静态方法

MyBatis-Plus 支持在 XML 映射文件中使用 ${} 来直接嵌入字符串&#xff0c;以及使用 #{} 来引用传入参数。但是&#xff0c;$ 的使用需要小心&#xff0c;因为它会直接将参数内容嵌入到 SQL 语句中&#xff0c;这可能会导致 SQL 注入问题。 在 MyBatis-Plus 中&#xff0c;如果…

Android 防止重复点击

1.第一种方式&#xff1a; private static final int MIN_DELAY_TIME 2000; // 两次点击间隔不能少于2000ms private static long lastClickTime System.currentTimeMillis(); public static boolean isFastClick() { boolean flag true; long currentClickTime …

苹果电脑怎么清理缓存和垃圾 mac如何关闭正在运行的程序 苹果电脑怎么清理后台

苹果电脑以其出色的性能和用户友好的界面而广受好评&#xff0c;但在使用过程中&#xff0c;后台程序的堆积可能会影响到系统的运行效率。太多应用和进程在后台默默运行&#xff0c;就像是无形的背包&#xff0c;让你的Mac背负了太多不必要的重量。不过&#xff0c;别担心&…

08、Tomcat 部署及优化

8.1 Tomcat概述 8.1.1 Tomcat介绍 自从 JSP 发布之后,推出了各式各样的 JSP 引擎。Apache Group 在完成 GNUJSP1.0的开发以后&#xff0c;开始考虑在 SUN 的 JSWDK 基础上开发一个可以直接提供 Web 服务的 JSP服务器&#xff0c;当然同时也支持 Servlet, 这样 Tomcat 就诞生…