File API - Blob to JSON

Question

I'm trying to do some experiment with HTML5, WebSocket and File API. I'm using the Tomcat7 WebSocket implementation. I'm able to send and received text messages from the servlet. What I want to do now is to send from the servlet to the client JSON objects, but I want to avoid text message in order to skip the JSON.parse (or similar) on the client, so I'm trying to send binary messages. The servlet part is really simple:

String s = "{arr : [1,2]}"; CharBuffer cbuf = CharBuffer.wrap(s);       CharsetEncoder encoder = Charset.forName("UTF-8").newEncoder();       getWsOutbound().writeBinaryMessage(encoder.encode(cbuf)); getWsOutbound().flush(); 

After this message, on the client I see that I received a binary frame, that is converted to a Blob object (http://www.w3.org/TR/FileAPI/#dfn-Blob). The question is: is it possible to get the JSON object from the Blob? I took a look at the FileReader interface (http://www.w3.org/TR/FileAPI/#FileReader-interface), and I used code like this to inspect what the FileReader can do (the first line creates a brand new Blob, so you can test on the fly if you want):

var b = new Blob([{"test": "toast"}], {type : "application/json"}); var fr = new FileReader(); fr.onload = function(evt) {     var res = evt.target.result;     console.log("onload",arguments, res, typeof res); }; fr.readAsArrayBuffer(b); 

using all the "readAs..." methods that I saw on the File Reader implementation (I'm using Chrome 22). Anyway I didn't find something useful.

Did you have any suggestion? Thanks.

Answer 1

You should have tried readAsText() instead of readAsArrayBuffer() (JSON is text in the end).

You've also missed to stringify the object (convert to JSON text)

var b = new Blob([JSON.stringify({"test": "toast"})], {type : "application/json"}),     fr = new FileReader();  fr.onload = function() {     console.log(JSON.parse(this.result)) };  fr.readAsText(b);