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> |
(...skipping 10 matching lines...) Expand all Loading... |
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><section id="overview"> | 25 </div><section id="overview"> |
26 <h2 id="overview">Overview</h2> | 26 <h2 id="overview">Overview</h2> |
27 <p>This tutorial shows how to build and run a web application using Portable Nat
ive | 27 <p>This tutorial shows how to build and run a web application using Portable Nat
ive |
28 Client (PNaCl). This is a client-side application that uses HTML, JavaScript and | 28 Client (PNaCl). This is a client-side application that uses HTML, JavaScript and |
29 a Native Client module written in C++. The PNaCl toolchain is used to enable | 29 a Native Client module written in C++. The PNaCl toolchain is used to enable |
30 running the Native Client module directly from a web page.</p> | 30 running the Native Client module directly from a web page.</p> |
31 <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> | 31 <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> |
32 <section id="what-the-application-in-this-tutorial-does"> | 32 <section id="what-the-application-in-this-tutorial-does"> |
33 <h3 id="what-the-application-in-this-tutorial-does">What the application in this
tutorial does</h3> | 33 <h3 id="what-the-application-in-this-tutorial-does">What the application in this
tutorial does</h3> |
34 <p>The application in this tutorial shows how to load a Native Client module in
a | 34 <p>The application in this tutorial shows how to load a Native Client module in
a |
35 web page, and how to send messages between JavaScript and the C++ code in the | 35 web page, and how to send messages between JavaScript and the Native Client |
36 Native Client module. In this simple application, the JavaScript code in the web | 36 module. In this simple application, the JavaScript sends a <code>'hello'</code>
message |
37 page sends a <code>'hello'</code> message to the Native Client module. When the
Native | 37 to the Native Client module. When the Native Client module receives a message, |
38 Client module receives a message, it checks whether the message is equal to the | 38 it checks whether the message is equal to the string <code>'hello'</code>. If it
is, the |
39 string <code>'hello'</code>. If it is, the Native Client module returns a messag
e saying | 39 Native Client module returns a message saying <code>'hello from NaCl'</code>. A |
40 <code>'hello from NaCl'</code>. A JavaScript alert panel displays the message re
ceived | 40 JavaScript alert panel displays the message received from the Native Client |
41 from the Native Client module.</p> | 41 module.</p> |
42 </section><section id="communication-between-javascript-and-native-client-module
s"> | 42 </section><section id="communication-between-javascript-and-native-client-module
s"> |
43 <h3 id="communication-between-javascript-and-native-client-modules">Communicatio
n between JavaScript and Native Client modules</h3> | 43 <h3 id="communication-between-javascript-and-native-client-modules">Communicatio
n between JavaScript and Native Client modules</h3> |
44 <p>The Native Client programming model supports bidirectional communication betw
een | 44 <p>The Native Client programming model supports bidirectional communication betw
een |
45 JavaScript and the Native Client module (C/C++ code). Both sides can initiate | 45 JavaScript and the Native Client module. Both sides can initiate |
46 and respond to messages. In all cases, the communication is asynchronous: The | 46 and respond to messages. In all cases, the communication is asynchronous: The |
47 caller (JavaScript or the Native Client module) sends a message, but the caller | 47 caller (JavaScript or the Native Client module) sends a message, but the caller |
48 does not wait for, or may not even expect, a response. This behavior is | 48 does not wait for, or may not even expect, a response. This behavior is |
49 analogous to client/server communication on the web, where the client posts a | 49 analogous to client/server communication on the web, where the client posts a |
50 message to the server and returns immediately. The Native Client messaging | 50 message to the server and returns immediately. The Native Client messaging |
51 system is part of the Pepper API, and is described in detail in | 51 system is part of the Pepper API, and is described in detail in |
52 <a class="reference internal" href="/native-client/devguide/coding/message-syste
m.html"><em>Developer’s Guide: Messaging System</em></a>. | 52 <a class="reference internal" href="/native-client/devguide/coding/message-syste
m.html"><em>Developer’s Guide: Messaging System</em></a>. |
53 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 | 53 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 |
54 JavaScript.</p> | 54 JavaScript.</p> |
55 </section></section><section id="step-1-download-and-install-the-native-client-s
dk"> | 55 </section></section><section id="step-1-download-and-install-the-native-client-s
dk"> |
56 <h2 id="step-1-download-and-install-the-native-client-sdk">Step 1: Download and
install the Native Client SDK</h2> | 56 <h2 id="step-1-download-and-install-the-native-client-sdk">Step 1: Download and
install the Native Client SDK</h2> |
57 <p>Follow the instructions on the <a class="reference internal" href="/native-cl
ient/sdk/download.html"><em>Download</em></a> page to | 57 <p>Follow the instructions on the <a class="reference internal" href="/native-cl
ient/sdk/download.html"><em>Download</em></a> page to |
58 download and install the Native Client SDK.</p> | 58 download and install the Native Client SDK.</p> |
59 </section><section id="step-2-start-a-local-server"> | 59 </section><section id="step-2-start-a-local-server"> |
60 <span id="tutorial-step-2"></span><h2 id="step-2-start-a-local-server"><span id=
"tutorial-step-2"></span>Step 2: Start a local server</h2> | 60 <span id="tutorial-step-2"></span><h2 id="step-2-start-a-local-server"><span id=
"tutorial-step-2"></span>Step 2: Start a local server</h2> |
61 <p>To simulate a production environment, the SDK provides a simple web server th
at | 61 <p>To simulate a production environment, the SDK provides a simple web server th
at |
62 can be used to serve the application on <code>localhost</code>. A convenience Ma
kefile | 62 can be used to serve the application on <code>localhost</code>. A convenience Ma
kefile |
63 rule called <code>serve</code> is the easiest way to invoke it:</p> | 63 rule called <code>serve</code> is the easiest way to invoke it:</p> |
64 <pre> | 64 <pre> |
65 $ cd pepper_$(VERSION)/getting_started | 65 $ cd pepper_$(VERSION)/getting_started |
66 $ make serve | 66 $ make serve |
67 </pre> | 67 </pre> |
68 <aside class="note"> | 68 <aside class="note"> |
69 The SDK may consist of several “bundles”, one per Chrome/Pepper vers
ion (see | 69 The SDK may consist of several “bundles”, one per Chrome/Pepper vers
ion (see |
70 <a class="reference internal" href="/native-client/version.html"><em>versioning
information</em></a>). In the sample invocation above | 70 <a class="reference internal" href="/native-client/version.html"><em>versioning
information</em></a>). In the sample invocation above |
71 <code>pepper_$(VERSION)</code> refers to the specific version you want to use. F
or | 71 <code>pepper_$(VERSION)</code> refers to the specific version you want to use. F
or |
72 example, <code>pepper_31</code>. If you don’t know which version you need,
use the | 72 example, <code>pepper_31</code>. If you don’t know which version you need,
use the |
73 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 | 73 one labeled <code>(stable)</code> by the <code>naclsdk list</code> command. See |
74 Client SDK</em></a> for more details. | 74 <a class="reference internal" href="/native-client/sdk/download.html"><em>Downlo
ad the Native Client SDK</em></a> for more details. |
75 </aside> | 75 </aside> |
76 <p>If no port number is specified, the server defaults to port 5103, and can be | 76 <p>If no port number is specified, the server defaults to port 5103, and can be |
77 accessed at <code>http://localhost:5103</code>.</p> | 77 accessed at <code>http://localhost:5103</code>.</p> |
78 <p>Any server can be used for the purpose of development. The one provided with
the | 78 <p>Any server can be used for the purpose of development. The one provided with
the |
79 SDK is just a convenience, not a requirement.</p> | 79 SDK is just a convenience, not a requirement.</p> |
80 </section><section id="step-3-set-up-the-chrome-browser"> | 80 </section><section id="step-3-set-up-the-chrome-browser"> |
81 <span id="tutorial-step-3"></span><h2 id="step-3-set-up-the-chrome-browser"><spa
n id="tutorial-step-3"></span>Step 3: Set up the Chrome browser</h2> | 81 <span id="tutorial-step-3"></span><h2 id="step-3-set-up-the-chrome-browser"><spa
n id="tutorial-step-3"></span>Step 3: Set up the Chrome browser</h2> |
82 <p>PNaCl is enabled by default in Chrome version 31 and later. Please make sure | 82 <p>PNaCl is enabled by default in Chrome version 31 and later. Please make sure |
83 that you have a suitable version to work through this tutorial. It’s also | 83 that you have a suitable version to work through this tutorial. It’s also |
84 important to use a Chrome version that’s the same or newer than the SDK bu
ndle | 84 important to use a Chrome version that’s the same or newer than the SDK bu
ndle |
(...skipping 135 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
220 <p>There’s more information about troubleshooting in the documentation:</p
> | 220 <p>There’s more information about troubleshooting in the documentation:</p
> |
221 <ul class="small-gap"> | 221 <ul class="small-gap"> |
222 <li><a class="reference internal" href="/native-client/faq.html#faq-troubleshoot
ing"><em>FAQ Troubleshooting</em></a>.</li> | 222 <li><a class="reference internal" href="/native-client/faq.html#faq-troubleshoot
ing"><em>FAQ Troubleshooting</em></a>.</li> |
223 <li>The <a class="reference internal" href="/native-client/devguide/coding/progr
ess-events.html"><em>Progress Events</em></a> document | 223 <li>The <a class="reference internal" href="/native-client/devguide/coding/progr
ess-events.html"><em>Progress Events</em></a> document |
224 contains some useful information about handling error events.</li> | 224 contains some useful information about handling error events.</li> |
225 </ul> | 225 </ul> |
226 </section><section id="next-steps"> | 226 </section><section id="next-steps"> |
227 <h2 id="next-steps">Next steps</h2> | 227 <h2 id="next-steps">Next steps</h2> |
228 <ul class="small-gap"> | 228 <ul class="small-gap"> |
229 <li>See the <a class="reference internal" href="/native-client/devguide/coding/a
pplication-structure.html"><em>Application Structure</em></a> | 229 <li>See the <a class="reference internal" href="/native-client/devguide/coding/a
pplication-structure.html"><em>Application Structure</em></a> |
230 chapter in the Developer’s Guide for information about how to structure a | 230 section in the Developer’s Guide for information about how to structure a |
231 Native Client module.</li> | 231 Native Client module.</li> |
232 <li>Check the <a class="reference external" href="/native-client/pepper_stable/c
pp">C++ Reference</a> for details | 232 <li>Check the <a class="reference external" href="/native-client/pepper_stable/c
pp">C++ Reference</a> for details |
233 about how to use the Pepper APIs.</li> | 233 about how to use the Pepper APIs.</li> |
234 <li>Browse through the source code of the SDK examples (in the <code>examples</c
ode> | 234 <li>Browse through the source code of the SDK examples (in the <code>examples</c
ode> |
235 directory) to learn additional techniques for writing Native Client | 235 directory) to learn additional techniques for writing Native Client |
236 applications and using the Pepper APIs.</li> | 236 applications and using the Pepper APIs.</li> |
237 <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 | 237 <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 |
238 debug Native Client applications.</li> | 238 debug Native Client applications.</li> |
239 <li>Check the <a class="reference external" href="http://code.google.com/p/naclp
orts/">naclports</a> project to see | 239 <li>Check the <a class="reference external" href="http://code.google.com/p/naclp
orts/">naclports</a> project to see |
240 what libraries have been ported for use with Native Client. If you port an | 240 what libraries have been ported for use with Native Client. If you port an |
241 open-source library for your own use, we recommend adding it to naclports | 241 open-source library for your own use, we recommend adding it to naclports |
242 (see <a class="reference external" href="http://code.google.com/p/naclports/wiki
/HowTo_Checkin">How to check code into naclports</a>).</li> | 242 (see <a class="reference external" href="http://code.google.com/p/naclports/wiki
/HowTo_Checkin">How to check code into naclports</a>).</li> |
243 </ul> | 243 </ul> |
244 </section></section> | 244 </section></section> |
245 | 245 |
246 {{/partials.standard_nacl_article}} | 246 {{/partials.standard_nacl_article}} |
OLD | NEW |