title: Receiving WebSocket ArrayBuffer data in the browser - receiving string instead
body: <p>I have a node.js server application and a browser client. Sending <code>ArrayBuffer</code> data browser -> server works perfectly, but server -> browser results in a string <code>"[object ArrayBuffer]"</code> being received. This happens in the latest versions of both Chrome and Firefox.</p>
  
  <p>Server:</p>
  
  <pre><code>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' &amp;&amp; 'binaryData' in message &amp;&amp; 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);   
  </code></pre>
  
  <p>Client:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script type="text/javascript"&gt;
  
        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);
        };
      &lt;/script&gt;
  
      &lt;div id='log'&gt;Log: &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>From the node.js websocket source:</p>
  
  <pre><code>WebSocketConnection.prototype.send = function(data, cb) {
      if (Buffer.isBuffer(data)) {
          this.sendBytes(data, cb);
      }
      else if (typeof(data['toString']) === 'function') {
          this.sendUTF(data, cb);
      }
  </code></pre>
  
  <p>So if you use an <code>Uint8Array</code>, it sends the data as a string, instead of using <code>sendBytes</code>, as <code>sendBytes</code> needs a <code>Buffer</code> object. As in the answer below, I need <code>sendBytes</code>. As I can't pass an <code>ArrayBuffer</code> to <code>sendBytes</code>, I did this on the server:</p>
  
  <pre><code>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);
      }
  }
  </code></pre>
  
  <p>Now it works.</p>
  
  <p><strong>Conclusion:</strong></p>
  
  <p>While Chrome and Firefox websockets <code>.send()</code> a <code>Uint8Array</code> buffer as binary data, it seems node.js websockets send it as <code>string</code> data, and you need a <code>Buffer</code> buffer to send binary.</p>