I've found this great page that shows how to stream video.

His code assumes that the onmessage data is jpg like so

ws.onmessage = function (e) {
    $("#image").attr('src',  'data:image/jpg;base64,'+e.data);
}

but I'd like to have audio and other page data as well.

How can WebSockets be made to parse message types and binary types?

I've found this great page that shows how to stream video.

His code assumes that the onmessage data is jpg like so

ws.onmessage = function (e) {
    $("#image").attr('src',  'data:image/jpg;base64,'+e.data);
}

but I'd like to have audio and other page data as well.

How can WebSockets be made to parse message types and binary types?

• javascript
• parsing
• binary
• websocket
• message

• include message types in data and build your own protocol – fmgp Commented Oct 11, 2013 at 16:14
• @fmgp right, but if the binary's in base64 and the onmessage e.type is String, how can it be done? (I purposefully left out what I've investigated to prevent corrupting the answers) – user1382306 Commented Oct 11, 2013 at 16:16
• 1 base64 is string representation of binary, so you can wrap other metadata – fmgp Commented Oct 11, 2013 at 16:17
• @fmgp and it all es together now... thanks!!! – user1382306 Commented Oct 11, 2013 at 16:18

1 Answer 1

The data in Websocket messages can be either string (text messages) or binary data. In your case it's string data, where the string content is the base64 encoding of a binary image. In a better optimized program the image could be also transferred binary.

Depending on the message type, e.data will be of another type.

1. If the message is a text message then e.data will be of type string.
2. If the message is a binary message then e.data will contain either an ArrayBuffer or a Blob object. You can by yourself decide which representation of binary data you want to receive by setting the WebSocket.binaryType property (e.g. to "arraybuffer").

You can use instanceof to check if you received a binary or text message.

If you want to transfer different types of binary data you can use a header at the start of the message to tell the client what the message contains. E.g. declare the first byte of the binary data as header. If the first byte contains 1 then the remaining data is a picture, if the first byte contains 2 then the remaining data is a short audio sample, etc. However it's a little more difficult on both sides since you need to split or bine the binary data array.

Alternatively you could use multiple parallel websocket connections between client and server. On for video data, one for audio data, one for general messages, etc.