WebSocket JavaScript: Sending complex objects

Question

I am using WebSockets as the connection between a Node.js server and my client JS code.

I want to send a number of different media types (Text, Audio, Video, Images) through the socket. This is not difficult of course. message.data instanceof Blob separates text from media files. The problem is, that I want to include several additional attributes to those media files.

Fe:

• Dimension of an image
• Name of the image . . .

Now I could send one message containing these informations in text form and follow it up with another message containing the blob. I would very much prefer though, to be able to build an object:

imageObject = {

xDimension : '50px',

yDimension : '50px', 

name : 'PinkFlowers.jpg'

imageData : fs.readFileSync(".resources/images/PinkFlowers.jpg")

}

And send this object as it is via socket.send(imageObject) .

So far so good, this actually works, but how do I collect the object and make its fields accessible in the client again?

I have been tampering with it for a while now and I would be grateful for any ideas.

Best regards,

Sticks

Answer 1

Well I did get it to work using base64.

On the server side I am running this piece of code:

var imageObject = newMessageObject('img', 'flower.png');
imageObject.image = new Buffer(fs.readFileSync('./resources/images/flower.png'), 'binary').toString('base64');
imageObject.datatype = 'png';
connection.send(JSON.stringify(imageObject));

The new Buffer() is necessary to ensure a valid utf encoding. If used without, Chrome(dont know about Firefox and others) throws an error, that invalid utf8 encoding was detected and shuts down the execution after JSON.parse(message). Note: newMessageObject is just an object construction method with two fields, type and name which I use.

On the client side its really straight forward:

websocketConnection.onmessage = function(evt) {
   var message = JSON.parse(evt.data);
   ... // Some app specific stuff
   var image = new Image();
   image.onload = function() {
     canvas.getContext("2d").drawImage(image, 0, 0);
   }

   image.src = "data:image/" + message.datatype + ";base64," + message.image;

}

This draws the image on the canvas.

I am not convinced, that this is practicable for audio or video files, but for images it does the job. I will probably fall back to simply sending an obfuscated URL instead of audio/video data and read the files directly from the server. I dont like the security implications though.