在浏览器中接收WebSocket ArrayBuffer数据 – 接收string

我有一个node.js服务器应用程序和一个浏览器客户端。 发送ArrayBuffer数据浏览器 – >服务器工作正常,但服务器 – >浏览器产生一个string"[object ArrayBuffer]"被接收。 这发生在Chrome和Firefox的最新版本中。

服务器:

 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); 

客户:

 <!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> 

我究竟做错了什么?

编辑:

来自node.js的websocket源码:

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

因此,如果使用Uint8Array ,它会将数据作为string发送,而不是使用sendBytes ,因为sendBytes需要一个Buffer对象。 正如在下面的答案,我需要sendBytes 。 由于我不能传递一个ArrayBuffer sendBytes ,我在服务器上这样做了:

 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); } } 

现在起作用了。

结论:

虽然Chrome和Firefox的websockets .send()一个Uint8Array缓冲区作为二进制数据,看来node.js websockets发送它作为string数据,你需要一个Buffer缓冲区发送二进制。

       

网上收集的解决方案 "在浏览器中接收WebSocket ArrayBuffer数据 – 接收string"

发送二进制数据使用sendBytes()方法。

我最近一直在玩websockets,至less这似乎工作:

 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); } 

基本上我只是创build一个基于event.data的新arrays