Chrome native client-PNaCl 例子笔记 – Artificial Intelligence Swift Note

阅读顺序1-2-3

1. https://developer.chrome.com/native-client/overview

了解一些 overview

大部分情况下用 PNacl，Nacl运行在sandbox里，通过白名单的方式访问API，所以chrome不提供的API，你就不能做相应的事来保证安全性。

Chrome 提供一个验证器-Validator 来静态扫描code，

通过double sandbox 的设计来保证安全：

The Native Client module always executes in a process with restricted permissions. The only interaction
between this process and the outside world is through defined browser interfaces.
Because of the combination of the NaCl sandbox and the Chrome sandbox, we say that Native Client employs a double sandbox design.

PNaCL 是一种 bitcode，是和 OS 以及架构无关的，可以自由发布到web 或者嵌入到 web app里。

Chrome Browser 有一个解析器，PNaCL Translator。这个解释器的作用就是把 bitcode 翻译成 nexe。然后 nexe 会被chrome 的 Native Client sandbox 运行。

Nexe 是和架构（x86，ARM等）相关的，它必须来自 CWS。

Native Client 包含：html ，CSS， like below:

<embed name="mygame" src="mygame.nmf" type="application/x-pnacl" />

用 Embed tag 作为引入 native client。src就是 native client的 package的menifest，type 就是 MIME type。

NMF 文件就是一个列表，like：

{...
  ...
  "url": "mygame.pexe",
}

Pexe 用的是 pepper api，这个API 就是 JS，browser resources 和 native 的桥梁。下面的图很好的说明了这个关系。

你的native module只能通过 pepper API 来访问系统或者来访问chrome 提供的一些web的东西。目前主要有4类：

和JS交互，FILE IO，Playing audio，Render 3D。它是C的API，有c++ 的wrapper。

到这里，你应该基本知道NaCl，和PNaCL, and 他们的区别，并且对Chrome 如何embed NaCL和如何执行。如果不明白，还请再看一遍上面的URL。

2. 现在，我们来看一个例子，这个例子是PNaCl。

我们的目标就是这个，首先你应该知道了 native module 和 js 是可以双向通信的，并且都是异步的。

native 的message 系统属于 Pepper API的一部分，上门已经讲过了。在这里，如果你还是稀里糊涂，建议先看下：

https://developer.chrome.com/native-client/devguide/coding/message-system.html

和

http://en.wikipedia.org/wiki/Web_worker

基础是最重要的，可以多看几遍，如果想要记住的话，那就写下笔记，不要copy哦，一个一个的敲。

现在正是开始，先按照下面的步骤下载：

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//downloading 部分 begin

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

1). Restrict follow the steps from https://developer.chrome.com/native-client/sdk/download

You only need to update the stable version, my test is for pepper_37<stable>

Please make sure that you have installed python27 and add the Python to PATH setting.

Python30 is not support!.

Native Client is designed to be backward-compatible.For example, applications developed with the pepper_37 bundle can run in Chrome 37, Chrome 38, etc..

向前兼容的。37 的api 可以运行在37以及之后的Chrome 里

start downloading as below:

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//downloading 部分 end

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

下载好了，你的目录下应该有类似这样的：【我下载的是 pepper37 稳定版的】

然后进入到 getting_started 目录：

然后命令行输入：make serve

会启动一个本地的server，都是 python 写的，成功如下：

然后你可以在 chrome里打开：localhost:5103.

你也可以下载一个 Python的简单http server，或者用 xmapp来做。

接下来是设置 chrome browser，chrome在默认情况下是支持 PNaCl，如你是在 pepper37下开发的Pexe，那要确保你的chrome是37或者37以上的版本。

为了更好的开发，建议你disable chrome developer tools 的 cache，如下图：【page 模式下按F12 就可以进入 developer tools了】

3. now，现在开始看看例子的文件结构，其实上面已经说过了。

一般有一个html文件，一个nmf文件，一个c++ module，所以自然，我们要先编译c++ 的module，先来看看c++ module的code：

里面的代码非常简单，注释也很好，如果你没有什么经验，还是建议把注释好好看看。

part1 目录下已经有了一个pexe 的文件了，我们先备份一下，然后动手自己build 一个。

在命令行输入如下：

这个时候，你会发现有个新的.pexe 文件产生了，这个就是我们的native module。

然后再browser 里输入：http://localhost:5103/part1/

你会看到如下正确的信息：

然后我们来改一点code，首先先改那个html的文件里的JS code：

HelloTutorialModule.postMessage(‘hello’);

这个postMessage 是 Chrome 提供的Pepper API。

这个JS code 是往 native 发消息。我们接下来去改一改 native 的code：

然后把 HandleMessage 改成如下这样：

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);
  }
}

改好了，当然要重新build 一下 native module, 继续在命令行输入：make。成功之后，refresh http://localhost:5103/part1/

你会看到如下的：

这个alert 是JS 里弹出的，code在index.html 里，看注释你就明白了。

接下来，就是要去看看Pepper API，以及 naclports的项目，chrome 已经做了很多工作，把一些common的lib 都已经port 到Nacl，

所以你可以在你的项目里用它们，然后就是阅读PPP的header file，ppp.h, 它的设计和 NPAPI还是很像的，虽然 Google 淘汰了NPAPI，

但新的PPAPi还是参考了 NPAPI的设计。

很熟悉的 API 结构。和 NPAPI 如出一辙！！！！

Enjoy！

如果你跑这个例子没成功，表明你没有静下心来仔细看完。你可以再看一遍。仔细看完，并run这个例子，大概只需要完整的2小时不到。