教程之一、第1部分：简单的PNaCl Web应用程序

原文链接：https://developer.chrome.com/native-client/devguide/tutorial/tutorial-part1

C ++教程：入门（第1部分）

概要

本教程介绍如何使用Portable Native Client（PNaCl）构建和运行Web应用程序。这是一个客户端应用程序，它使用HTML，JavaScript和用C ++编写的Native Client模块。PNaCl工具链用于直接从网页运行Native Client模块。

建议您在完成本教程之前阅读Native Client技术概述。

本教程中的应用程序的作用

本教程中的应用程序显示了如何在网页中加载Native Client模块，以及如何在JavaScript和Native Client模块之间发送消息。在这个简单的应用程序中，JavaScript将'hello'消息发送到Native Client模块。当Native Client模块收到消息时，它会检查消息是否等于字符串'hello'。如果是，则Native Client模块返回一条消息说明'hello from NaCl'。JavaScript警报面板显示从Native Client模块收到的消息。

JavaScript和Native Client模块之间的通信

Native Client编程模型支持JavaScript和Native Client模块之间的双向通信。双方都可以发起和回复消息。在所有情况下，通信都是异步的：调用者（JavaScript或Native Client模块）发送消息，但调用者不等待或甚至不期望响应。此行为类似于Web上的客户端/服务器通信，客户端将消息发送到服务器并立即返回。Native Client消息传递系统是Pepper API的一部分，在Developer's Guide：Messaging System中有详细描述 。它也类似于Web worker与JavaScript中的主文档交互的方式。

步骤1：下载并安装Native Client SDK

按照“ 下载”页面上的说明下载并安装Native Client SDK。

第2步：启动本地服务器

为了模拟生产环境，SDK提供了一个简单的Web服务器，可用于为应用程序提供服务localhost。调用方便的Makefile规则serve是调用它的最简单方法：

$ cd pepper_$(VERSION)/getting_started
$ make serve

SDK可能包含多个“捆绑”，每个Chrome/Pepper版本一个（请参阅 版本控制信息）。在上面的示例调用中， pepper_$(VERSION)指的是您要使用的特定版本。例如，pepper_37。如果您不知道所需的版本，请使用命令标记(stable)的版本naclsdk list。有关更多详细信息，请参阅 下载Native Client SDK。

如果未指定端口号，则服务器默认为端口5103，可以在以下位置访问http://localhost:5103。

任何服务器都可用于开发目的。随SDK提供的只是一个方便，而不是一个要求。

第3步：设置Chrome浏览器

默认情况下，Chrome中会启用PNaCl。我们建议您使用与用于构建Native Client模块的SDK包相同或更新的Chrome版本。较旧的PNaCl模块将始终与较新版本的Chrome一起使用，但反之亦然。

要查找Chrome版本，请输入about:chrome地址栏。

为了获得更好的开发体验，还建议您停用Chrome缓存。Chrome积极地缓存资源; 禁用缓存有助于确保在开发期间加载最新版本的Native Client模块。

• 点击菜单图标并选择，打开Chrome的开发者工具Tools > Developer tools。
• 点击Chrome窗口右下角的齿轮图标。
• 在“常规”设置下，选中“禁用缓存（DevTools打开时）”旁边的框。
• 在开发Native Client应用程序时，保持“开发人员工具”窗

第4步：本教程的存根代码

该教程的存根代码可在SDK中找到 pepper_$(VERSION)/getting_started/part1。它包含以下文件：

• index.html：包含页面的HTML布局以及与Native Client模块交互的JavaScript代码。

  Native Client模块包含在页面中，其中包含<embed>指向清单文件的标记。

• hello_tutorial.nmf：清单文件，用于将HTML指向Native Client模块，并可选择向作为Chrome浏览器一部分的PNaCl转换程序提供其他命令。
• hello_tutorial.cc：简单Native Client模块的C ++代码。
• Makefile：用于从C ++代码构建pexe（可移植可执行文件）的编译命令hello_tutorial.cc。

现在看一下这些文件是个好主意 - 它们包含大量有助于解释其结构和内容的注释。有关典型Native Client应用程序结构的更多详细信息，请参阅 应用程序结构。

存根码有意非常小。除正确初始化自身外，C ++代码不执行任何操作。JavaScript代码等待Native Client模块加载并相应地更改网页上的状态文本。

步骤5：编译Native Client模块并运行存根应用程序

要编译Native Client模块，请运行make：

$ cd pepper_$(VERSION)/getting_started/part1
$ make

由于样本位于SDK树中，因此Makefile知道如何自动查找PNaCl工具链并使用它来构建模块。如果要在NaCl SDK树之外构建应用程序，则应设置 $NACL_SDK_ROOT环境变量。有关详细信息，请参阅构建Native Client模块。

假设本地服务器是根据步骤2中的说明启动的 ，现在可以通过将Chrome指向来加载示例http://localhost:5103/part1。Chrome应成​​功加载Native Client模块，状态文本应从“LOADING ...”更改为“SUCCESS”。如果遇到问题，请查看下面的“ 疑难解答”部分。

步骤6：修改JavaScript代码以将消息发送到Native Client模块

在此步骤中，您将修改网页（index.html）以在页面加载模块后向Native Client模块发送消息。

查找JavaScript函数moduleDidLoad()，并添加新代码以向模块发送“hello”消息。新功能应如下所示：

function moduleDidLoad() {
  HelloTutorialModule = document.getElementById('hello_tutorial');
  updateStatus('SUCCESS');
  // Send a message to the Native Client module
  HelloTutorialModule.postMessage('hello');
}

步骤7：在Native Client模块中实现消息处理程序

在此步骤中，您将修改Native Client模块（hello_tutorial.cc）以响应从应用程序中的JavaScript代码接收的消息。具体来说，你将：

• 实现HandleMessage()模块实例的成员函数。
• 使用PostMessage()member函数将消息从模块发送到JavaScript代码。

首先，添加代码以定义Native Client模块使用的变量（您期望从JavaScript接收的'hello'字符串以及您希望作为响应返回到JavaScript的回复字符串）。在文件中 hello_tutorial.cc，在#include语句后面添加以下代码：

namespace {
// The expected string sent by the browser.
const char* const kHelloString = "hello";
// The string sent back to the browser upon receipt of a message
// containing "hello".
const char* const kReplyString = "hello from NaCl";
} // namespace

现在，实现HandleMessage()成员函数来检查 kHelloString并返回kReplyString.查找以下行：

// TODO(sdk_user): 1. Make this function handle the incoming message.

使用代码填充成员函数，如下所示：

virtual void HandleMessage(const pp::Var& var_message) {
  if (!var_message.is_string())
    return;
  std::string message = var_message.AsString();
  pp::Var var_reply;
  if (message == kHelloString) {
    var_reply = pp::Var(kReplyString);
    PostMessage(var_reply);
  }
}

有关pp :: Instance.HandleMessage 和pp :: Instance.PostMessage 成员函数的其他信息，请参阅Pepper API文档。

步骤8：编译Native Client模块并再次运行该应用程序

1. 通过make再次运行该命令来编译Native Client模块。

2. 通过运行启动SDK Web服务器make server。

3. 通过http://localhost:5103/part1在Chrome中重新加载来重新运行该应用程序。

   Chrome加载Native Client模块后，您应该会看到从模块发送的消息。

故障排除

如果您的应用程序未运行，请参阅上面的步骤3以验证您是否正确设置了环境，包括Chrome浏览器和本地服务器。确保您运行的是正确版本的Chrome，该版本也大于或等于您正在使用的SDK捆绑包版本。

另一个有用的调试工具是Chrome JavaScript控制台（可通过ToolsChrome中的 菜单获得）。检查它是否有关于出了什么问题的线索。例如，如果有消息说“NaCl模块崩溃”，则Native Client模块可能存在错误; 可能需要调试。

有关文档中的疑难解答的更多信息：

• FAQ故障排除。
• 该进度事件文件包含有关处理错误事件的一些有用的信息。

下一步

• 有关如何构建Native Client模块的信息，请参阅Developer's Guide中的Application Structure部分。
• 有关如何使用Pepper API的详细信息，请查看C ++参考。
• 浏览SDK示例的源代码（在examples 目录中）以了解编写Native Client应用程序和使用Pepper API的其他技术。
• 有关如何构建，运行和调试Native Client应用程序的信息，请参阅“ 构建，运行和调试”页面。
• 检查Webports项目以查看已移植的库以用于Native Client。如果您将开源库移植到自己使用的位置，我们建议将其添加到Webports（请参阅如何将代码检入Webports）。

CC-By 3.0许可下提供的内容