| <!-- HTML header for doxygen 1.8.6--> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/> |
| <meta http-equiv="X-UA-Compatible" content="IE=9"/> |
| <meta name="generator" content="Doxygen 1.9.1"/> |
| <title>FlatBuffers: Use in JavaScript</title> |
| <link href="tabs.css" rel="stylesheet" type="text/css"/> |
| <script type="text/javascript" src="jquery.js"></script> |
| <script type="text/javascript" src="dynsections.js"></script> |
| <link href="navtree.css" rel="stylesheet" type="text/css"/> |
| <script type="text/javascript" src="resize.js"></script> |
| <script type="text/javascript" src="navtreedata.js"></script> |
| <script type="text/javascript" src="navtree.js"></script> |
| <link href="search/search.css" rel="stylesheet" type="text/css"/> |
| <script type="text/javascript" src="search/searchdata.js"></script> |
| <script type="text/javascript" src="search/search.js"></script> |
| <link href="doxygen.css" rel="stylesheet" type="text/css" /> |
| <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700" rel="stylesheet"> |
| <link href="style.css" rel="stylesheet" type="text/css"/> |
| </head> |
| <body> |
| <div id="top"><!-- do not remove this div, it is closed by doxygen! --> |
| <div id="titlearea" style="height: 110px;"> |
| <table cellspacing="0" cellpadding="0"> |
| <tbody> |
| <tr style="height: 56px;"> |
| <td id="commonprojectlogo"> |
| <img alt="Logo" src="fpl_logo_small.png"/> |
| </td> |
| <td style="padding-left: 0.5em;"> |
| <div id="projectname">FlatBuffers |
| </div> |
| <div style="font-size:12px;"> |
| An open source project by <a href="https://developers.google.com/games/#Tools">FPL</a>. |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <!-- end header part --> |
| <!-- Generated by Doxygen 1.9.1 --> |
| <script type="text/javascript"> |
| /* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL-v2 */ |
| var searchBox = new SearchBox("searchBox", "search",false,'Search','.html'); |
| /* @license-end */ |
| </script> |
| <script type="text/javascript" src="menudata.js"></script> |
| <script type="text/javascript" src="menu.js"></script> |
| <script type="text/javascript"> |
| /* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL-v2 */ |
| $(function() { |
| initMenu('',true,false,'search.php','Search'); |
| $(document).ready(function() { init_search(); }); |
| }); |
| /* @license-end */</script> |
| <div id="main-nav"></div> |
| </div><!-- top --> |
| <div id="side-nav" class="ui-resizable side-nav-resizable"> |
| <div id="nav-tree"> |
| <div id="nav-tree-contents"> |
| <div id="nav-sync" class="sync"></div> |
| </div> |
| </div> |
| <div id="splitbar" style="-moz-user-select:none;" |
| class="ui-resizable-handle"> |
| </div> |
| </div> |
| <script type="text/javascript"> |
| /* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL-v2 */ |
| $(document).ready(function(){initNavTree('flatbuffers_guide_use_javascript.html',''); initResizable(); }); |
| /* @license-end */ |
| </script> |
| <div id="doc-content"> |
| <!-- window showing the filter options --> |
| <div id="MSearchSelectWindow" |
| onmouseover="return searchBox.OnSearchSelectShow()" |
| onmouseout="return searchBox.OnSearchSelectHide()" |
| onkeydown="return searchBox.OnSearchSelectKey(event)"> |
| </div> |
| |
| <!-- iframe showing the search results (closed by default) --> |
| <div id="MSearchResultsWindow"> |
| <iframe src="javascript:void(0)" frameborder="0" |
| name="MSearchResults" id="MSearchResults"> |
| </iframe> |
| </div> |
| |
| <div class="PageDoc"><div class="header"> |
| <div class="headertitle"> |
| <div class="title">Use in JavaScript </div> </div> |
| </div><!--header--> |
| <div class="contents"> |
| <div class="textblock"><p><a class="anchor" id="md_JavaScriptUsage"></a></p> |
| <h1><a class="anchor" id="autotoc_md102"></a> |
| Before you get started</h1> |
| <p>Before diving into the FlatBuffers usage in JavaScript, it should be noted that the <a class="el" href="flatbuffers_guide_tutorial.html">Tutorial</a> page has a complete guide to general FlatBuffers usage in all of the supported languages (including JavaScript). This page is specifically designed to cover the nuances of FlatBuffers usage in JavaScript.</p> |
| <p>You should also have read the <a class="el" href="flatbuffers_guide_building.html">Building</a> documentation to build <code>flatc</code> and should be familiar with <a class="el" href="flatbuffers_guide_using_schema_compiler.html">Using the schema compiler</a> and <a class="el" href="flatbuffers_guide_writing_schema.html">Writing a schema</a>.</p> |
| <h1><a class="anchor" id="autotoc_md103"></a> |
| FlatBuffers JavaScript library code location</h1> |
| <p>The generated code for the FlatBuffers JavaScript library can be found at <a href="https://www.npmjs.com/package/flatbuffers">https://www.npmjs.com/package/flatbuffers</a>. To use it from sources:</p> |
| <ol type="1"> |
| <li>Run <code>npm run compile</code> from the main folder to generate JS files from TS.</li> |
| </ol> |
| <ol type="1"> |
| <li>In your project, install it as a normal dependency, using the flatbuffers folder as the source.</li> |
| </ol> |
| <h1><a class="anchor" id="autotoc_md104"></a> |
| Using the FlatBuffers JavaScript libary</h1> |
| <p><em>Note: See <a class="el" href="flatbuffers_guide_tutorial.html">Tutorial</a> for a more in-depth example of how to use FlatBuffers.</em></p> |
| <p>Due to the complexity related with large amounts of JS flavors and module types, native JS support has been replaced in 2.0 by transpilation from TypeScript.</p> |
| <p>Please look at <a class="el" href="flatbuffers_guide_use_typescript.html">TypeScript usage</a> and transpile your sources to desired JS flavor. The minimal steps to get up and running with JS are:</p> |
| <ol type="1"> |
| <li>Generate TS files from <code>*.fbs</code> by using the <code>--ts</code> option.</li> |
| </ol> |
| <ol type="1"> |
| <li>Transpile resulting TS files to desired JS flavor using <code>tsc</code> (see <a href="https://www.typescriptlang.org/download">https://www.typescriptlang.org/download</a> for installation instructions).</li> |
| </ol> |
| <div class="fragment"><div class="line">// Note: These require functions are an example - use your desired module flavor.</div> |
| <div class="line">var fs = require('fs');</div> |
| <div class="line"> </div> |
| <div class="line">var flatbuffers = require('../flatbuffers').flatbuffers;</div> |
| <div class="line">var MyGame = require('./monster_generated').MyGame;</div> |
| <div class="line"> </div> |
| <div class="line">var data = new Uint8Array(fs.readFileSync('monster.dat'));</div> |
| <div class="line">var buf = new flatbuffers.ByteBuffer(data);</div> |
| <div class="line"> </div> |
| <div class="line">var monster = MyGame.Example.Monster.getRootAsMonster(buf);</div> |
| <div class="line"> </div> |
| <div class="line">//--------------------------------------------------------------------------//</div> |
| <div class="line"> </div> |
| <div class="line">// Note: This code is an example of browser-based HTML/JavaScript. See above</div> |
| <div class="line">// for the code using JavaScript module loaders (e.g. Node.js).</div> |
| <div class="line"><script src="../js/flatbuffers.js"></script></div> |
| <div class="line"><script src="monster_generated.js"></script></div> |
| <div class="line"><script></div> |
| <div class="line"> function readFile() {</div> |
| <div class="line"> var reader = new FileReader(); // This example uses the HTML5 FileReader.</div> |
| <div class="line"> var file = document.getElementById(</div> |
| <div class="line"> 'file_input').files[0]; // "monster.dat" from the HTML <input> field.</div> |
| <div class="line"> </div> |
| <div class="line"> reader.onload = function() { // Executes after the file is read.</div> |
| <div class="line"> var data = new Uint8Array(reader.result);</div> |
| <div class="line"> </div> |
| <div class="line"> var buf = new flatbuffers.ByteBuffer(data);</div> |
| <div class="line"> </div> |
| <div class="line"> var monster = MyGame.Example.Monster.getRootAsMonster(buf);</div> |
| <div class="line"> }</div> |
| <div class="line"> </div> |
| <div class="line"> reader.readAsArrayBuffer(file);</div> |
| <div class="line"> }</div> |
| <div class="line"></script></div> |
| <div class="line"> </div> |
| <div class="line">// Open the HTML file in a browser and select "monster.dat" from with the</div> |
| <div class="line">// <input> field.</div> |
| <div class="line"><input type="file" id="file_input" onchange="readFile();"></div> |
| </div><!-- fragment --><p>Now you can access values like this:</p> |
| <div class="fragment"><div class="line">var hp = monster.hp();</div> |
| <div class="line">var pos = monster.pos();</div> |
| </div><!-- fragment --><h1><a class="anchor" id="autotoc_md105"></a> |
| Text parsing FlatBuffers in JavaScript</h1> |
| <p>There currently is no support for parsing text (Schema's and JSON) directly from JavaScript. </p> |
| </div></div><!-- contents --> |
| </div><!-- PageDoc --> |
| </div><!-- doc-content --> |
| <!-- Google Analytics --> |
| <script> |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
| ga('create', 'UA-49880327-7', 'auto'); |
| ga('send', 'pageview'); |
| </script> |
| </body> |
| </html> |
