Repository navigation
Expand file tree
/
Copy pathflatbuffers_guide_use_javascript.html
More file actions
189 lines (187 loc) · 12.7 KB
/
Copy pathflatbuffers_guide_use_javascript.html
File metadata and controls
189 lines (187 loc) · 12.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!-- 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.8.7"/>
<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="navtree.js"></script>
<script type="text/javascript">
$(document).ready(initResizable);
$(window).load(resizeHeight);
</script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/search.js"></script>
<script type="text/javascript">
$(document).ready(function() { searchBox.OnSelectItem(0); });
</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.8.7 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "search",false,'Search');
</script>
<div id="navrow1" class="tabs">
<ul class="tablist">
<li><a href="index.html"><span>Main Page</span></a></li>
<li><a href="usergroup0.html"><span>Programmer's Guide</span></a></li>
<li><a href="flatbuffers_support.html"><span>Platform / Language / Feature support</span></a></li>
<li><a href="flatbuffers_benchmarks.html"><span>Benchmarks</span></a></li>
<li><a href="flatbuffers_white_paper.html"><span>FlatBuffers white paper</span></a></li>
<li><a href="flatbuffers_internals.html"><span>FlatBuffers internals</span></a></li>
<li><a href="flatbuffers_grammar.html"><span>Grammar of the schema langauge</span></a></li>
<li><a href="usergroup1.html"><span>API Reference</span></a></li>
<li><a href="contributing.html"><span>Contributing</span></a></li>
<li>
<div id="MSearchBox" class="MSearchBoxInactive">
<span class="left">
<img id="MSearchSelect" src="search/mag_sel.png"
onmouseover="return searchBox.OnSearchSelectShow()"
onmouseout="return searchBox.OnSearchSelectHide()"
alt=""/>
<input type="text" id="MSearchField" value="Search" accesskey="S"
onfocus="searchBox.OnSearchFieldFocus(true)"
onblur="searchBox.OnSearchFieldFocus(false)"
onkeyup="searchBox.OnSearchFieldChange(event)"/>
</span><span class="right">
<a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.png" alt=""/></a>
</span>
</div>
</li>
</ul>
</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">
$(document).ready(function(){initNavTree('flatbuffers_guide_use_javascript.html','');});
</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)">
<a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(0)"><span class="SelectionMark"> </span>All</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(1)"><span class="SelectionMark"> </span>Classes</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(2)"><span class="SelectionMark"> </span>Namespaces</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(3)"><span class="SelectionMark"> </span>Files</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(4)"><span class="SelectionMark"> </span>Functions</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(5)"><span class="SelectionMark"> </span>Variables</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(6)"><span class="SelectionMark"> </span>Properties</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(7)"><span class="SelectionMark"> </span>Groups</a><a class="SelectItem" href="javascript:void(0)" onclick="searchBox.OnSelectItem(8)"><span class="SelectionMark"> </span>Pages</a></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="header">
<div class="headertitle">
<div class="title">Use in JavaScript </div> </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><h2>Before you get started</h2>
<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>
<h2>FlatBuffers JavaScript library code location</h2>
<p>The code for the FlatBuffers JavaScript library can be found at <code>flatbuffers/js</code>. You can browse the library code on the <a href="https://github.com/google/flatbuffers/tree/master/js">FlatBuffers GitHub page</a>.</p>
<h2>Testing the FlatBuffers JavaScript library</h2>
<p>The code to test the JavaScript library can be found at <code>flatbuffers/tests</code>. The test code itself is located in <a href="https://github.com/
google/flatbuffers/blob/master/tests/JavaScriptTest.js">JavaScriptTest.js</a>.</p>
<p>To run the tests, use the <a href="https://github.com/google/
flatbuffers/blob/master/tests/JavaScriptTest.sh">JavaScriptTest.sh</a> shell script.</p>
<p><em>Note: The JavaScript test file requires <a href="https://nodejs.org/en/">Node.js</a>.</em></p>
<h2>Using the FlatBuffers JavaScript libary</h2>
<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 in JavaScript.</em></p>
<p>FlatBuffers supports both reading and writing FlatBuffers in JavaScript.</p>
<p>To use FlatBuffers in your own code, first generate JavaScript classes from your schema with the <code>--js</code> option to <code>flatc</code>. Then you can include both FlatBuffers and the generated code to read or write a FlatBuffer.</p>
<p>For example, here is how you would read a FlatBuffer binary file in Javascript: First, include the library and generated code. Then read the file into an <code>Uint8Array</code>. Make a <code>flatbuffers.ByteBuffer</code> out of the <code>Uint8Array</code>, and pass the ByteBuffer to the <code>getRootAsMonster</code> function.</p>
<p><em>Note: Both JavaScript module loaders (e.g. Node.js) and browser-based HTML/JavaScript code segments are shown below in the following snippet:</em></p>
<div class="fragment"><div class="line"><span class="comment">// Note: These require functions are specific to JavaScript module loaders</span></div>
<div class="line"><span class="comment">// (namely, Node.js). See below for a browser-based example.</span></div>
<div class="line">var fs = require(<span class="stringliteral">'fs'</span>);</div>
<div class="line"></div>
<div class="line">var flatbuffers = require(<span class="stringliteral">'../flatbuffers'</span>).flatbuffers;</div>
<div class="line">var MyGame = require(<span class="stringliteral">'./monster_generated'</span>).MyGame;</div>
<div class="line"></div>
<div class="line">var data = <span class="keyword">new</span> Uint8Array(fs.readFileSync(<span class="stringliteral">'monster.dat'</span>));</div>
<div class="line">var buf = <span class="keyword">new</span> 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"><span class="comment">//--------------------------------------------------------------------------//</span></div>
<div class="line"></div>
<div class="line"><span class="comment">// Note: This code is specific to browser-based HTML/JavaScript. See above</span></div>
<div class="line"><span class="comment">// for the code using JavaScript module loaders (e.g. Node.js).</span></div>
<div class="line"><script src=<span class="stringliteral">"../js/flatbuffers.js"</span>></script></div>
<div class="line"><script src=<span class="stringliteral">"monster_generated.js"</span>></script></div>
<div class="line"><script></div>
<div class="line"> <span class="keyword">function</span> readFile() {</div>
<div class="line"> var reader = <span class="keyword">new</span> FileReader(); <span class="comment">// This example uses the HTML5 FileReader.</span></div>
<div class="line"> var file = document.getElementById(</div>
<div class="line"> <span class="stringliteral">'file_input'</span>).files[0]; <span class="comment">// "monster.dat" from the HTML <input> field.</span></div>
<div class="line"></div>
<div class="line"> reader.onload = <span class="keyword">function</span>() { <span class="comment">// Executes after the file is read.</span></div>
<div class="line"> var data = <span class="keyword">new</span> Uint8Array(reader.result);</div>
<div class="line"></div>
<div class="line"> var buf = <span class="keyword">new</span> 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"><span class="comment">// Open the HTML file in a browser and select "monster.dat" from with the</span></div>
<div class="line"><span class="comment">// <input> field.</span></div>
<div class="line"><input type=<span class="stringliteral">"file"</span> <span class="keywordtype">id</span>=<span class="stringliteral">"file_input"</span> onchange=<span class="stringliteral">"readFile();"</span>></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 --><h2>Text parsing FlatBuffers in JavaScript</h2>
<p>There currently is no support for parsing text (Schema's and JSON) directly from JavaScript. </p>
</div></div><!-- contents -->
</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>