1 Use in JavaScript {#flatbuffers_guide_use_javascript} 2 ================= 3 4 ## Before you get started 5 6 Before diving into the FlatBuffers usage in JavaScript, it should be noted that 7 the [Tutorial](@ref flatbuffers_guide_tutorial) page has a complete guide to 8 general FlatBuffers usage in all of the supported languages 9 (including JavaScript). This page is specifically designed to cover the nuances 10 of FlatBuffers usage in JavaScript. 11 12 You should also have read the [Building](@ref flatbuffers_guide_building) 13 documentation 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 19 The code for the FlatBuffers JavaScript library can be found at 20 `flatbuffers/js`. You can browse the library code on the [FlatBuffers 21 GitHub page](https://github.com/google/flatbuffers/tree/master/js). 22 23 ## Testing the FlatBuffers JavaScript library 24 25 The code to test the JavaScript library can be found at `flatbuffers/tests`. 26 The test code itself is located in [JavaScriptTest.js](https://github.com/ 27 google/flatbuffers/blob/master/tests/JavaScriptTest.js). 28 29 To run the tests, use the [JavaScriptTest.sh](https://github.com/google/ 30 flatbuffers/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 37 example of how to use FlatBuffers in JavaScript.* 38 39 FlatBuffers supports both reading and writing FlatBuffers in JavaScript. 40 41 To use FlatBuffers in your own code, first generate JavaScript classes from your 42 schema with the `--js` option to `flatc`. Then you can include both FlatBuffers 43 and the generated code to read or write a FlatBuffer. 44 45 For example, here is how you would read a FlatBuffer binary file in Javascript: 46 First, include the library and generated code. Then read the file into an 47 `Uint8Array`. Make a `flatbuffers.ByteBuffer` out of the `Uint8Array`, and pass 48 the ByteBuffer to the `getRootAsMonster` function. 49 50 *Note: Both JavaScript module loaders (e.g. Node.js) and browser-based 51 HTML/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 95 Now 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 104 There currently is no support for parsing text (Schema's and JSON) directly 105 from JavaScript. 106
