Typescript如何使用ArrayBuffer做成数据JSON

Question

我正在通过 Websocket 从服务器接收 ArrayBuffer 数据，但无法将传入数据转换为其他形式。

这是 WebSocket 的代码：

let ws = new WebSocket('wss://api.example.com/websocket');
ws.binaryType = 'arraybuffer'

我正在使用以下方法打印传入数据：

ws.onmessage = (message) => {
  console.log(message.data);
};

结果看起来像这样：

ArrayBuffer(76) {
  [[Int8Array]], [[Int16Array]], [[Int32Array]], [[UInt8Array]]
}

我正在使用的 API 的文档说以下是我将看到的，这不是我目前看到的：

{
  "market": "United States",
  "current_price": 645.00000000,
  "highest_price": 887.00000000,
  ...
}

如何将传入的数据转换为 JSON 或可用于在我的 Web 应用程序上显示的任何形式？我已经尝试过 const data = JSON.parse(JSON.stringify(message.data)); 和这个 returns 空对象。

我已经被这个错误卡住了好几天了，有人能帮忙吗？

谢谢！

Answer 1

JSON.parse() 方法只能解析 JSON 字符串，不能解析 ArrayBuffer。为了使用 JSON 字符串，您必须使用 JSON.stringify() 并像这样对 message.data 进行字符串化：data = JSON.parse(JSON.stringify(message.data);

Answer 2

我找到了您需要的图书馆！
https://langzhai.github.io/json-bufferify/
我使用您的示例数据制作了一个片段。

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/gh/langzhai/json-bufferify/dist/json-bufferify.js"></script>
</head>

<body>
  <script>
    var encoded = bufferify.encode(0, {
      "market": "United States",
      "current_price": 645.00000000,
      "highest_price": 887.00000000,
    });
    console.log('Encoded: ' + encoded.buffer);
    var decoded = bufferify.decode(0, {
      "market": 'string',
      "current_price": 'number',
      "highest_price": 'number',
    }, encoded)
    console.log('Decoded: ' + JSON.stringify(decoded));
  </script>
</body>

</html>

Answer 3

我检查了你的代码。但是无法得到你的输出

我的服务器代码是：

const WebSocketServer = new require('ws');
let webSocketServer; 
const initServer = async() => {
    let port = 8091;
    webSocketServer = new WebSocketServer.Server({ port });
    webSocketServer.binaryType = 'arraybuffer';
    console.log(`Server start on port: ${port}`)
    webSocketServer.on('connection', function(ws) {
        ws.send(
            JSON.stringify({
                "market": "United States",
                "current_price": 645.00000000,
                "highest_price": 887.00000000,
            }),
        )
    });
}

initServer();

客户端代码为：

<script>
  const ws = new WebSocket("ws://localhost:8091");
  ws.binaryType = 'arraybuffer';
  ws.onmessage = function(message){ 
    console.log(JSON.parse(message.data));
  }
</script>

输出对象：

如果您从 json 文件中读取数据，请尝试此代码：

  const readData = (path) => {
    return new Promise((resolve, reject) => {
      fs.readFile(path, 'utf8', function(err, contents) {
        if (!err)  resolve(JSON.parse(contents))
        else reject(Error(`The fail "${path}" is not read`))
      });
    });  
  }

也试试这个功能：

const arrayBufferToString(buf) {
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}

Answer 4

所以问题出在我使用的 WebSocket 库上。

我正在使用 'ws' 库，它似乎无法识别通过 .binaryType 转换的数据。

一旦我删除了库并使用 Node.js 提供的原始 WebSocket，一切都很好。

感谢大家尝试帮助我。

Typescript如何使用ArrayBuffer做成数据JSON

Typescript how to use ArrayBuffer data made of JSON

buffer

websocket

node.js

arraybuffer

typescript