Sending an Image from Java endpoint using Websockets

Question

I'm trying to create a Websocket endpoint in Java EE 7 which receives as input a file name and returns the binary data of the image. Here's the Java side of the Websocket:

@ServerEndpoint(value = "/hellobinary")

public class HelloWorldBinaryEndpoint {

@OnMessage   
public void hello(String img, Session session) {

    File fi = new File("C:\\Users\\\images\\"+img);
    byte[] fileContent=null;
    try {
        fileContent = Files.readAllBytes(fi.toPath());
        ByteBuffer buf = ByteBuffer.wrap(fileContent);

        session.getBasicRemote().sendBinary(buf);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

} 

And this is the Javascript side of it:

        var wsUri = "ws://localhost:8080/websocket/hellobinary";

        function init() {
            output = document.getElementById("output");
        }
        function send_message() {
            websocket = new WebSocket(wsUri);
            websocket.onopen = function(evt) {
                onOpen(evt)
            };
            websocket.onmessage = function(evt) {
                onMessage(evt)
            };
            websocket.onerror = function(evt) {
                onError(evt)
            };
        }
        function onOpen(evt) {
            writeToScreen("Connected to Endpoint!");
            doSend(textID.value);
        }
        function onMessage(evt) {

            drawImageBinary(evt.data);
        }
        function onError(evt) {
            writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
        }
        function doSend(message) {
            writeToScreen("Message Sent: " + message);
            websocket.send(message);

        }
        function writeToScreen(message) {
            var pre = document.createElement("p");
            pre.style.wordWrap = "break-word";
            pre.innerHTML = message;

            output.appendChild(pre);
        }
        function drawImageBinary(blob) {
            var bytes = new Uint8Array(blob);
            alert('received '+ bytes.length);
            var imageData = context.createImageData(canvas.width, canvas.height);

            for (var i=8; i<imageData.data.length; i++) {
                imageData.data[i] = bytes[i];
            }
            context.putImageData(imageData, 0, 0);

            var img = document.createElement('img');
            img.height = canvas.height;
            img.width = canvas.width;
            img.src = canvas.toDataURL();
        }
        window.addEventListener("load", init, false);

Since the image is correctly read from the Java side (at least the number of count of bytes read is correct) I suppose the issue is on the JavaScript side.
I've added an alert to log the number of bytes read in drawImageBinary but "0" is printed and nothing is rendered on the screen. Is anybody able to find where is the culprit? Thanks!

Answer 1

You are missing on the client side:

websocket.binaryType = "arraybuffer";