关于SpringBoot整合WebSocket实现前端进度条遇到的问题

2023-01-08 15:06:43

一、客户端连接服务器失败（viewCode: 200）

背景

我在做的项目中存在token校验的过程，关于这个过程我当时还不清楚，花了一个晚上去网上搜索了解。简单来讲，对于我们工程来讲，就是客户端初次开启会话与服务端建立连接的时候，后端会根据用户信息、算法.....等系列操作生成一个唯一的token,下次客户端进行请求时会在HttpHeader携带这个token。这样做的目的是校验前后访问服务器的是不是同一个人。这里附上大佬通俗易懂的解说：彻底理解cookie，session，token - 知乎jj发展史1、很久很久以前，Web 基本上就是文档的浏览而已，既然是浏览，作为服务器，不需要记录谁在某一段时间里都浏览了什么文档，每次请求都是一个新的HTTP协议，就是请求加响应，尤其是我不用记住是谁刚刚发…https://zhuanlan.zhihu.com/p/63061864
问题及解决方法

不意外的，通过webSocket建立的ws连接建立也需要进行token的校验过程，也就是在请求头中设置token信息。网上看了很多帖子，有说ws是不让设置请求头的，也有给出一些解决方法的。不过本大大后来都没实现，哈哈哈哈！这里附上网上的解决办法：【JavaScript】在websocket里面添加Token_maomaolaoshi的博客-CSDN博客_js websocket请求头websocket协议在握手阶段借用了HTTP的协议，但是在JavaScript websocketAPI中并没有修改请求头的方法。var token='dcvuahsdnfajw12kjfasfsdf34'send发送参数var ws = new WebSocket("ws://" + url + "/webSocketServer");ws.onopen=functio...https://blog.csdn.net/maomaolaoshi/article/details/82593106?utm_source=copy

附上我的解决办法： 修改项目中设置的http拦截器 ；本质上就是对于所有你手动定义的ws请求都放行，不进行拦截

当然不同类型的项目拦截器的设定都是不一致的，如果不知道怎么改去问你们项目经理吧，哈哈哈哈哈！

二、ws请求需要传参问题

我选择的是客户端与服务器建立连接之后，客户端主动给后端发送参数信息；

在网上也有看到其他方式实现，但是我这边用不来，实现不了，哈哈哈哈哈！

实现

    downLoadProject(row, index) {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
        this.socket.onclose = this.close;
      }
    },
    open: function () {
      console.log("socket连接成功");
      let params = {
        projectId: localStorage.getItem("COMMON.RUNTIME.PRJTID"),
        projectCaseId: localStorage.getItem("COMMON.RUNTIME.PRJTCASEID"),
        stageId: localStorage.getItem("COMMON.RUNTIME.STAGEID"),
      };
       
        //通过连接成功后返回的Socket实例,调用其send方法传参给服务器
      this.socket.send(JSON.stringify(params)); 
      注意：客户端与服务器进行信息交互，规定是json格式，所以需要调用JSON.stringify()方法进行转化
}

来看一看后端怎么接收：

    //此注解下的方法用于接收前端发送来的Json串
   @OnMessage 
    public void onMessage(Session session, String message) { 
    //message就是前端发送的Json串
        System.out.println("收到客户端发来的消息: " + message + session.getId());
        String token = SESSION_ID_TOKEN.get(session.getId());
        new Thread(new MyThread(webSocketController, token, message)).start();
    }

三、在@onMessage注解里依赖注入失效问题

背景

在后端接收到前端发送的信息，也就是Json串后。要进行业务逻辑的处理，为了降低耦合性，同时方便使用和管理，我首先想到的就是Spring的IOC -- 控制反转。废话不多说，直接上解决办法：

来源于一个大佬的帖子，但是现在找不到原文了，说声抱歉！！

2. 原因

webSocket进行连接传递信息时，需要对多个客户端创建多个实例，而spring默认为单例模式，只有在遇到@Component注解时，会进行一次实例化，而之后服务器为客户端创建的实例中，spring不会进行依赖注入，因此变量为null。

四、线程中依赖注入失败问题

五、WebSocket关闭连接报错

六、WecSocket进行对象传输

七、java实现每隔4秒获取文件下载进度