在瀏覽器中接收WebSocket ArrayBuffer數據 - 接收字符串

我有一個node.js服務器應用程序和一個瀏覽器客戶端。發送ArrayBuffer數據瀏覽器 - >服務器完美工作，但服務器 - >瀏覽器導致接收字符串"[object ArrayBuffer]"。這發生在Chrome和Firefox的最新版本中。在瀏覽器中接收WebSocket ArrayBuffer數據 - 接收字符串

服務器：

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，它發送的數據作爲一個字符串，而不是使用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緩衝區來發送二進制。

來源

2013-02-23 svinja

鑑於ArrayBuffer不支持新的陣列在IE直到第10版（大多數人還沒有）之前，爲什麼不直接發送文本數據給客戶端並避開這個問題呢？ – 2013-02-23 11:45:23

我想盡可能使用最小字節數，因爲我將非常快速地向多個客戶端發送數據，並且我希望在服務器上保持10kB/s以上的上游總計，包括開銷。看起來像ArrayBuffer是完美的，我不在乎它是否會在IE中真正工作。我主要需要它在Chrome中工作。 – svinja 2013-02-23 11:53:06

看看這個：http://stackoverflow.com/a/11426037/4323 – 2013-02-23 11:55:55

發送二進制數據使用sendBytes()方法。

來源

2013-02-23 12:23:02

我不完全確定這爲什麼會有所作爲，但它似乎工作（只要OP願意使用節點緩衝區而不是UInt8Array）。 – 2013-02-23 12:36:28

我最近一直在玩和使用WebSockets至少這似乎工作：

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

基本上我只是創造基於event.data

來源

2013-11-19 06:52:55 Janne

在瀏覽器中接收WebSocket ArrayBuffer數據 - 接收字符串

回答

相關問題