0

Actually, I have the following problem in a WebSocket application, when I'm working with the dependency of JavaEE WebSocket API and I have the following component:

@ServerEndpoint("/echo")
public class Echo {

    @OnMessage
    public void onMessage(String message) {
        LOG.info("Message received: " + msg);
        String response = null;
        try {
            InputStream stream = getClass().getClassLoader().getResourceAsStream("image.jpg");
            byte[] bytes = Base64.encodeBase64(IOUtils.toByteArray(stream));
            response = String.format("data:image/jpg;base64,%s", new String(bytes));
        } catch (IOException e) {
            e.printStackTrace();
        }
        if (response != null) {
            byte[] bytes = response.getBytes();
            ByteBuffer byteBuffer = ByteBuffer.wrap(bytes, 0, bytes.length);
            this.session.getAsyncRemote().sendBinary(byteBuffer);
        } else {
            LOG.info("Not sent message!");
        }
    }
}

This endpoint receives a text plane message, and after to load an image that I have in the Classpath converting it into Base64and to finally respond a BinaryFrame with the image information.

I have a client code in HTML and Javascript, too.

var socket = new WebSocket('ws://localhost:8084/webdemo/echo');
socket.binaryType = "arrayBuffer";
socket.onopen = function (event) {
    console.log('WebSocket connected!');
};

socket.onmessage = function (event) {
    console.log('Message received', event.data);

};

function sendMessage() {
    console.log('Send message.');
    socket.send('This is a test message!');
}
sendMessage();

With this code I get the connection and send the following message "This is a test message!", this message is displayed on the server console. I show the BinaryFrame's data type and in the web browser's console displayed Blob.

Then, the question is: How to send a BinaryFrame response in the ArrayBuffer format?

I don't want get Blob format.

I'm sorry if I have a bad english :S I'm studying it

UPDATE

The echo class:

@ServerEndpoint("/echo")
public class Echo {

    @OnMessage
    public void onMessage(String message) {
        LOG.info("Message received: " + msg);
        try {
            InputStream stream = getClass().getClassLoader().getResourceAsStream("image.jpg");
            byte[] bytes = IOUtils.toByteArray(stream);
            ByteBuffer byteBuffer = ByteBuffer.wrap(bytes, 0, bytes.length);
            this.session.getAsyncRemote().sendBinary(byteBuffer);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

After the update, encode the binary frame in base 64 and show image in <img> tag.

  • I see that you encoded your image under Base64 format. Why don't you send it as a String? On JavaScript side, you just keep the string and use it as [Data URI](http://www.websiteoptimization.com/speed/tweak/inline-images/) which is now [supported in major browser](https://stackoverflow.com/a/1207373/4906586) – Al-un Jan 11 '18 at 13:47
  • Yes, that's what I did in the past, I sent the byte code from the server and in the client what I do is work with that byte code. – Gustavo Pacheco Jan 22 '18 at 15:50
  • I guess using the term "byte code" is ambiguous in this context: did you send the image under `Byte` or `Text` format? The content is the same but the client behaviour is not – Al-un Jan 22 '18 at 16:06
  • I did send the image under `Byte` format :) – Gustavo Pacheco Feb 02 '18 at 08:21
  • So I come back to my initial comment: "Why don't you send it in `String` format?" It's easier server-side (image -> Base64 conversion already done and later if you have encoder, it'll help) and client-side (no need to converter anything, use the Base-64 encoded image String as it is). – Al-un Feb 02 '18 at 08:35
  • I did an update to not send the image encoded in base 64, but the front-end did it and thus save shipping size. – Gustavo Pacheco Feb 03 '18 at 19:59
  • and to answer your question, I couldn't send the image in String format because the client didn't want that solution. – Gustavo Pacheco Feb 03 '18 at 20:01

0 Answers0