springboot整合websocket（四）上传文件（终篇）

已于 2022-08-29 10:45:20 修改
阅读量3.6k 收藏 14
点赞数 1
文章标签： spring boot websocket java
于 2021-11-09 14:02:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44938451/article/details/121226239
版权

springboot整合websocket（四）上传文件（终篇）

springboot整合websocket（一）简单聊天室
springboot整合websocket（二）聊天室补充篇

springboot整合websocket（三）上传文件（引导篇）
springboot整合websocket（四）上传文件（终篇）

Gitee 地址

gitee是更早之前的版本，只有聊天室的功能，没有文件上传的功能，核心不变，具体实现上有所出入

https://gitee.com/chr_demo/web-socket

如果大家能够有写好的可以共享一下嘛，我实在不想动了（//懒死\\）

说明

这里就涉及到一个问题，文件保存在服务器，前端页面要等后端保存完了之后，再发送下一份。

  1. 前端webSocket.onmessage()方法里面，我们需要判断一下，文件是否发送完成，没有发送完成就发送下一份，发送完成了就结束。

  2. 前端发送文件的时候，我们需要保存文件的上传进度，以便发下一份文件的时候，我们可以发送正确的部分

  • 文件切割用的是slice()方法
  1. 后端再保存文件的时候，就需要追加文件，而不是覆盖文件

直接上代码

1、服务器端

说一下重点
  1. saveFile(File file, byte[] message) 中文件需要追加
  2. onMessage(Session session, byte[] message) 中需要返回本次保存的大小(message.size)
@Log4j2
@Controller
@ServerEndpoint("/websocket")
public class BaseWebsocketController
{

    //使用 ConcurrentHashMap, 保证线程安全, static全局共享 session

    //这里之所以static，是因为这个类不是单例的！！
    //他虽然有@Controller注解，但是不适用Ioc容器中拿对象，每一次请求过来都是一个新的对象

    //存放 session
    private final static Map<String, Session> sessions = new ConcurrentHashMap<>();

    //onopen 在连接创建(用户进入聊天室)时触发
    @OnOpen
    public void openSession(Session session, EndpointConfig config)
    {

    }

    //响应字符串
    @OnMessage
    public void onMessage(Session session, String message) throws IOException
    {
        //使用 fastjson 解析 json 字符串
        final Message data = JSONObject.parseObject(message, Message.class);
        //响应的信息
        final Message response = Message.builder()
                .operation(data.getOperation())         //将请求的 operation 放入
                .build();
        //根据不同的 operation 执行不同的操作
        switch (data.getOperation()) {
            //进入聊天室后保存用户名
            case "tip":
                session.getUserProperties().put("username", data.getMsg());
                sessions.put(session.getId(), session);
                response.setMsg("[" + data.getMsg() + "]进入房间");
                sendAll(JSONObject.toJSONString(response));
                break;
            //发送消息
            case "msg":
                final String username = (String) session.getUserProperties().get("username");
                response.setMsg("[" + username + "]" + data.getMsg());
                sendAll(JSONObject.toJSONString(response));
                break;
            case "filename":
                //删除原有文件
                File file = new File(SpringbootPathUtil.getResourcePath() + "/web-socket/file/" + data.getMsg());
                file.delete();
                log.info(file.getCanonicalPath());

                //保存文件信息
                session.getUserProperties().put("file", file);

                response.setMsg("文件【" + data.getMsg() + "】开始上传");
                sendTo(session, JSONObject.toJSONString(response));
                break;
        }
    }

    //响应字节流
    @OnMessage
    public void onMessage(Session session, byte[] message)
    {
        final Message response = new Message();

        final File file = (File) session.getUserProperties().get("file");

        if (saveFile(file, message)) {
            response.setOperation("file-upload-success");
            response.setMsg(message.length + "");
            sendTo(session, JSONObject.toJSONString(response));
        }
        else {
            response.setOperation("file-upload-fail");
            response.setMsg("文件【" + file.getName() + "】上传失败");
            file.delete();
            sendTo(session, JSONObject.toJSONString(response));
        }
    }

    //onclose 在连接断开(用户离开聊天室)时触发
    @OnClose
    public void closeSession(Session session, CloseReason closeReason)
    {
        System.out.println(closeReason.toString());
        //记得移除相对应的session
        sessions.remove(session.getId());

        sendAll("[" + session.getId() + "]离开了房间");
    }

    @OnError
    public void sessionError(Session session, Throwable throwable)
    {
        //通常有异常会关闭session
        try {
            session.close();
        }
        catch (IOException e) {
            e.printStackTrace();
        }
    }

    private void sendAll(String message)
    {
        for (Session s : sessions.values()) {
            sendTo(s, message);
        }
    }

    private void sendTo(Session session, String message)
    {
        final RemoteEndpoint.Basic remote = session.getBasicRemote();
        try {
            //发送消息
            remote.sendText(message);
        }
        catch (IOException e) {
            e.printStackTrace();
        }
    }

    private boolean saveFile(File file, byte[] message)
    {
        try (OutputStream os = new FileOutputStream(file, true)) {
            os.write(message, 0, message.length);
            return true;
        }
        catch (IOException e) {
            e.printStackTrace();
            return false;
        }
    }
}

2、页面

html部分不动，再上一篇中可以找到一样的，我就放一下script的部分

说一下重点
  1. 文件切分使用 file.slice(start,end)。
  2. 需要一个字段记录上传的文件大小 let fileUploadSize = 0;
  3. 在 filename 中，记得将 fileUploadSize 重置为0
  4. 在 file-upload-success 中，我们需要判断文件是否发送完成。分别对应不同的操作——继续上传 or 结束
<script>
    let webSocket;
    //ip和端口号用自己项目的
    //{websocket}: 其实是刚刚那个@ServerEndpoint("/websocket")中定义的
    let url = 'ws://127.0.0.1:8080/websocket';
    
    let file;
    
    $('#username').keyup(function (e) {
      let keycode = e.which;
      if (keycode == 13) {
        $('#joinRoomBtn').click();
      }
    });
    
    //进入聊天室
    $('#joinRoomBtn').click(function () {
      let username = $('#username').val();
      webSocket = new WebSocket(url);
      webSocket.onopen = function () {
        console.log('webSocket连接创建。。。');
        sendMessage('tip', username);
      }
      webSocket.onclose = function () {
        console.log('webSocket已断开。。。');
        $('#messageArea').append('websocket已断开\n');
      }
      webSocket.onmessage = function (event) {
        //这个 data 和刚刚的 Message 一样
        let data = {
          operation: '',
          msg: ''
        };
        
        data = JSON.parse(event.data);
        switch (data.operation) {
          case "tip":
            $('#messageArea').append(data.msg + '\n');
            break;
          case "msg":     //显示消息
            $('#messageArea').append(data.msg + '\n');
            break;
          case "filename":
            $('#messageArea').append(data.msg + '\n');
            fileUploadSize = 0;
            sendFile(file);
            break;
          case "file-upload-success":
            fileUploadSize += parseInt(data.msg);
            //文件没有上传完成
            if (fileUploadSize < file.size) {
              sendFile(file);
            } else {
              sendMessage('msg', '上传了一个文件【' + file.name + '】');
            }
            break;
          case "file-upload-fail":
            $('#messageArea').append(data.msg + '\n');
            break;
        }
      }
      webSocket.onerror = function (event) {
        console.log(event)
        console.log('webSocket连接异常。。。');
      }
    });
    
    //退出聊天室
    $('#leaveRoomBtn').click(function () {
      if (webSocket) {
        //关闭连接
        webSocket.close();
      }
    });
    
    //发送消息
    $('#sendBtn').click(function () {
      var msg = $('#sendMessage').val();
      if (msg.trim().length === 0) {
        alert('请输入内容');
        return;
      }
      sendMessage('msg', $('#sendMessage').val());
      
      $('#sendMessage').val('');
    });
    
    //上传文件
    // https://www.cnblogs.com/myfjd/archive/2012/03/22/2411374.html
    $('#fileBtn').click(function () {
      let files = [];
      files = $('#file')[0].files;
      if (files.length === 0) {
        alert('请选择文件');
        return;
      }
      
      //发送文件名
      file = files[0];
      sendMessage('filename', file.name);
    });
    
    //发送消息
    function sendMessage(operation, msg) {
      //这个 data 和刚刚的 Message 一样
      let data = {
        operation: operation,
        msg: msg,
      };
      
      //将 data 转成 json 字符串
      webSocket.send(JSON.stringify(data));
    }
    
    let fileUploadSize = 0;
    
    //发送文件
    function sendFile(file) {
      let dist = file.size < fileUploadSize + 1024 ? file.size : fileUploadSize + 1024;
      //切分文件
      let blob = file.slice(fileUploadSize, dist);
      //文件读取对象
      let reader = new FileReader();
      
      //文件加载后的回调函数
      reader.onload = ev => {
        let buffer = ev.target.result;
        webSocket.send(buffer);
      }
      //二进制加载文件
      reader.readAsArrayBuffer(blob);
    }
  
  </script>

那么，大文件也可以通过切分的方式上传了!!!

最后，还是提醒一下，文件上传还是用接口比较方便，websocket就不是做这个用滴。

End

Question 1

Q：我想选择很多个文件咋办
A：将选择的文件存进数组里面，上传完一个再上传第二个

Question 2

Q：我想同时上传多个文件欸
A：
1、websocket一次只能传递一个文件，要想多个文件，只能建立多个websocket连接。

springboot整合websocket（一）简单聊天室
springboot整合websocket（二）聊天室补充篇

springboot整合websocket（三）上传文件（引导篇）
springboot整合websocket（四）上传文件（终篇）

QQ两个人
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
springboot整合websocket
02-03
SpringBoot 整合 WebSocket SpringBoot 是一个基于 Java 的开源框架，提供了一个快速构建生产级别的应用程序的方法。WebSocket 是一种网络通信协议，允许服务器推送数据到客户端，实时地更新客户端的内容。下面将...
springboot-websocket:SpringBoot整合WebSocket
05-26
本项目"springboot-websocket"主要关注的是如何在SpringBoot应用中整合WebSocket，以实现实时推送或者双向通信的需求。以下将详细介绍整合过程中的关键知识点： 1. **WebSocket协议**：WebSocket协议是基于TCP的，...
使用websocket传输文件（客户服务端都使用java）
@随心的博客
06-09 3483
3、自定义我们配置文件中配置的处理类FileTransferHandler2，实现接BinaryWebSocketHandle 或TextWebSocketHandler，然后在handleTextMessage方法中自定义处理文本信息的程序在 handleBinaryMessage方法中自定义处理文件流信息的程序。看了一些案例都是在讲聊天室的案例，用于文件传输的案例很少,于是在开发中遇到了一些问题，文件发送接收不到，终于，今天解决了，所以记录一下学习心得。
spring boot 使用WebSocket与前端进行byte字节数组交互
热门推荐
无名氏灬的博客
10-31 11万+
一、装逼前先热热身 无论是比较传统的 web项目 还是近几年流行的前后端分离，后端只独立提供数据交互接口服务的项目，都避免不了数据之间交互格式的选择。 从很早之前的 xml 格式 到现在最火热的json格式 我们可以发现数据格式都是越来越 “短小精悍” 。当然我们可能在某些特定的业务场合，比如对延时要求特别高的场景 H5多人对战类型游戏 实时的数据信息交互场景 语音聊天、以及难度更高的...
SpringBoot整合Websocket的使用
最新发布
qq_61068952的博客
04-19 2605
WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议。它允许客户端和服务器之间的双向通信，使得实时数据传输成为可能。相比传统的 HTTP 请求-响应模型，WebSocket 具有更低的延迟，更高的性能和更少的网络开销。：WebSocket 允许客户端和服务器之间同时进行双向通信，而不是像 HTTP 那样只能由客户端发起请求，服务器才能响应。：由于 WebSocket 建立在单个 TCP 连接上，因此可以减少因为建立和销毁连接而引起的网络开销，从而实现更低的延迟。
使用websocket stomp 发送文件
mrqi122的博客
08-05 933
使用websocket stomp 发送文件。
springboot整合websocket（三）上传文件（引导篇）
qq_44938451的博客
11-09 4078
springboot整合websocket（二） springboot整合websocket（一） 接上一章，这次我们把文件上传的坑给填了 1、回顾一下 上次提到有一个方法： void onMessage(Session session, byte[] message); 这个是用来上传文件用的，先解释一下 byte[] 这个参数。 好吧~ 大家猜的没错，这个就是我们文件的二进制流。 所以说，我们要干两件事： 第一，我们js要获得文件，并转成二进制流发过来 第二，在上传之前，我们需要知道文件的名字，因
Swoole从入门到入土(19)——WebSocket服务器[文件传输]
06-27 766
我们可以设定自己的机制，连续传输图片数据，不断画到canvas上，造成小电影即视感；到这里，有一点需要进行强调，利用slice对文件进行分割发送，多次send将文件内容多次传输到接收端，websocket协议会保证先发的先到达，后发的后达到，不会存在乱序问题。接下来，如果arraybuffer存储的是字符串数据，我们面临的就是要判断这些二进制数是是GBK还是UTF-8，并转成对应的string。要利用WebSocket进行文件传输，我们需要讨论两种情况，分别是：发送方可以是客户端，和 发送方是服务端。
SpringBoot整合WebSocket+nacos注册中心
01-07
通过这样的整合，SpringBoot项目不仅可以利用WebSocket提供实时通信能力，还可以借助Nacos实现服务的动态管理和通信，极大地提升了微服务架构的灵活性和可扩展性。在实际开发中，还需要考虑异常处理、性能优化以及与...
springboot+websocket进度条实战
11-11
在本项目中，"springboot+websocket进度条实战"是一个基于Spring Boot框架和WebSocket技术的实战应用，旨在展示如何在Web应用程序中实现一个实时的进度条功能。Spring Boot简化了Java Web开发，提供了快速构建独立...
springboot+websocket分布式实现
11-17
综上所述，“springboot+websocket分布式实现”涉及到的主要技术包括WebSocket协议、SpringBoot的WebSocket支持、Redis消息队列以及Spring Session和Spring Cloud的分布式会话管理。通过这些技术的组合，可以构建出...
WebSocket使用@OnMessage注解无法收到消息的坑与解决方法
BHSZZY的博客
01-07 2万+
一、前言 最近新写了一个Java WebSocket后台，用来和前端通信；本来前端通过js是可以成功建立WebSocket连接的，但是前端使用WebSocket发给后台的消息，后台却怎么也收不到。 以下是问题描述与解决办法。 二、问题描述 1.前端建立WebSocket连接的关键代码样例如下： var msg="abc123"; //var imUrl="wss://10.123.123.123:9999/api/im"; var imUrl="ws://10.123.123.123:9999/api/im
Java Websocket发送文件给Vue客户端接收并上传，实现检测U盘插入并将指定文件上传到服务器功能
gdgztt的专栏
01-12 1092
Java Websocket发送文件给web客户端接收并上传，实现检测U盘插入并将指定文件上传到服务器
springboot整合websocket上传文件
qq_37705525的博客
07-05 622
springboot整合websocket上传文件
如何在 Spring Boot 中进行文件上传
stormjun的博客
10-10 1459
本文介绍了如何在Spring Boot中进行文件上传。通过创建一个文件上传控制器、文件上传表单以及配置文件上传属性，您可以轻松地实现文件上传功能。根据您的实际需求，您可以进一步扩展和定制文件上传功能。希望本文对您有所帮助！以上是关于在Spring Boot中进行文件上传的简要介绍和示例代码。希望这对您有所帮助，如果您有任何问题或需要进一步的帮助，请随时提问。
springboot文件上传
Starbright.的博客
04-11 2万+
/</</</</其中后端处理文件上传的请求地址为/uploadFile，请求方法为POST。在文件上传时需要设置form表单的enctype属性为“multipart/form-data”。
SpringBoot实现WebSocket
山不见我，我自见山
12-06 1万+
WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议） 它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。
Java Websocket 02: 原生模式通过 Websocket 传输文件
IOsetting的专栏
06-19 3473
服务端和客户端的 onMessage() 方法可以存在多个, 分别用于处理不同格式的内容, 传输文件时需要使用 ByteBuffer 类型的消息处理, 在处理过程中和普通的文件传输是一样的, 需要将文件分片传输, 并约定合适的消息头用于判断文件传输的阶段, 在服务端根据不同的阶段进行文件创建, 写入和结束
websocket实现web上传文件进度条
lizhi1030的博客
09-06 1675
websocket实现web上传文件进度条
springboot整合websocket并配置自定义端口
03-31
1. 首先在pom.xml中添加依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 2. 在Spring Boot启动类上添加@EnableWebSocket注解开启WebSocket支持。 ```java @SpringBootApplication @EnableWebSocket public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } ``` 3. 创建WebSocket处理器，继承自TextWebSocketHandler，并实现handleTextMessage方法。在该方法中处理收到的消息，并发送响应消息。 ```java @Component public class WebSocketHandler extends TextWebSocketHandler { @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { String payload = message.getPayload(); System.out.println("收到消息：" + payload); session.sendMessage(new TextMessage("服务器响应：" + payload)); } } ``` 4. 配置WebSocket端口，打开application.properties文件并添加如下配置： ```properties server.port=8080 server.servlet.context-path=/ spring.mvc.view.prefix=/WEB-INF/jsp/ spring.mvc.view.suffix=.jsp # WebSocket配置 server.endpoint.prefix=/ws spring.websocket.path=/ws ``` 其中server.port为Spring Boot应用端口，server.endpoint.prefix为WebSocket的端点前缀，spring.websocket.path为WebSocket的路径。 5. 在配置类中创建WebSocketHandler对象，并将其注册到WebSocket处理器中。 ```java @Configuration public class WebSocketConfig implements WebSocketConfigurer { @Autowired private WebSocketHandler webSocketHandler; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(webSocketHandler, "/ws").setAllowedOrigins("*"); } } ``` 6. 启动Spring Boot应用，访问http://localhost:8080/ws即可连接WebSocket。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值