CODEWITHSUNDEEP
javascriptflatbuffers
Suresh
Suresh

Reputation: 5987

How to use flatbuffer generated data in browser?

I'm trying to use flatbuffer in one of my web application. I've already stored those buffer data in one file (buffer_content.txt) by using following php code. 

// ...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);

Through ajax I can get the buffer data from the server. Now I need to extract the original data from that buffer in JavaScript. But, I can't able to fig out how to do that.

Any idea, how to do this ?

Upvotes: 1

Views: 2721

Answers (2)

Suresh
Suresh

Reputation: 5987

After referring Aardappel answer I did following changes in my code to solve this problem.

Create buffer file

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

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

Code for getting buffer content from file & response back to ajax call

<?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);
}
?>

Code for Parsing binary data at client side

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

Upvotes: 4

Aardappel
Aardappel

Reputation: 6074

You don't want to use serialize. the dataBuffer already contains serialized data, check out what it says here: 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().

Make sure you write the file in binary mode (pass "wb" to fopen). Also don't call it .txt since it isn't a text format :)

Then in JS, you read in the file (again, in binary mode, not text), make sure it ends up in a Uint8Array, then follow the code here: https://google.github.io/flatbuffers/flatbuffers_guide_use_javascript.html

Upvotes: 1

Related Questions