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