SpringBoot+Vue websocket上传文件进度条，带断开连接后处理（心跳）-前端-2_springboot vue3上传文件进度条

前言
本文呼应SpringBoot+Vue websocket上传文件进度条，带断开连接后处理（心跳）-后端-2，完善功能；
一、先看前端进度效果

二、HTML
废话：根据大家需求改就好了，主要是数据怎么接收，接收后传过来就行了，其他都是次要的，这个是上图的样式，在ELEMENT PLUS网站里有的；

<!--弹出框提示文件进度-->
    <el-dialog v-model="dialogVisible" title="" width="70%"
               custom-class="el-dialogg" :before-close="handleClose" >
      <div style="text-align: center;margin-bottom: 2%"><span>{{this.message}}</span></div>
      <el-steps style="margin-left: 15%" :space="500" :active="this.jinud" finish-status="success">
        <el-step title="文件上传" />
        <el-step title="文件合并" />
        <el-step title="文件解压" />
      </el-steps>
      <div style="">
        <el-progress :stroke-width="8" :percentage="this.jindu1" style="margin-top: 10px"/>
        <el-progress :stroke-width="8" :percentage="this.jindu2" style="margin-top: 10px"/>
        <div><span>验证文件:{{this.text}}</span></div>
      </div>
    </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

三、JS
这个稍微有点多，大家耐心点

data() {
    return {
       //弹窗
      text:"",
      message:"",
      dialogVisible:false,
      jinud:0,
      jindu1:0,
      jindu2:0,
      //websocoket心跳
      nowtime:"",
      historytime:"",
      reconnect:"",
    }
  },
   created() {
    this. jinduxiugai("55")
  },
   methods: {
   //这个方法就是断开后怎么重连的心跳
    timerWebsocket(){
      //关闭websocket
      this.historytime=setInterval(() => {
        console.log("心跳检测-----------")
        this.nowtime=0;
        ;}, 3*1000);
      this.reconnect=setInterval(() => {
        if(this.nowtime==0){
          console.log("从新连接！");
          this.initWebSocket()
        }
        ;}, 20*1000);
    },
       //这个是修改进度，呼应后端文章就是meaasge的值，拿过来后做截取处理，能够得到完成总数量，当前步，然后进行百分比显示；
    jinduxiugai(value){
      let x=value.substring(0,1)
      if(x==0){
        let x0=100/value.substring(value.lastIndexOf(".")+1)*value.substring(value.lastIndexOf("=")+1,value.lastIndexOf("."))
        this.jindu1 =parseInt(x0).toFixed(2);
        if(value.substring(value.lastIndexOf("=")+1,value.lastIndexOf("."))==value.substring(value.lastIndexOf(".")+1)){
          this.jinud=1
        }
      }else if(x==1){
        let x1 =100/value.substring(value.lastIndexOf(".")+1)*value.substring(value.lastIndexOf("=")+1,value.lastIndexOf("."))
        this.jindu2 =parseInt(x1).toFixed(2);
if(value.substring(value.lastIndexOf("=")+1,value.lastIndexOf("."))==value.substring(value.lastIndexOf(".")+1)){
          this.jinud=2
        }
      }else if(x==2) {
        this.text=value.substring(value.indexOf(",")+1);
      }else if(x==3){
        this.jinud = 3
      }else if(x==5){
        console.log("初始化")
      }
    },

//websocket主题方法就在下面了-------

    initWebSocket(){
      //初始化weosocket
      //解释一下，绿色的是IP地址和后端端口；sessionStorage.getItem("username");这个是我连接websocket的ID；后续后端传值过来的时候就是根据ID来判断传给谁的
      const wsuri = "ws://10.xxx.xx.xx:8080/wsbSocket/"+sessionStorage.getItem("username");
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen(e){
      //连接建立之后执行send方法发送数据
      // let actions = {"test":"12345"};
      // this.websocketsend(JSON.stringify(actions));
      console.log("连接成功")
    },
    websocketonerror(e){
      //连接建立失败重连
      // this.initWebSocket();
      console.log("错误",e)
    },
    websocketonmessage(e){
      this.nowtime=1
      //数据接收-这里调用修改进度的方法进行进度的实时显示
      this.jinduxiugai(e.data)
    },
    websocketclose(e){  //关闭
      console.log('断开连接',e);
    },
    //关闭连接
    colseConnect(){
    //关闭连接同时关闭心跳检测
      console.log("关闭连接");
      clearInterval(this.historytime);
      clearInterval(this.reconnect);
      this.websock.close();
    },

//写一个简单的方法进行举例子

 //点击按钮选进行websocket连接，同时开启心跳，如果是上传文件的话，就在选文件的时候进行连接
    handleChange() {
      this.initWebSocket() //开启websocket
      this.timerWebsocket()
    },
    //完成需要监控进度的业务流后需要进行websocket连接断开，因为我们只需要保证他在使用的时候连接，不用的时候就断开释放掉，避免资源浪费，顺带做个1秒延迟；
    handleChange1() {
     //关闭websocket
        setTimeout(() => {
          console.log("关闭连接！");
          this.colseConnect()
          ;}, 1*1000);
    },
    //我这里再提供一个测试断开的方法，大家可以测试一下断开后，你的后台控制台显示以及前端显示有没有做到重新连接的效果,在button调用这个方法，在你监控进度的时候，点击断开后，查看是否重连就知道生效了没了
    test(){
      console.log("关闭")
      this.websock.close();
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

可能写的比较乱，大家有不明白的地方直接评论或者私信问我，当然有大佬指教修改的话就更好了，因为目前写的只是功能没问题，其他地方我感觉不是简洁，如果能够进一步优化会更好一点。最后希望能帮到你！