Geek Answers Handbook

Retrieving WebSocket ArrayBuffer data in a browser - receiving line instead

I have a node.js server application and a browser client. Sending the ArrayBuffer browser ArrayBuffer the server is working fine, but the server -> browser - will get the string "[object ArrayBuffer]" . This happens in recent versions of 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);

Customer:

 <!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 web layout 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 Uint8Array , it sends the data as a string instead of using sendBytes , since sendBytes needs a Buffer object. As in the answer below, I need sendBytes . Since I cannot pass 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.

Output:

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

+6
source share
2 answers

send sendBytes() method for using binary data.

+4
source

I recently played with websockets and at least this works:

 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 just create a new array based on event.data p>

+5
source

More articles:


All Articles