如何将javascript数组转换为二进制数据，并返回WebSocket？

Question

我想发送这个示例数组

[{
    id: 1,
    name: "test",
    position: [1234,850], //random position on the map
    points: 100 //example points
}];

作为二进制数据发送到我的websocket服务器。在服务器端，我希望将二进制数据解码回数组，进行更改并将二进制数据发送回客户端。最后在客户端，如何将二进制数据解码回数组？

示例截图我的意思是：

这是我的实际代码：

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

服务器端代码：

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

我现在可以将消息作为二进制帧发送到websocket服务器。我找到了将字符串转换为二进制类型并将其发送到ws-server的函数。

现在我有问题了。此功能（如下）在服务器端不工作。示例代码：

var data = {
    name: "value"
};

connection.send(JSON.stringify(data));

这段代码运行良好。现在，当我尝试发送作为数组缓冲区：

var data = {
    name: "value"
};

connection.send(StringToArrayBuffer(JSON.stringify(data)));

输出不是二进制帧，只是字符串“[object ArrayBuffer]”：

我也尝试过：

connection.send(JSON.stringify(data), {binary: true, mask: false});

但此发送消息为普通字符串，不是二进制帧。

那个么，如何将二进制帧从websocket服务器发送到客户端呢？当我发回收到的二进制消息时：

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        playerConnection[i].send(message.binaryData);
    }
}

只有这个管用。

Answer 1

试试看：

发送数据示例：

var data = [{
    id: 1,
    name: "test",
    position: [1234, 850], //random position on the map
    points: 100 //example points
}];

var data2 = new Uint16Array(data);
socket.send(data2);

在您的事件onMessage websocket中，请尝试：

function onMessage(event) {

    if (event.data instanceof window["ArrayBuffer"]){
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
    };

};

Answer 2

首先，浏览器对待二进制数据的方式不同于NodeJ。在浏览器中，二进制文件可以被视为Blob或ArrayBuffer，但在NodeJS中，它被视为Buffer不理解ArrayBuffer。我不会深入讨论这个问题，但您需要以不同的方式处理浏览器和节点之间的数据。

在浏览器端使用WebSocket时，数据以字符串或二进制形式传输，如果使用二进制，则必须指定BinaryType，在这种特殊情况下，我将使用ArrayBuffer。

至于字符串到缓冲区，我建议使用标准UTF-8，因为有两种编码UTF-16的方法。例如，UTF-16中的“\u0024”在UTF-16BE中存储为00 24，在UTF-16LE中存储为24 00。也就是说，如果要使用UTF-16，那么应该使用TextEncoder和TextDecoder。否则，您可以简单地执行此操作

strToAB = str =>
  new Uint8Array(str.split('')
    .map(c => c.charCodeAt(0))).buffer;

ABToStr = ab => 
  new Uint8Array(ab).reduce((p, c) =>
  p + String.fromCharCode(c), '');

console.log(ABToStr(strToAB('hello world!')));