SpringBoot+Vue websocket上传进度条；同时做防断开处理（心跳）后端-2_spring-boot-starter-websocket 进度条

前言
简单说一句，他是双向通信全双工的一个类似HTTP的协议（跟微信QQ聊天群收发信息一个道理）。按照惯例，不作详细科普只追求功能实现，如果有需要了解有关websocket原理的，大家可以检索一下就出来一大堆大佬的说明了。前面几点基本都是摘取大佬们的代码，东一点西一点拼出来的，所以也没有办法引用了，希望理解
一、需要在后端引入依赖
废话：在pom.xml里加上

<!--配置websocket-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
       <!--日志--> 
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        
1
2
3
4
5
6
7
8
9
10
11
12

二、开启Websocket支持
废话：就是在配置文件夹方创建一个类对Websocket进行配置

@Configuration
public class WebsocketConfig {
   @Bean
    public ServerEndpointExporter serverEndpointExporter(){
       return new ServerEndpointExporter();
   }
}
1
2
3
4
5
6
7

三、创建Websocket方法类

import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;
@Component
@ServerEndpoint("/wsbSocket/{username}")
@Slf4j
public class Websocket {
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。

    private static int onlineCount = 0;
    /**
     * 与客户端的连接会话，需要通过它来给客户端发送数据
     */
    private Session session;
    /**
     * concurrent包的线程安全Set，用来存放每个客户端对应的WebSocket对象。
     */
    private static ConcurrentHashMap<String,Websocket> websockets=new ConcurrentHashMap<>();
    //接收sid
    private String userId = "";
    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public   void  onPen(Session session,@PathParam("username") String userId){
        this.session = session;
        this.userId=userId;
        if(websockets.containsKey(userId)){
            websockets.remove(userId);
            websockets.put(userId,this);
            //加入set中
        }else{
            websockets.put(userId,this);
            //在线数加1
        }
        log.info("[websocket消息]有新的连接，总数{}",websockets.size()+"用户"+userId);
    }
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(){
        if(websockets.containsKey(userId)){
            websockets.remove(userId);
        }
        log.info("[websocket消息]连接断开，总数{}",websockets.size());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message){
        log.info("[websocket消息]收到客户端发送的消息：{}",message);
    }
    /**
     * 实现服务器主动推送
     */
    public void sendMessage(String message){
//            log.info("[websocket消息]广播消息，message={}",message);
        try {
            this.session.getBasicRemote().sendText(message);
        }catch (Exception e){
            e.printStackTrace();
        }
    }

    /**
     * 发送自定义消息
     * */
    public static Integer sendInfo(Integer code,String jindu,@PathParam("userId") String userId) throws IOException {
//        log.info("发送消息到:"+userId+"，消息:"+code+"="+jindu);
//判断当前用户有没有连接websocket，如果有就发信，我这里的message采用字符串拼接，看不懂的去专栏看前端部分，那边会说为什么message是这样的
        if(StringUtils.isNotBlank(userId)&&websockets.containsKey(userId)){
            String message=code+"="+jindu;
            websockets.get(userId).sendMessage(message);
            return 1;
        }else{
            log.error("用户"+userId+",不在线！");
            return 2;
        }
    }
}
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

四、在需要的监控的地方调用

   //基本是在需要的地方进行引用-类似调用Service层一样
   @Resource
    public Websocket websocket;
    //然后在你需要监控进度的代码块里面加上这个方法，等于在代码运行到这里的时候会发送一个消息给到前端，前端在接收到这个消息后进行处理，得到里面的值，从而达到实现上传进度条的效果，在分片上传的时候就可以加上，达到监控的一个效果；
    //其中第一个参数表示步骤，第二个参数表示的是message，第三个参数是表示当前发送给哪一个用户，我这里调用的是我当前登录的用户，也就是当前上传文件的用户，多B一句，我这里用的是Satoken进行登录验证，这个方法可以反序列出我的用户名
    //我这里采取比较笨的方法做的心跳，就是当发送的消息失败的时候，也就是前端用户断开连接后，我会在当前运行的代码中进行延迟等待后再继续执行下一个循环，基本在需要进度的地方都是存在循环的，要不然就一两个文件也不需要做什么进度；
        int sd= websocket.sendInfo(2,numberJD+"."+zipEntry.getSize()+","+zipEntry.getName().substring(zipEntry.getName().lastIndexOf("/") + 1), (String) StpUtil.getTokenInfo().getLoginId());
                    if(sd==2){
                        //延迟循环等待前端从新建立连接
                        //延时方法二
                        System.out.println("开始延迟----------0秒");
                        try {
                            Thread.sleep(30000);
                            System.out.println("Thread延30秒");
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

后端基本就这样了，对于websocket中的第二个参数不太理解的，可以看对应的前端篇，那边会有解析，为什么数据是这样的；希望能够帮到你。