Senden einer Datei mithilfe von javascript websocket-client
Ich versuche zum senden einer Datei mithilfe von websocket-Verbindung zu meinem server:
Ich habe implementierten websocket-server-side mit java, Spring
die client-Seite in javaScript
aus irgendeinem Grund jedes mal, wenn ich senden einer binären Nachricht von der client-Seite mit Hilfe von "blob" oder auf "arraybuffer. der server erkennt die Nachricht als SMS-Nachricht nicht als binäre.
was vermisse ich hier?
Client-Seite
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chat</title>
</head>
<body>
<h2>File Upload</h2>
Select file
<input type="file" id="filename" />
<br><br><br>
<input type="button" value="Connect" onclick="WebSocketTest()" />
<br><br><br>
<input type="button" value="Upload" onclick="sendFile()" />
<script>
"use strict"
var ws;
function WebSocketTest()
{
if ("WebSocket" in window)
{
console.log("WebSocket is supported by your Browser!");
//Let us open a web socket
ws = new WebSocket("ws://xx.xx.xx.xx:yyyy/service/audioHandler");
ws.onopen = function()
{
//Web Socket is connected, send data using send()
ws.send(JSON.stringify({userName:'xxxx',password:'sgdfgdfgdfgdfgdf'}));
console.log("Message is sent...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
console.log("Message is received...");
};
ws.onclose = function()
{
//websocket is closed.
console.log("Connection is closed...");
};
}
else
{
//The browser doesn't support WebSocket
console.log("WebSocket NOT supported by your Browser!");
}
}
function sendFile() {
var file = document.getElementById('filename').files[0];
ws.binaryType = "arraybuffer";
//ws.send('filename:'+file.name);
var reader = new FileReader();
var rawData = new ArrayBuffer();
console.log(file.name);
reader.loadend = function() {
}
reader.onload = function(e) {
rawData = e.target.result;
ws.send(rawData);
console.log("the File has been transferred.")
//ws.send('end');
}
reader.readAsArrayBuffer(file);
}
</script>
</body>
</html>
Server-Seite
public class WebSocketController extends BinaryWebSocketHandler {
@Autowired
private ApplicationContext applicationContext;
@Autowired
private CallScopeStore callScopeStore;
private static Logger logger = Logger.getLogger(AudioHandler.class);
private static final String STOP_MESSAGE = "stop";
@Override
protected void handleBinaryMessage(WebSocketSession session, BinaryMessage message) {
try {
//do something....
} catch (Exception e) {
logger.error(e, e);
throw new RuntimeException(e);
}
}
@Override
protected void handleTextMessage(final WebSocketSession session, TextMessage message) {
try {
//do something....
}
} catch (Exception e) {
logger.error(e, e);
throw new RuntimeException(e);
}
}
}
- Versuchen Sie, senden
Blob
Sie jetzt sendenArrayBuffer
, und kann Sie überschreiben müssen den MIME-Typ der Anfrage - ich habe versucht, diese Methode: Funktion sendFileBlob() { var Datei = Dokument.getElementById('filename').files[0]; ws."binaryType" = "blob", ws.senden ("Datei");} Und die Verbindung wurde geschlossen mit diesem Fehler: CloseStatus[code=1009, Grund=Keine async-Meldung unterstützen, und der Puffer zu klein ist. Buffer size: [8,192], Message size: [7,816,684]]
- es scheint, muss ich stream die Datei als Brocken, weißt du wie das geht?
- Wenn Sie ein live-Beispiel, ich werde versuchen
- Verwandte: stackoverflow.com/questions/21730566/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Senden Sie die Datei als blob.
Wahrscheinlich kann man einen Fehler finden, wie Sie erwähnen: "CloseStatus[code=1009, Grund=Keine async-Meldung unterstützen, und der Puffer zu klein ist. Buffer size: [8,192], Message size: [7,816,684]]". Das geschieht, weil Ihr WebSocket-Motor müssen so konfiguriert werden, dass binäre Nachricht mit der Größe, die Sie wollen. Zum Beispiel, in Ihrem WebSocketConfig:
Wie Sie sehen können, Sie können die maximal erlaubte Größe für Ihren text-und Binär-Nachrichten, geben Sie einfach eine Größe größer als 7,816,684 (die Datei, die Sie versuchen zu senden). Standardmäßig wird die Puffergröße ist [8,192] also, wenn Sie senden eine Datei mit einer kleineren Größe als die Puffergröße, es sollte keine Probleme geben. Für weitere Informationen, können Sie überprüfen websocket-spring-Dokumentation.