1Use in JavaScript {#flatbuffers_guide_use_javascript} 2================= 3 4## Before you get started 5 6Before diving into the FlatBuffers usage in JavaScript, it should be noted that 7the [Tutorial](@ref flatbuffers_guide_tutorial) page has a complete guide to 8general FlatBuffers usage in all of the supported languages 9(including JavaScript). This page is specifically designed to cover the nuances 10of FlatBuffers usage in JavaScript. 11 12You should also have read the [Building](@ref flatbuffers_guide_building) 13documentation to build `flatc` and should be familiar with 14[Using the schema compiler](@ref flatbuffers_guide_using_schema_compiler) and 15[Writing a schema](@ref flatbuffers_guide_writing_schema). 16 17## FlatBuffers JavaScript library code location 18 19The code for the FlatBuffers JavaScript library can be found at 20`flatbuffers/js`. You can browse the library code on the [FlatBuffers 21GitHub page](https://github.com/google/flatbuffers/tree/master/js). 22 23## Testing the FlatBuffers JavaScript library 24 25The code to test the JavaScript library can be found at `flatbuffers/tests`. 26The test code itself is located in [JavaScriptTest.js](https://github.com/ 27google/flatbuffers/blob/master/tests/JavaScriptTest.js). 28 29To run the tests, use the [JavaScriptTest.sh](https://github.com/google/ 30flatbuffers/blob/master/tests/JavaScriptTest.sh) shell script. 31 32*Note: The JavaScript test file requires [Node.js](https://nodejs.org/en/).* 33 34## Using the FlatBuffers JavaScript libary 35 36*Note: See [Tutorial](@ref flatbuffers_guide_tutorial) for a more in-depth 37example of how to use FlatBuffers in JavaScript.* 38 39FlatBuffers supports both reading and writing FlatBuffers in JavaScript. 40 41To use FlatBuffers in your own code, first generate JavaScript classes from your 42schema with the `--js` option to `flatc`. Then you can include both FlatBuffers 43and the generated code to read or write a FlatBuffer. 44 45For example, here is how you would read a FlatBuffer binary file in Javascript: 46First, include the library and generated code. Then read the file into an 47`Uint8Array`. Make a `flatbuffers.ByteBuffer` out of the `Uint8Array`, and pass 48the ByteBuffer to the `getRootAsMonster` function. 49 50*Note: Both JavaScript module loaders (e.g. Node.js) and browser-based 51HTML/JavaScript code segments are shown below in the following snippet:* 52 53~~~{.js} 54 // Note: These require functions are specific to JavaScript module loaders 55 // (namely, Node.js). See below for a browser-based example. 56 var fs = require('fs'); 57 58 var flatbuffers = require('../flatbuffers').flatbuffers; 59 var MyGame = require('./monster_generated').MyGame; 60 61 var data = new Uint8Array(fs.readFileSync('monster.dat')); 62 var buf = new flatbuffers.ByteBuffer(data); 63 64 var monster = MyGame.Example.Monster.getRootAsMonster(buf); 65 66 //--------------------------------------------------------------------------// 67 68 // Note: This code is specific to browser-based HTML/JavaScript. See above 69 // for the code using JavaScript module loaders (e.g. Node.js). 70 <script src="../js/flatbuffers.js"></script> 71 <script src="monster_generated.js"></script> 72 <script> 73 function readFile() { 74 var reader = new FileReader(); // This example uses the HTML5 FileReader. 75 var file = document.getElementById( 76 'file_input').files[0]; // "monster.dat" from the HTML <input> field. 77 78 reader.onload = function() { // Executes after the file is read. 79 var data = new Uint8Array(reader.result); 80 81 var buf = new flatbuffers.ByteBuffer(data); 82 83 var monster = MyGame.Example.Monster.getRootAsMonster(buf); 84 } 85 86 reader.readAsArrayBuffer(file); 87 } 88 </script> 89 90 // Open the HTML file in a browser and select "monster.dat" from with the 91 // <input> field. 92 <input type="file" id="file_input" onchange="readFile();"> 93~~~ 94 95Now you can access values like this: 96 97~~~{.js} 98 var hp = monster.hp(); 99 var pos = monster.pos(); 100~~~ 101 102## Text parsing FlatBuffers in JavaScript 103 104There currently is no support for parsing text (Schema's and JSON) directly 105from JavaScript. 106