[Libwebsockets] regarding getting binary data in javascript web client

Andy Green andy at warmcat.com
Tue Jul 12 12:42:20 CEST 2016


On Tue, 2016-07-12 at 10:38 +0100, Rob Agar wrote:
> Alternatively, encode the message before sending as a javascript-
> friendly JSON object (eg by using Jansson), then it's easy on the
> browser side:
> 
>   var message = JSON.parse(binaryMessage);

JSON is really handy with JS on the client side, and if the data being
passed suits that, it's the best way to go.  It actually becomes
restricted to a UTF-8 TEXT payload by definition then though, so no
need to use BINARY.

Sometimes what you need to pass really is just a chunk of binary
though.

> Rob
> 
> On 12/07/16 10:09, Remi de Gravelaine wrote:
> > Hi all,
> > 
> > To be a little bit more precise, you will also need to make some JS
> > 'casting' in your onMessage function.
> > For example, I use this code to retrieve GPS data send by a
> > libwebsocked-based server in binary form:
> > 
> > function setupWebSocket() {
> >     websocket = new WebSocket(wsUri, wsProto);
> >     websocket.binaryType = "arraybuffer";
> >     websocket.onerror = function(evt) { onError(evt) };
> >     websocket.onopen = function(evt) { onOpen(evt) };
> >     websocket.onclose = function(evt) { onClose(evt) };
> >     websocket.onmessage = function(evt) { onMessage(evt) };
> > }
> > 
> > /*
> > Process messages received from the WS Server.
> > They contain LOCINFO structures, in binary form:
> > -----------------------------------------------------------------
> > -----------
> > // Time structure. We actually use a Windows SYSTEMTIME equivalent.
> > typedef struct {
> >     unsigned short wYear;
> >     unsigned short wMonth;
> >     unsigned short wDayOfWeek;
> >     unsigned short wDay;
> >     unsigned short wHour;
> >     unsigned short wMinute;
> >     unsigned short wSecond;
> >     unsigned short wMilliseconds;
> > } LOCTIME;
> > 
> > // Location information.
> > typedef struct {
> >     unsigned char bLevel;    // 00: level of information available
> >     unsigned char bQuality;  // 01: GPS quality indicator
> >     unsigned char bNavMode;  // 02: Operating mode, used for
> > navigation (1 = Fix not available; 2 = 2D; 3 = 3D)
> >     unsigned char bRes;      // 03: reserved
> >     LOCTIME       utc;       // 04: UTC of position
> >     float         PDOP;      // 20: Position Dilution Of Precision
> >     .
> >     .
> >     .
> > } LOCINFO, *PLOCINFO;
> > */
> > function onMessage(evt) {
> >     var gd = {};                    // data structure built from
> > the binary message
> >     
> >     console.log("MESSAGE: " + evt.data.byteLength + " bytes");
> >     
> >     // Extract incoming LOCINFO fields into our gd object.
> >     // Every field in a LOCINFO uses little-endian convention.
> >     var dv = new DataView(evt.data);
> > 
> >     // Level of information, fix quality and mode.
> >     gd.level =   dv.getUint8(0);
> >     gd.quality = dv.getUint8(1);
> >     gd.navMode = dv.getUint8(2);
> >     
> >     // Date and time.
> >     gd.utc = {};                    // UTC of position
> >     gd.utc.year =         dv.getUint16( 4, true);
> >     gd.utc.month =        dv.getUint16( 6, true);
> >     gd.utc.dayOfWeek =    dv.getUint16( 8, true);
> >     gd.utc.day =          dv.getUint16(10, true);
> >     gd.utc.hour =         dv.getUint16(12, true);
> >     gd.utc.minute =       dv.getUint16(14, true);
> >     gd.utc.second =       dv.getUint16(16, true);
> >     gd.utc.milliseconds = dv.getUint16(18, true);
> > 
> >     // Precision.
> >     gd.pdop = dv.getFloat32(20, true);        // Position Dilution
> > Of Precision
> >     .
> >     .
> >     processGpsData(gd);
> > }
> > 
> > You have to be precise about the offset and the byte-sex of the
> > structure you receive but there is nothing really difficult here.
> > 
> > HTH
> > Remi
> >  
> > Le 11/07/2016 à 17:43, libwebsockets-request at ml.libwebsockets.org a
> > écrit :
> > > Hi Suman
> > > 
> > > If you want to access the actual bytes of binary messages in
> > > your 
> > > javascript, you need to tell it to convert the blob into an
> > > ArrayBuffer, 
> > > like so:
> > > 
> > >      var ws = new WebSocket("ws://....");
> > >      ws.binaryType = 'arraybuffer';
> > > 
> > > hth
> > > Rob
> > > 
> > > On 11/07/16 10:52, Suman.Patro-TRN wrote:
> > > > >
> > > > > Hello ,
> > > > >
> > > > >             I would like to use LWS_WRITE_BINARYin lws_write
> > > > in the 
> > > > > webserver and get data in the javascript client . I use
> > > > websockets 
> > > > > connection in the javascript client. When I tried the above
> > > > scenario, 
> > > > > I get [object blob] on the html page. Do I need to take some 
> > > > > additional efforts at the javascript client or is this the
> > > > javascript  
> > > > > issue? Is it true that javascript client does not understand
> > > > byte? if 
> > > > > javascript does not understand byte, then should
> > > > Xmlhttprequest is to 
> > > > > be used? but as per my knowledge xmlhttprequest is used with
> > > > long 
> > > > > polling technique and not websockets.Are my understanding on
> > > > this 
> > > > > topic correct?

Lws sending BINARY works fine... the message is received OK in the JS,
all your questions and problems are on the JS side about what to do in
JS with a valid binary ws message now you got it.

You don't need to do xmlhttprequest the fact your message arrived in
the JS means you already won that part of the battle.

If you don't want it to arrive as a logical blob, the key bit of the
puzzle is

   ws.binaryType = "arraybuffer";

as Rob mentioned.

-Andy

> > > > > Thanks and regards,
> > > > >
> > > > > Suman
> > > > >
> >  
> > 
> > 
> > _______________________________________________
> > Libwebsockets mailing list
> > Libwebsockets at ml.libwebsockets.org
> > http://libwebsockets.org/mailman/listinfo/libwebsockets
>  
> _______________________________________________
> Libwebsockets mailing list
> Libwebsockets at ml.libwebsockets.org
> http://libwebsockets.org/mailman/listinfo/libwebsockets



More information about the Libwebsockets mailing list