How to read BLOB data from a WebSocket which is not an image

Question

I created a WebSocket connection to my webserver to receive some data. However, when I log the event that I receive in the onmessage function, then I cannot see the real content of the data.

When I copy the network connection that my Chrome browser v32 opens as a curl command and run it on my OS console, then everything works fine. So I think that somehow my WebSocket setup must be wrong. The event.data object is an instance of Blob.

Here is my code (actually CoffeeScript, but easy to understand):

socket = new WebSocket "wss://myserverurl/some-endpoint"

socket.onopen = (event) ->
    console.log 'Connection opened (WebSocket)'

socket.onclose = (event) ->
    console.log 'Connection closed (WebSocket)'
    code = event.code
    reason = event.reason
    wasClean = event.wasClean

socket.onmessage = (event) ->
    console.log JSON.stringify event

The event that I get:

{
    "ports": [],
    "data": {
        "type": "",
        "size": 594
    },
    ...
    "cancelBubble": false,
    "returnValue": true,
    "srcElement": {
        "binaryType": "blob",
        "extensions": "",
        "protocol": "",
        "onerror": null,
        "bufferedAmount": 0,
        "readyState": 1
    },
    "defaultPrevented": false,
    "timeStamp": 1390578698613,
    "cancelable": false,
    "bubbles": false,
    "eventPhase": 2,
    "currentTarget": {
        "binaryType": "blob",
        "extensions": "",
        "protocol": "",
        "onerror": null,
        "bufferedAmount": 0,
        "readyState": 1
    },
    "target": {
        "binaryType": "blob",
        "extensions": "",
        "protocol": "",
        "onerror": null,
        "bufferedAmount": 0,
        "readyState": 1
    },
    "type": "message"
}

bb216b3acfd8f72cbc8f899d4d6963 · Accepted Answer · 2018-11-17 22:12:52Z

19

Ok, I found the solution! I have to read the data that comes as a Blob with a FileReader:

socket = new WebSocket 'wss://myserverurl/some-endpoint'
socket.binaryType = 'blob'

socket.onopen = (event) ->
    console.log 'Connection opened (WebSocket)'

socket.onclose = (event) ->
    console.log 'Connection closed (WebSocket)'
    code = event.code
    reason = event.reason
    wasClean = event.wasClean

socket.onmessage = (event) ->
    if event.data instanceof Blob
        reader = new FileReader()
        reader.onload = ->
            console.log reader.result
        reader.readAsText event.data

Alternatively, in ES2015:

// Create socket
socket = new WebSocket("wss://example.org/ws");
socket.binaryType = "blob";

// Log socket opening and closing
socket.addEventListener("open", event => {
    console.log("Websocket connection opened");
});
socket.addEventListener("close", event => {
    console.log("Websocket connection closed");
});

// Handle the message
socket.addEventListener("message", event => {
    if (event.data instanceof Blob) {
        reader = new FileReader();

        reader.onload = () => {
            console.log("Result: " + reader.result);
        };

        reader.readAsText(event.data);
    } else {
        console.log("Result: " + event.data);
    }
});

edited Nov 17, 2018 at 22:12

bb216b3acfd8f72cbc8f899d4d6963

77111 silver badges21 bronze badges

answered Jan 24, 2014 at 17:28

Benny Neugebauer

55.4k31 gold badges250 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ArashMad Over a year ago

Why do I receive something like �� .(�ǣ��.8��Z@M`�D�� when I try to get reader.result?

Tamas Hegedus · Accepted Answer · 2021-02-17 00:23:09Z

11

You can set tye binaryType of the WebSocket in JavaScript like:

var socket = new WebSocket(url);
socket.binaryType = "arraybuffer";

Or respectively in CoffeeScript

socket = new WebSocket url
socket.binaryType = "arraybuffer"

And you will get ArrayBuffers instead of Blobs. Convert them to Uint8Array by new Uint8Array(event.data);

answered Feb 17, 2021 at 0:23

Tamas Hegedus

30.1k12 gold badges67 silver badges102 bronze badges

Comments

starriet 차주녕 · Accepted Answer · 2022-02-07 14:34:38Z

3

you can also use Blob.text().

socket.addEventListener("message", event => {
    // event.data is Blob
    event.data.text().then(txt=>console.log(txt))   
});

answered Feb 7, 2022 at 14:34

starriet 차주녕

4,23634 silver badges33 bronze badges

Comments

halfer · Accepted Answer · 2021-08-29 18:35:14Z

-1

Basically the best answer I can tell that it's preferred thing to only send string messages in websocket.

So the solution is when sending messages I will highly recommend you to use:

JSON.stringify(data)

So, what it does is converting the arrays or objects or any type of data into string

So when you get the data or the message you should converting them back into what status it was on that would be so easy by doing this:

JSON.parse(msg)

edited Aug 29, 2021 at 18:35

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Aug 27, 2021 at 19:53

ammar khaled

395 bronze badges

1 Comment

Rocco Fortuna Over a year ago

Tried it, didn't work. Corrupted 37 into [50, 55] somehow?

Collectives™ on Stack Overflow

How to read BLOB data from a WebSocket which is not an image

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related