websocket实现进度条

最新推荐文章于 2025-06-19 10:53:20 发布

fairylym

最新推荐文章于 2025-06-19 10:53:20 发布

阅读量797

点赞数 7

CC 4.0 BY-SA版权

分类专栏： java vue 文章标签： websocket java vue.js

本文链接：https://blog.csdn.net/fairylym/article/details/140607221

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