OLD | NEW |
1 {{+bindTo:partials.standard_nacl_article}} | 1 {{+bindTo:partials.standard_nacl_article}} |
2 | 2 |
3 <section id="c-tutorial-getting-started-part-1"> | 3 <section id="c-tutorial-getting-started-part-1"> |
4 <span id="tutorial"></span><h1 id="c-tutorial-getting-started-part-1"><span id="
tutorial"></span>C++ Tutorial: Getting Started (Part 1)</h1> | 4 <span id="tutorial"></span><h1 id="c-tutorial-getting-started-part-1"><span id="
tutorial"></span>C++ Tutorial: Getting Started (Part 1)</h1> |
5 <div class="contents local" id="contents" style="display: none"> | 5 <div class="contents local" id="contents" style="display: none"> |
6 <ul class="small-gap"> | 6 <ul class="small-gap"> |
7 <li><p class="first"><a class="reference internal" href="#overview" id="id1">Ove
rview</a></p> | 7 <li><p class="first"><a class="reference internal" href="#overview" id="id1">Ove
rview</a></p> |
8 <ul class="small-gap"> | 8 <ul class="small-gap"> |
9 <li><a class="reference internal" href="#what-the-application-in-this-tutorial-d
oes" id="id2">What the application in this tutorial does</a></li> | 9 <li><a class="reference internal" href="#what-the-application-in-this-tutorial-d
oes" id="id2">What the application in this tutorial does</a></li> |
10 <li><a class="reference internal" href="#communication-between-javascript-and-na
tive-client-modules" id="id3">Communication between JavaScript and Native Client
modules</a></li> | 10 <li><a class="reference internal" href="#communication-between-javascript-and-na
tive-client-modules" id="id3">Communication between JavaScript and Native Client
modules</a></li> |
11 </ul> | 11 </ul> |
12 </li> | 12 </li> |
13 <li><a class="reference internal" href="#step-1-download-and-install-the-native-
client-sdk" id="id4">Step 1: Download and install the Native Client SDK</a></li> | 13 <li><a class="reference internal" href="#step-1-download-and-install-the-native-
client-sdk" id="id4">Step 1: Download and install the Native Client SDK</a></li> |
14 <li><a class="reference internal" href="#step-2-start-a-local-server" id="id5">S
tep 2: Start a local server</a></li> | 14 <li><a class="reference internal" href="#step-2-start-a-local-server" id="id5">S
tep 2: Start a local server</a></li> |
15 <li><a class="reference internal" href="#step-3-set-up-the-chrome-browser" id="i
d6">Step 3: Set up the Chrome browser</a></li> | 15 <li><a class="reference internal" href="#step-3-set-up-the-chrome-browser" id="i
d6">Step 3: Set up the Chrome browser</a></li> |
16 <li><a class="reference internal" href="#step-4-stub-code-for-the-tutorial" id="
id7">Step 4: Stub code for the tutorial</a></li> | 16 <li><a class="reference internal" href="#step-4-stub-code-for-the-tutorial" id="
id7">Step 4: Stub code for the tutorial</a></li> |
17 <li><a class="reference internal" href="#step-5-compile-the-native-client-module
-and-run-the-stub-application" id="id8">Step 5: Compile the Native Client module
and run the stub application</a></li> | 17 <li><a class="reference internal" href="#step-5-compile-the-native-client-module
-and-run-the-stub-application" id="id8">Step 5: Compile the Native Client module
and run the stub application</a></li> |
18 <li><a class="reference internal" href="#step-6-modify-the-javascript-code-to-se
nd-a-message-to-the-native-client-module" id="id9">Step 6: Modify the JavaScript
code to send a message to the Native Client module</a></li> | 18 <li><a class="reference internal" href="#step-6-modify-the-javascript-code-to-se
nd-a-message-to-the-native-client-module" id="id9">Step 6: Modify the JavaScript
code to send a message to the Native Client module</a></li> |
19 <li><a class="reference internal" href="#step-7-implement-a-message-handler-in-t
he-native-client-module" id="id10">Step 7: Implement a message handler in the Na
tive Client module</a></li> | 19 <li><a class="reference internal" href="#step-7-implement-a-message-handler-in-t
he-native-client-module" id="id10">Step 7: Implement a message handler in the Na
tive Client module</a></li> |
20 <li><a class="reference internal" href="#step-8-compile-the-native-client-module
-and-run-the-application-again" id="id11">Step 8: Compile the Native Client modu
le and run the application again</a></li> | 20 <li><a class="reference internal" href="#step-8-compile-the-native-client-module
-and-run-the-application-again" id="id11">Step 8: Compile the Native Client modu
le and run the application again</a></li> |
21 <li><a class="reference internal" href="#troubleshooting" id="id12">Troubleshoot
ing</a></li> | 21 <li><a class="reference internal" href="#troubleshooting" id="id12">Troubleshoot
ing</a></li> |
22 <li><a class="reference internal" href="#next-steps" id="id13">Next steps</a></l
i> | 22 <li><a class="reference internal" href="#next-steps" id="id13">Next steps</a></l
i> |
23 </ul> | 23 </ul> |
24 | 24 |
25 </div><h2 id="overview">Overview</h2> | 25 </div><h2 id="overview">Overview</h2> |
26 <p>This tutorial shows how to build and run a web application using Portable Nat
ive | 26 <p>This tutorial shows how to build and run a web application using Portable Nat
ive |
27 Client (PNaCl). This is a client-side application that uses HTML, JavaScript and | 27 Client (PNaCl). This is a client-side application that uses HTML, JavaScript and |
28 a Native Client module written in C++. The PNaCl toolchain is used to enable | 28 a Native Client module written in C++. The PNaCl toolchain is used to enable |
29 running the Native Client module directly from a web page.</p> | 29 running the Native Client module directly from a web page.</p> |
30 <p>It’s recommended to read the <a class="reference internal" href="/nativ
e-client/overview.html"><em>Native Client Technical Overview</em></a> prior to g
oing through this tutorial.</p> | 30 <p>It’s recommended that you read the <a class="reference internal" href="
/native-client/overview.html"><em>Native Client Technical Overview</em></a> prio
r to going through this tutorial.</p> |
31 <h3 id="what-the-application-in-this-tutorial-does">What the application in this
tutorial does</h3> | 31 <h3 id="what-the-application-in-this-tutorial-does">What the application in this
tutorial does</h3> |
32 <p>The application in this tutorial shows how to load a Native Client module in
a | 32 <p>The application in this tutorial shows how to load a Native Client module in
a |
33 web page, and how to send messages between JavaScript and the C++ code in the | 33 web page, and how to send messages between JavaScript and the Native Client |
34 Native Client module. In this simple application, the JavaScript code in the web | 34 module. In this simple application, the JavaScript sends a <code>'hello'</code>
message |
35 page sends a <code>'hello'</code> message to the Native Client module. When the
Native | 35 to the Native Client module. When the Native Client module receives a message, |
36 Client module receives a message, it checks whether the message is equal to the | 36 it checks whether the message is equal to the string <code>'hello'</code>. If it
is, the |
37 string <code>'hello'</code>. If it is, the Native Client module returns a messag
e saying | 37 Native Client module returns a message saying <code>'hello from NaCl'</code>. A |
38 <code>'hello from NaCl'</code>. A JavaScript alert panel displays the message re
ceived | 38 JavaScript alert panel displays the message received from the Native Client |
39 from the Native Client module.</p> | 39 module.</p> |
40 <h3 id="communication-between-javascript-and-native-client-modules">Communicatio
n between JavaScript and Native Client modules</h3> | 40 <h3 id="communication-between-javascript-and-native-client-modules">Communicatio
n between JavaScript and Native Client modules</h3> |
41 <p>The Native Client programming model supports bidirectional communication betw
een | 41 <p>The Native Client programming model supports bidirectional communication betw
een |
42 JavaScript and the Native Client module (C/C++ code). Both sides can initiate | 42 JavaScript and the Native Client module. Both sides can initiate |
43 and respond to messages. In all cases, the communication is asynchronous: The | 43 and respond to messages. In all cases, the communication is asynchronous: The |
44 caller (JavaScript or the Native Client module) sends a message, but the caller | 44 caller (JavaScript or the Native Client module) sends a message, but the caller |
45 does not wait for, or may not even expect, a response. This behavior is | 45 does not wait for, or may not even expect, a response. This behavior is |
46 analogous to client/server communication on the web, where the client posts a | 46 analogous to client/server communication on the web, where the client posts a |
47 message to the server and returns immediately. The Native Client messaging | 47 message to the server and returns immediately. The Native Client messaging |
48 system is part of the Pepper API, and is described in detail in | 48 system is part of the Pepper API, and is described in detail in |
49 <a class="reference internal" href="/native-client/devguide/coding/message-syste
m.html"><em>Developer’s Guide: Messaging System</em></a>. | 49 <a class="reference internal" href="/native-client/devguide/coding/message-syste
m.html"><em>Developer’s Guide: Messaging System</em></a>. |
50 It is also similar to the way <a class="reference external" href="http://en.wiki
pedia.org/wiki/Web_worker">web workers</a> interact with the main document in | 50 It is also similar to the way <a class="reference external" href="http://en.wiki
pedia.org/wiki/Web_worker">web workers</a> interact with the main document in |
51 JavaScript.</p> | 51 JavaScript.</p> |
52 <h2 id="step-1-download-and-install-the-native-client-sdk">Step 1: Download and
install the Native Client SDK</h2> | 52 <h2 id="step-1-download-and-install-the-native-client-sdk">Step 1: Download and
install the Native Client SDK</h2> |
53 <p>Follow the instructions on the <a class="reference internal" href="/native-cl
ient/sdk/download.html"><em>Download</em></a> page to | 53 <p>Follow the instructions on the <a class="reference internal" href="/native-cl
ient/sdk/download.html"><em>Download</em></a> page to |
54 download and install the Native Client SDK.</p> | 54 download and install the Native Client SDK.</p> |
55 <h2 id="step-2-start-a-local-server"><span id="tutorial-step-2"></span>Step 2: S
tart a local server</h2> | 55 <h2 id="step-2-start-a-local-server"><span id="tutorial-step-2"></span>Step 2: S
tart a local server</h2> |
56 <p>To simulate a production environment, the SDK provides a simple web server th
at | 56 <p>To simulate a production environment, the SDK provides a simple web server th
at |
57 can be used to serve the application on <code>localhost</code>. A convenience Ma
kefile | 57 can be used to serve the application on <code>localhost</code>. A convenience Ma
kefile |
58 rule called <code>serve</code> is the easiest way to invoke it:</p> | 58 rule called <code>serve</code> is the easiest way to invoke it:</p> |
59 <pre> | 59 <pre> |
60 $ cd pepper_$(VERSION)/getting_started | 60 $ cd pepper_$(VERSION)/getting_started |
61 $ make serve | 61 $ make serve |
62 </pre> | 62 </pre> |
63 <aside class="note"> | 63 <aside class="note"> |
64 The SDK may consist of several “bundles”, one per Chrome/Pepper vers
ion (see | 64 The SDK may consist of several “bundles”, one per Chrome/Pepper vers
ion (see |
65 <a class="reference internal" href="/native-client/version.html"><em>versioning
information</em></a>). In the sample invocation above | 65 <a class="reference internal" href="/native-client/version.html"><em>versioning
information</em></a>). In the sample invocation above |
66 <code>pepper_$(VERSION)</code> refers to the specific version you want to use. F
or | 66 <code>pepper_$(VERSION)</code> refers to the specific version you want to use. F
or |
67 example, <code>pepper_31</code>. If you don’t know which version you need,
use the | 67 example, <code>pepper_31</code>. If you don’t know which version you need,
use the |
68 one labeled <code>(stable)</code> by <code>naclsdk list</code>. See <a class="re
ference internal" href="/native-client/sdk/download.html"><em>Download the Nativ
e | 68 one labeled <code>(stable)</code> by the <code>naclsdk list</code> command. See |
69 Client SDK</em></a> for more details. | 69 <a class="reference internal" href="/native-client/sdk/download.html"><em>Downlo
ad the Native Client SDK</em></a> for more details. |
70 </aside> | 70 </aside> |
71 <p>If no port number is specified, the server defaults to port 5103, and can be | 71 <p>If no port number is specified, the server defaults to port 5103, and can be |
72 accessed at <code>http://localhost:5103</code>.</p> | 72 accessed at <code>http://localhost:5103</code>.</p> |
73 <p>Any server can be used for the purpose of development. The one provided with
the | 73 <p>Any server can be used for the purpose of development. The one provided with
the |
74 SDK is just a convenience, not a requirement.</p> | 74 SDK is just a convenience, not a requirement.</p> |
75 <h2 id="step-3-set-up-the-chrome-browser"><span id="tutorial-step-3"></span>Step
3: Set up the Chrome browser</h2> | 75 <h2 id="step-3-set-up-the-chrome-browser"><span id="tutorial-step-3"></span>Step
3: Set up the Chrome browser</h2> |
76 <p>PNaCl is enabled by default in Chrome version 31 and later. Please make sure | 76 <p>PNaCl is enabled by default in Chrome version 31 and later. Please make sure |
77 that you have a suitable version to work through this tutorial. It’s also | 77 that you have a suitable version to work through this tutorial. It’s also |
78 important to use a Chrome version that’s the same or newer than the SDK bu
ndle | 78 important to use a Chrome version that’s the same or newer than the SDK bu
ndle |
79 used to build the Native Client modules.</p> | 79 used to build the Native Client modules.</p> |
(...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
207 possibility that the Native Client module has a bug; <a class="reference interna
l" href="/native-client/devguide/devcycle/debugging.html"><em>debugging</em></a>
may be required.</p> | 207 possibility that the Native Client module has a bug; <a class="reference interna
l" href="/native-client/devguide/devcycle/debugging.html"><em>debugging</em></a>
may be required.</p> |
208 <p>There’s more information about troubleshooting in the documentation:</p
> | 208 <p>There’s more information about troubleshooting in the documentation:</p
> |
209 <ul class="small-gap"> | 209 <ul class="small-gap"> |
210 <li><a class="reference internal" href="/native-client/faq.html#faq-troubleshoot
ing"><em>FAQ Troubleshooting</em></a>.</li> | 210 <li><a class="reference internal" href="/native-client/faq.html#faq-troubleshoot
ing"><em>FAQ Troubleshooting</em></a>.</li> |
211 <li>The <a class="reference internal" href="/native-client/devguide/coding/progr
ess-events.html"><em>Progress Events</em></a> document | 211 <li>The <a class="reference internal" href="/native-client/devguide/coding/progr
ess-events.html"><em>Progress Events</em></a> document |
212 contains some useful information about handling error events.</li> | 212 contains some useful information about handling error events.</li> |
213 </ul> | 213 </ul> |
214 <h2 id="next-steps">Next steps</h2> | 214 <h2 id="next-steps">Next steps</h2> |
215 <ul class="small-gap"> | 215 <ul class="small-gap"> |
216 <li>See the <a class="reference internal" href="/native-client/devguide/coding/a
pplication-structure.html"><em>Application Structure</em></a> | 216 <li>See the <a class="reference internal" href="/native-client/devguide/coding/a
pplication-structure.html"><em>Application Structure</em></a> |
217 chapter in the Developer’s Guide for information about how to structure a | 217 section in the Developer’s Guide for information about how to structure a |
218 Native Client module.</li> | 218 Native Client module.</li> |
219 <li>Check the <a class="reference external" href="/native-client/pepper_stable/c
pp">C++ Reference</a> for details | 219 <li>Check the <a class="reference external" href="/native-client/pepper_stable/c
pp">C++ Reference</a> for details |
220 about how to use the Pepper APIs.</li> | 220 about how to use the Pepper APIs.</li> |
221 <li>Browse through the source code of the SDK examples (in the <code>examples</c
ode> | 221 <li>Browse through the source code of the SDK examples (in the <code>examples</c
ode> |
222 directory) to learn additional techniques for writing Native Client | 222 directory) to learn additional techniques for writing Native Client |
223 applications and using the Pepper APIs.</li> | 223 applications and using the Pepper APIs.</li> |
224 <li>See the <a class="reference internal" href="/native-client/devguide/devcycle
/building.html"><em>Building</em></a>, <a class="reference internal" href="/nati
ve-client/devguide/devcycle/running.html"><em>Running</em></a>, and <a class="re
ference internal" href="/native-client/devguide/devcycle/debugging.html"><em>Deb
ugging pages</em></a> for information about how to build, run, and | 224 <li>See the <a class="reference internal" href="/native-client/devguide/devcycle
/building.html"><em>Building</em></a>, <a class="reference internal" href="/nati
ve-client/devguide/devcycle/running.html"><em>Running</em></a>, and <a class="re
ference internal" href="/native-client/devguide/devcycle/debugging.html"><em>Deb
ugging pages</em></a> for information about how to build, run, and |
225 debug Native Client applications.</li> | 225 debug Native Client applications.</li> |
226 <li>Check the <a class="reference external" href="http://code.google.com/p/naclp
orts/">naclports</a> project to see | 226 <li>Check the <a class="reference external" href="http://code.google.com/p/naclp
orts/">naclports</a> project to see |
227 what libraries have been ported for use with Native Client. If you port an | 227 what libraries have been ported for use with Native Client. If you port an |
228 open-source library for your own use, we recommend adding it to naclports | 228 open-source library for your own use, we recommend adding it to naclports |
229 (see <a class="reference external" href="http://code.google.com/p/naclports/wiki
/HowTo_Checkin">How to check code into naclports</a>).</li> | 229 (see <a class="reference external" href="http://code.google.com/p/naclports/wiki
/HowTo_Checkin">How to check code into naclports</a>).</li> |
230 </ul> | 230 </ul> |
231 </section> | 231 </section> |
232 | 232 |
233 {{/partials.standard_nacl_article}} | 233 {{/partials.standard_nacl_article}} |
OLD | NEW |