有 Java 编程相关的问题?

你可以在下面搜索框中键入要查询的问题!

java Websocket通过Javascript客户端发送图像文件

我正在编写一个简单的应用程序,其中javascript websocket客户端必须将图像发送到由tomcat和Java语言实现的WebCoket。 当我发送字符串消息时,一切都进行得很顺利,但如果我发送图像数据,@Onmessage事件不会被触发。我已经花了两天时间,但还没有找到解决方案

Java WebSocket代码:

@ServerEndpoint("/sendfile")
public class BinaryWebSocketServer {
    private
    static final Set<Session> sessions =
    Collections.synchronizedSet(new HashSet<Session>());

    @OnOpen
    public void onOpen(Session session) {
        sessions.add(session);
        System.out.println("onOpen_File::" + session.getId());        
    }
    @OnClose
    public void onClose(Session session) {
        sessions.remove(session);
        System.out.println("onClose_File::" +  session.getId());
    }

    @OnMessage
    public void onMessage(byte[] data, Session session) {
        System.out.println("onByteArrayMessage::From=" + session.getId() + " with len:" + data.length );
        ByteArrayInputStream bis = new ByteArrayInputStream(data);
        BufferedImage bImage2;
        try {
            bImage2 = ImageIO.read(bis);
             ImageIO.write(bImage2, "jpg", new File("output.jpg") );
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }

        System.out.println("image created");

    }


    @OnError
    public void onError(Throwable t) {
        System.out.println("onError::" + t.getMessage());
    }

}

Javascript客户端:

<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()" />
     <input onclick="wsCloseConnection();" value="Disconnect" type="button">
    <br />
    <textarea id="echoText" rows="5" cols="30"></textarea>
    <script>

    var webSocket = new WebSocket("ws://192.168.1.55:8081/Hello-Capture/sendfile");
    webSocket.binaryType = 'arraybuffer';
    webSocket.onopen = function(message){ wsOpen(message);};
    //webSocket.onmessage = function(message){ wsGetMessage(message);};
    webSocket.onclose = function(message){ wsClose(message);};
    webSocket.onerror = function(message){ wsError(message);};
    function wsOpen(message){
        echoText.value += "Connected ... \n";
    }
    function wsSendMessage(){
        webSocket.send(message.value);
        echoText.value += "Message sended to the server : " + message.value + "\n";
        message.value = "";
    }
    function wsCloseConnection(){
        webSocket.close();
    }
    function wsGetMessage(message){
        echoText.value += "Message received from to the server : " + message.data + "\n";
    }
    function wsClose(message){
        echoText.value += "Disconnect ... \n";
    }

    function wsError(message){
        echoText.value += "Error ..." + message.code +" \n";
    }


        function sendFile() {

            var file = document.getElementById('filename').files[0];

            var reader = new FileReader();

            var rawData = new ArrayBuffer();            

            reader.loadend = function(e) {

            };

            reader.onload = function(e) {

                var rawData = e.target.result;
                var byteArray = new Uint8Array(rawData);
                var fileByteArray = [];

                webSocket.send(byteArray.buffer);


                echoText.value =("the File has been transferred.\n");

            };

            reader.readAsArrayBuffer(file);

        }

    </script>

</body>

共 (1) 个答案

  1. # 1 楼答案

    最后,我找到了解决方案,所以我对它进行了评论,也许有人陷入了困境。 我忘了将布尔参数传递给onMessage函数。 正确的形式是:

     @OnMessage
    public void onMessage(byte[] data,boolean last, Session session) {
        .
        .
        .
     }