| 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 |