Socket.io Extra Placeholder Frame being sent

Question

The following code results in a mysterious third frame: 451-["clientMsg",{"_placeholder":true,"num":0}]

Cient

function sendMessage() {
    var bufArr = new ArrayBuffer(4);
    var bufView = new Uint8Array(bufArr);
    bufView[0]=6;
    bufView[1]=7;
    bufView[2]=8;
    bufView[3]=9;

    // send binary message to server
    socket.emit('serverMsg', bufArr);
}
sendMessage();

Server

socket.on('serverMsg', function (bufArr) {
    var ba = new ArrayBuffer(4);
    var bv = new Uint8Array(ba);
    bv[0]=10;
    bv[1]=11;
    bv[2]=12;
    bv[3]=13;

    var bufView = new Uint8Array(bufArr);
    console.log("Data: ", bufView[0], bufView[1], bufView[2], bufView[3]);

    // Send message back to client
    socket.emit("clientMsg", ba);
});

Client

socket.on('clientMsg', function (bufArr) {
    var bufView = new Uint8Array(bufArr);
    console.log("Data: ", bufView[0], bufView[1], bufView[2], bufView[3])
});

The above code is resulting in THREE frames I would expect only TWO frames, one from the client to the server and one from the server to the client. Can anyone explain what this third frame is, and how to get rid of it? See the blow screenshot:

Answer 1

Looking through socket.io's code, it looks like any time there is an object with binary data, it will replace that portion of the object with this placeholder event. It then sends the binary data in the order of the provided 'num' field, which it reconstructs on the client side.

Since you only have a single object you are sending out for the event 'clientMsg', it sends out the event with the placeholder object as the entire body, with a followup of the binary data.

See socket.io-parser's binary.js: https://github.com/socketio/socket.io-parser/blob/master/binary.js - specifically the _deconstructPacket and _reconstructPacket functions.

I unfortunately also realized the overhead of adding binary is pretty rough, and I can't find much documentation other than the code.