gpt4 book ai didi

javascript - 在浏览器中接收 WebSocket ArrayBuffer 数据 - 而不是接收字符串

转载 作者:数据小太阳 更新时间:2023-10-29 05:10:35 25 4
gpt4 key购买 nike

我有一个 node.js 服务器应用程序和一个浏览器客户端。发送 ArrayBuffer 数据浏览器 -> 服务器工作正常,但服务器 -> 浏览器导致字符串 "[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,它会将数据作为字符串发送,而不是使用 sendBytes,因为 sendBytes 需要一个 缓冲区 对象。正如下面的答案,我需要 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 缓冲区来发送二进制文件。

最佳答案

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

关于javascript - 在浏览器中接收 WebSocket ArrayBuffer 数据 - 而不是接收字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15040126/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com