Question

73

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

rated 0 times [ 77] [ 4] / answers: 1 / hits: 22141 / 11 Years ago, fri, january 24, 2014, 12:00:00

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

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ammonjesseg

Add To Favorites

Follow

Total Points: 170

Total Questions: 110

Total Answers: 98

Location: Benin

Member since Fri, Mar 24, 2023

1 Year ago

answered 11 Years ago jocelynkarsynr · Accepted Answer

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);

    }

});