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 senden ArrayBuffer, 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/...
InformationsquelleAutor snabel | 2015-01-15
Schreibe einen Kommentar