Receiving WebSocket ArrayBuffer data in the browser - receiving string instead

Question

I have a node.js server application and a browser client. Sending ArrayBuffer data browser -> server works perfectly, but server -> browser results in a string "[object ArrayBuffer]" being received. This happens in the latest versions of both Chrome and Firefox.

Server:

var serverPort = 9867;

// dependencies
var webSocketServer = require('websocket').server;
var http = require('http');
var players = {};
var nextPlayerId = 0;

// create http server
var server = http.createServer(function(request, response) { });
server.listen(serverPort, function() {
    console.log((new Date()) + " Server is listening on port " + serverPort);
});

// create websocket server
var wServer = new webSocketServer({ httpServer: server });
// connection request callback
wServer.on('request', function(request) {
    var connection = request.accept(null, request.origin); 
    connection.binaryType = "arraybuffer";
    var player = {};
    player.connection = connection;
    player.id = nextPlayerId;
    nextPlayerId++;
    players[player.id] = player;
    console.log((new Date()) + ' connect: ' + player.id);

    // message received callback
    connection.on('message', function(message) {
        if (message.type == 'binary' && 'binaryData' in message && message.binaryData instanceof Buffer) {
            // this works! 
            console.log('received:');
            console.log(message);   

        }
    });

    // connection closed callback
    connection.on('close', function(connection) {
        console.log((new Date()) + ' disconnect: ' + player.id);
        delete players[player.id];
    });
});

function loop() {
    var byteArray = new Uint8Array(2);
    byteArray[0] = 1;
    byteArray[0] = 2;
    for (var index in players) {
        var player = players[index];
        console.log('sending: ');
        console.log(byteArray.buffer);
        player.connection.send(byteArray.buffer);
    }
}

timerId = setInterval(loop, 500);

Client:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script type="text/javascript">

      window.WebSocket = window.WebSocket || window.MozWebSocket;
      var connection = new WebSocket('ws://127.0.0.1:9867');
      connection.binaryType = "arraybuffer";

      // most important part - incoming messages
      connection.onmessage = function (event) {
        document.getElementById("log").innerHTML += typeof(event.data) + ' ';
        document.getElementById("log").innerHTML += event.data + ' ';       
        if (event.data instanceof ArrayBuffer) {
          // string received instead of a buffer
        }
      };

      window.onkeydown = function(e) {
        var byteArray = new Uint8Array(2);
        byteArray[0] = 1;
        byteArray[1] = e.keyCode;
        connection.send(byteArray.buffer);
      };
    </script>

    <div id='log'>Log: </div>
  </body>
</html>

What am I doing wrong?

Edit:

From the node.js websocket source:

WebSocketConnection.prototype.send = function(data, cb) {
    if (Buffer.isBuffer(data)) {
        this.sendBytes(data, cb);
    }
    else if (typeof(data['toString']) === 'function') {
        this.sendUTF(data, cb);
    }

So if you use an Uint8Array, it sends the data as a string, instead of using sendBytes, as sendBytes needs a Buffer object. As in the answer below, I need sendBytes. As I can't pass an ArrayBuffer to sendBytes, I did this on the server:

function loop() {
    var buffer = new Buffer(2);
    buffer[0] = 1;
    buffer[1] = 2;
    for (var index in players) {
        var player = players[index];
        console.log('sending: ');
        console.log(buffer);
        player.connection.send(buffer);
    }
}

Now it works.

Conclusion:

While Chrome and Firefox websockets .send() a Uint8Array buffer as binary data, it seems node.js websockets send it as string data, and you need a Buffer buffer to send binary.

Given that ArrayBuffer is not support in IE until version 10 (which most people don't have yet), why not just send textual data to the client and sidestep this problem? — John Zwinck, Feb 23 '13 at 11:45
I want to use the minimum number of bytes possible as I will be sending data very quickly to multiple clients and I want to stay under 10 kB/s upstream total on the server including overhead. Seems like ArrayBuffer is perfect for that, I don't care whether it will ever work in IE honestly. I mainly need it to work in Chrome. — svinja, Feb 23 '13 at 11:53
Take a look at this: http://stackoverflow.com/a/11426037/4323 — John Zwinck, Feb 23 '13 at 11:55
Isn't that exactly what I'm doing in the code? I don't see the difference. — svinja, Feb 23 '13 at 12:03

score 5 · Accepted Answer · edited May 23 '16 at 07:31

5

send binary data use sendBytes() method.

edited May 23 '16 at 07:31

Mosh Feu

28,354
16
88
135

answered Feb 23 '13 at 12:23

Tanaka Kenji

397
2
9

I'm not exactly sure why this makes a difference, but it does seem to work (so long as the OP is willing to use a Node Buffer instead of a UInt8Array). – John Zwinck Feb 23 '13 at 12:36

score 5 · Answer 2 · edited Mar 17 '15 at 14:41

I've been playing with websockets recently and at least this seems to work:

if(event.data instanceof ArrayBuffer)
{
  var wordarray = new Uint16Array(event.data);
  for (var i = 0; i < wordarray.length; i++) 
  {
    console.log(wordarray[i]);
    wordarray[i]=wordarray[i]+1;
  }
  console.log("End of binary message");  
  console.log("sending changes");  
  ws.send(wordarray.buffer);
}

Basically I'm just creating a new array based on event.data

Receiving WebSocket ArrayBuffer data in the browser - receiving string instead

2 Answers2

Linked