如何在浏览器中使用 flatbuffer 生成的数据？

Question

我正在尝试在我的一个 Web 应用程序中使用 flatbuffer。我已经使用以下 php 代码将这些缓冲区数据存储在一个文件 (buffer_content.txt) 中。

// ...Code to store to disk or send over a network goes here...
$file = 'buffer_content.txt';
$output = serialize($builder->dataBuffer());

$fp = fopen($file, "w");
fwrite($fp, $output);
fclose($fp);

通过 ajax 我可以从服务器获取缓冲区数据。现在我需要在 JavaScript 中从该缓冲区中提取原始数据。但是，我无法弄清楚如何做到这一点。

任何想法，如何做到这一点？

Answer 1

在参考Aardappel 答案后，我对代码进行了以下更改以解决此问题。

创建缓冲区文件

$file = 'buffer_content.bin';
$output = $builder->dataBuffer();

$fp = fopen($file, "wb");
fwrite($fp, $output);
fclose($fp);

从文件中获取缓冲区内容并返回给 ajax 调用的代码

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
// change these to whatever is appropriate in your code
$my_place = "/path/to/the/file/"; // directory of your file
$my_file = "item.bin"; // your file

//$my_path = $my_place.$my_file;
$my_path = $my_file;

header("Pragma: public");
header("Expires: 0");
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: pre-check=0, post-check=0, max-age=0', false);
header('Last-Modified: '.gmdate('D, d M Y H:i:s') . ' GMT');
$browser = $_SERVER['HTTP_USER_AGENT'];

if(preg_match('/MSIE 5.5/', $browser) || preg_match('/MSIE 6.0/', $browser))
{
  header('Pragma: private');
  // the c in control is lowercase, didnt work for me with uppercase
  header('Cache-control: private, must-revalidate');
  // MUST be a number for IE
  header("Content-Length: ".filesize($my_path));
  header('Content-Type: application/x-download');
  header('Content-Disposition: attachment; filename="'.$my_file.'"');
}
else
{
  header("Content-Length: ".(string)(filesize($my_path)));
  header('Content-Type: application/x-download');
  header('Content-Disposition: attachment; filename="'.$my_file.'"');
}

header('Content-Transfer-Encoding: binary');

if ($file = fopen($my_path, 'rb'))
{
    while(!feof($file) and (connection_status()==0))
    {
        print(fread($file, filesize($my_path)));
        flush();
    }
    fclose($file);
}
?>

在客户端解析二进制数据的代码

var xhr = new XMLHttpRequest();
xhr.open('GET', 'getBufferData.php', true);

xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
    // response is unsigned 8 bit integer
    var responseArray = new Uint8Array(this.response);

    var buf  = new flatbuffers.ByteBuffer(responseArray);
    var monster = MyGame.Sample.Monster.getRootAsMonster(buf);

    var hp = monster.hp();
    var pos = monster.pos();

    console.log("hp : "+hp);
    console.log("pos : "+pos);
};

xhr.send();

Answer 2

您不想使用serialize。 dataBuffer 已经包含序列化数据，请查看它在这里所说的内容： https://google.github.io/flatbuffers/flatbuffers_guide_tutorial.html

$buf = $builder->dataBuffer(); // 类型为Google\FlatBuffers\ByteBuffer

// 这个ByteBuffer中的数据不是从0开始，而是从buf->getPosition()开始。

//数据的末尾用buf->capacity()标记，所以大小为

// buf->capacity() - buf->getPosition().

确保以二进制模式写入文件（将"wb" 传递给fopen）。也不要称它为 .txt，因为它不是文本格式 :)

然后在 JS 中，您读取文件（同样，以二进制模式，而不是文本），确保它以 Uint8Array 结尾，然后按照此处的代码：https://google.github.io/flatbuffers/flatbuffers_guide_use_javascript.html