Sending large messages through STOMP failes on Client-Side

Viewed 654

I want to send a file (like 4/5 MB) from my Angular-Frontend to a SpringBoot-Server. I am using STOMP via StompJS and whenever i try to send the content of the file, my client looses connection... (i think because of the message size => small strings work).

Is there a way to send a very big string or the whole file to my java backend? I also tried to send the bytes but than the result on the server-side was and empty file. Thanks!

PS: I already changed the buffer size of the server, so the problem must be at the stompjs-client...

Connection-Service (frontend):

  public setupConnection() {

        console.log("Initialize WebSocket Connection");
        let ws = new SockJS(this.webSocketEndPoint);
        this.stompClient = Stomp.over(ws);
        this.stompClient.maxWebSocketChunkSize = 10000000;
        this.stompClient.splitLargeFrames = true;
        const _this = this;
        _this.stompClient.connect({}, function (frame) {
            _this.stompClient.subscribe(_this.subscribeDestination, _this.stompClient.send("/app/userdata", {}, "data"), function (sdkEvent) {
                _this.onMessageReceived(sdkEvent);
            });
            //_this.stompClient.reconnect_delay = 2000;
        }, this.errorCallBack);
        
  }
  onMessageReceived(message) {
    console.log("Message Recieved from Server :: " + message);
    var result = JSON.stringify(message.body);
    console.log(result);
  }

  errorCallBack(error) {
    console.log("errorCallBack -> " + error )
    setTimeout(() => {
        this.setupConnection();
    }, 5000);
    
}

send(message) {
  console.log("Sending message...");
  this.stompClient.send("/app/config", {}, message);
  
}

public selfRegistration(){
  this.stompClient.send("/app/userdata",{}, "userdata");
}

File-Input-Handling (frontend):

// as string
  onFileChangeString(event){
    this.file= event.target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
 
        this.fileLoaded = true;
        this.filecontent = reader.result as String;
        this.connectionService.send(this.filecontent);
    }   
    reader.readAsText(this.file);
  }
  //as arraybuffer
  onFileChangeBuffer(event){
    this.file= event.target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
 
        this.fileLoaded = true;
        this.filecontent = reader.result as ArrayBuffer;
        var array = new Uint8Array(this.filecontent);
        this.connectionService.send(array);
    }   
    reader.readAsArrayBuffer(this.file);
  }

Message-Handling (backend):

    @Override
    public void configureWebSocketTransport(WebSocketTransportRegistration registry) {
        registry.setMessageSizeLimit(100000000);
        registry.setSendBufferSizeLimit(100000000);
    }

    //try string
    @MessageMapping("/config")
    @SendToUser("/ba/configuration")
    public String recieveConfigurationFileString(String message, @Header("simpSessionId") String sessionId, Principal principal) throws Exception {
        System.out.println("Received config message from" + message +" " + principal.getName() +" " + sessionId);
        
        return "testresult";
    }
    //try byte array
    @MessageMapping("/config")
    @SendToUser("/ba/configuration")
    public String recieveConfigurationFile(byte[] message, @Header("simpSessionId") String sessionId, Principal principal) throws Exception {
        System.out.println("Received config message from" + message +" " + principal.getName() +" " + sessionId);
      // how to handle byte input?         

        return "testresult";
    }

The console output is :

Sending message...
compat-client.js:32 >>> SEND
destination:/app/config
content-length:1970879


compat-client.js:32 chunk sent = 1969497, remaining = 0
compat-client.js:32 Connection closed to undefined
0 Answers
Related