Datei-upload mit java-websocket-API und Javascript

Ich studiere websocket-und chat-Programm mit der websocket - /json. Aber ich bin stecken in den Datei-Upload ATM. Jede Beratung & Antwort wäre dankbar.

Server-Seite:

package websocket;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.ByteBuffer;

import javax.websocket.CloseReason;
import javax.websocket.EndpointConfig;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/receive/fileserver")
public class FileServer {
    @OnOpen
    public void open(Session session, EndpointConfig conf) {
        System.out.println("chat ws server open");
    }

    @OnMessage
    public void processUpload(ByteBuffer msg, boolean last, Session session) {
        System.out.println("Binary message");

        FileOutputStream fos = null;
        File file = new File("D:/download/tmp.txt");
        try {
            fos = new FileOutputStream(file);
        } catch (FileNotFoundException e) {         
            e.printStackTrace();
        }

        byte readdata = (byte) -999;
        while(readdata!=-1) {
            readdata=msg.get();
            try {
                fos.write(readdata);
            } catch (IOException e) {               
                e.printStackTrace();
            }
        }

    }

    @OnMessage
    public void message(Session session, String msg) {
        System.out.println("got msg: " + msg + msg.length());

    }

    @OnClose
    public void close(Session session, CloseReason reason) {
        System.out.println("socket closed: "+ reason.getReasonPhrase());
    }

    @OnError
    public void error(Session session, Throwable t) {
        t.printStackTrace();

    }
}

Client:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Chat</title>
<script type="text/javascript" src="/MyHomePage/jquery-2.0.3.min.js"></script>
</head>
<body>
    <h2>File Upload</h2>
    Select file
    <input type="file" id="filename" />
    <br>
    <input type="button" value="Connect" onclick="connectChatServer()" />
    <br>
    <input type="button" value="Upload" onclick="sendFile()" />
    <script>
        var ws;

        function connectChatServer() {
            ws = new WebSocket(
                    "ws://localhost:8080/MyHomePage/receive/fileserver");

            ws.binaryType = "arraybuffer";
            ws.onopen = function() {
                alert("Connected.")
            };

            ws.onmessage = function(evt) {
                alert(evt.msg);
            };

            ws.onclose = function() {
                alert("Connection is closed...");
            };
            ws.onerror = function(e) {
                alert(e.msg);
            }

        }

        function sendFile() {
            var file = document.getElementById('filename').files[0];
            var reader = new FileReader();
            var rawData = new ArrayBuffer();            

            reader.loadend = function() {

            }
            reader.onload = function(e) {
                rawData = e.target.result;
                ws.send(rawData);
                alert("the File has been transferred.")
            }

            reader.readAsBinaryString(file);

        }


    </script>
</body>
</html>

server-Seite geschlossen, Grund-Nachricht ist wie folgt

socket geschlossen: Der decodierte text-Nachricht zu groß ist für den Ausgabe-Puffer und der Endpunkt nicht unterstützt teilweise Nachrichten

Q1: Es scheint, dass es ist die Suche nach text-Verarbeitung-Methode anstelle der binären Verarbeitung-Methode nach dem Grund geschlossen, wie kann ich dieses Problem beheben?

Q2: Sollte ich ändern, Datentyp Blob zur transfer-Datei auf javascript-Seite? Dann, wie?

extra Q: Kann jemand link Beispiel Quelle(N) der websocket-Datei übertragen(java-websocket-oder javascript-entweder/beide)?

Vielen Dank für das Lesen 🙂

Ich fand heraus, wie Datei hochladen, aber stuck an der Upload-Geschwindigkeit jetzt. Wenn Sie interessiert sind, können Sie finden die Quelle und die neue Frage here.

InformationsquelleAutor parn | 2014-02-14

Nach einigen nachforschungen und versucht, fand ich heraus, dass " Leser.readAsBinaryString(Datei);' war die Ursache von Frage 1. Ändern Sie es in " reader.readAsArrayBuffer(Datei);' mein erstes problem gelöst wurde.

Darüber hinaus, da der websocket-überträgt eine Datei mehrere Daten nur teilweise automatisch, änderte ich die Quelle wie folgt. Das funktioniert! nur, wenn die Dateigröße nicht so groß ist. :/

Server-Seite geändert Quelle:

package websocket;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.ByteBuffer;

import javax.websocket.CloseReason;
import javax.websocket.EndpointConfig;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/receive/fileserver")
public class FileServer {
    static File uploadedFile = null;
    static String fileName = null;
    static FileOutputStream fos = null;
    final static String filePath="d:/download/";

    @OnOpen
    public void open(Session session, EndpointConfig conf) {
        System.out.println("chat ws server open");
    }

    @OnMessage
    public void processUpload(ByteBuffer msg, boolean last, Session session) {
        System.out.println("Binary Data");      

        while(msg.hasRemaining()) {         
            try {
                fos.write(msg.get());
            } catch (IOException e) {               
                e.printStackTrace();
            }
        }

    }

    @OnMessage
    public void message(Session session, String msg) {
        System.out.println("got msg: " + msg);
        if(!msg.equals("end")) {
            fileName=msg.substring(msg.indexOf(':')+1);
            uploadedFile = new File(filePath+fileName);
            try {
                fos = new FileOutputStream(uploadedFile);
            } catch (FileNotFoundException e) {     
                e.printStackTrace();
            }
        }else {
            try {
                fos.flush();
                fos.close();                
            } catch (IOException e) {       
                e.printStackTrace();
            }
        }
    }

    @OnClose
    public void close(Session session, CloseReason reason) {
        System.out.println("socket closed: "+ reason.getReasonPhrase());
    }

    @OnError
    public void error(Session session, Throwable t) {
        t.printStackTrace();

    }
}

Browser(Client) Seite:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Chat</title>
<script type="text/javascript" src="/MyHomePage/jquery-2.0.3.min.js"></script>
</head>
<body>
    <h2>File Upload</h2>
    Select file
    <input type="file" id="filename" />
    <br>
    <input type="button" value="Connect" onclick="connectChatServer()" />
    <br>
    <input type="button" value="Upload" onclick="sendFile()" />
    <script>
        var ws;

        function connectChatServer() {
            ws = new WebSocket(
                    "ws://localhost:8080/MyHomePage/receive/fileserver");

            ws.binaryType = "arraybuffer";
            ws.onopen = function() {
                alert("Connected.")
            };

            ws.onmessage = function(evt) {
                alert(evt.msg);
            };

            ws.onclose = function() {
                alert("Connection is closed...");
            };
            ws.onerror = function(e) {
                alert(e.msg);
            }

        }

        function sendFile() {
            var file = document.getElementById('filename').files[0];
            ws.send('filename:'+file.name);
            var reader = new FileReader();
            var rawData = new ArrayBuffer();            
            //alert(file.name);

            reader.loadend = function() {

            }
            reader.onload = function(e) {
                rawData = e.target.result;
                ws.send(rawData);
                alert("the File has been transferred.")
                ws.send('end');
            }

            reader.readAsArrayBuffer(file);

        }


    </script>
</body>
</html>

Ich noch nicht herausfinden, so übertragen Sie große Dateien. (Ich bin zu Ahnen, auto-timeout und/oder Puffer-Größe). Jede Beratung plz?

InformationsquelleAutor parn

1

In Meinem Fall funktioniert das hochladen von großen Dateien ohne browser-Absturz oder Steckdose in der Nähe.

Bitte befolgen Sie die folgenden Schritte, um es arbeiten.
1. Verwenden, web-worker, um schneiden Sie die großen Dateien
2. senden Sie die Stücke, um server mit der Websocket-vom Haupt-thread
3. konstruieren Datei auf der server-Seite basiert auf blob-oder chunk-Informationen.
4. unique-id für jede Datei beim hochladen von Dateien auf den server, so dass server erkennen kann, auf welche Datei Anhängen
5. Im server-Seite zunächst platzieren Sie es im Ordner "temp" mit der eindeutigen id nach Fertigstellung verschieben Sie es auf den genauen Ordner.
Können Sie durch diese Artikel um eine Vorstellung zu bekommen über das komplette work-flow, seine Arbeit mit Websocket.

InformationsquelleAutor Konga Raju

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.