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

How to use flatbuffer generated data in browser?

我正在尝试在我的一个 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 中的缓冲区中提取原始数据。但是,我不知道该怎么做。

知道怎么做了吗?

您不想使用 serialize。 dataBuffer 已经包含序列化数据,请查看此处的内容: https://google.github.io/flatbuffers/flatbuffers_guide_tutorial.html

$buf = $builder->dataBuffer(); // Of type Google\FlatBuffers\ByteBuffer

// The data in this ByteBuffer does NOT start at 0, but at buf->getPosition().

// The end of the data is marked by buf->capacity(), so the size is

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

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

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

参考 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();