ARChon 分析之三：Native Client

版权声明：转载请邮件联系我([email protected])，以取得授权，谢谢！ https://blog.csdn.net/yeshennet/article/details/83216907

从前两篇文章过来，假设你已经了解了下载使用ARChon、简单分析与Chrome插件介绍

这篇文章主要是分析ARChon如何实现跨平台。

源码：https://bitbucket.org/vladikoff/archon/src

Archon 如何实现跨平台？

拉代码下来会发现几乎没有文档，核心的代码都被编译成 so 库。官方提供了几篇文章。

• omgchrome.com ARChon article
• Lifehacker article
• Ars Technica article
• Google Operating System article

这几篇都是科普如何操作的文章，看完之后知道了 ARChon 基于 Native Client 做了跨平台。

Native Client: https://developer.chrome.com/native-client

看到 Native Client 在除了Chrome-OS 的其他平台被 WebAssembly 替代。也大改能猜出为啥 ARChon 没维护了呢。: - (

什么是 Native Client ？

看了采访视频 https://www.youtube.com/watch?v=MvKEomoiKBA ，发现Native Client的工作量却是是巨大的。但是他们做完了。 ；）

翻译自：
https://developer.chrome.com/native-client/overview

Native Client是一个沙箱，用于在浏览器中高效。安全地运行已编译的C和C ++代码，与用户的操作系统无关。Portable Native Client扩展了该技术的架构独立性。允许开发人员编译其代码一次，以便在任何网站和任何具有提前（AOT）转换的架构上运行。简而言之，Native Client将本机代码的性能和低级控制带到现代Web浏览器。而不会牺牲Web的安全性和可移植性

Native Client有两种版本。

扫描二维码关注公众号，回复： 3758071 查看本文章

• Portable Native Client（PNaCl）：发音为’pinnacle’，PNaCl运行单个便携式（pexe）可执行文件，并且在大多数Chrome实现中都可用。 Chrome内置的翻译器将pexe转换为客户端硬件的本机代码。在执行任何代码之前，而不是在执行代码时，将翻译整个模块。 PNaCl模块可以从任何Web服务器托管。

• Native Client（NaCl）：也称为传统或非Portable Native Client，NaCl运行依赖于架构的（nexe）模块，这些模块打包到应用程序中。在运行时，浏览器根据客户端的体系结构决定加载哪个nexe通过Chrome Web Store（CWS）安装的Apps和Extensions可以使用NaCl模块而无需其他提示。也可以在开发期间从chrome：//扩展或命令行安装NaCl应用程序，但是，这不是推荐的分发机制。

Native Client的工作原理

Native Client是一组相关软件组件的总称，用于开发 C/C++ 应用程序并在Web上安全地运行它们。 在较高级别，Native Client包括：

• Toolchains （工具链）
  将C / C ++代码转换为可移植Native Client模块或Native Client模块的开发工具（编译器，链接器等）的集合。
• Runtime components （运行时组件）
  嵌入在浏览器或其他主机平台中的组件，可以安全有效地执行Native Client模块。

如何编写 Native Client的程序？

以下是step by step的教程。有如下目的：

• 如何开始参与开发？
• 示范如何写 C++ 代码？；
• 如何用 Toolchains 编译输出？；
• C++如何在 Native Client Runtime 中执行（chrome浏览器）？；

翻译来自：
https://developer.chrome.com/native-client/devguide/tutorial/tutorial-part1

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

# wget https://storage.googleapis.com/nativeclient-mirror/nacl/nacl_sdk/nacl_sdk.zip
# 官方的镜像证书过期了，直接从github上拉也可以
git clone https://github.com/Kagami/nacl_sdk.git

cd nacl_sdk
./naclsdk list
./naclsdk update

update 可能需要翻墙

第2步：启动本地服务器

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

 cd pepper _ $（VERSION）/ getting_started
 make serve

SDK可能包含多个“捆绑”，每个Chrome / Pepper版本一个（请参阅版本控制信息 ）。 在上面的示例调用中， pepper_$(VERSION)指的是您要使用的特定版本。 例如， pepper_37 。 如果您不知道需要哪个版本，请使用naclsdk list命令标记(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 ：用于从hello_tutorial.cc中的C ++代码构建pexe （可移植可执行文件）的编译命令。
现在看一下这些文件是个好主意 - 它们包含大量有助于解释其结构和内容的注释。 有关典型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()成员函数将消息从模块发送到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. 查找以下行：

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模块并再次运行该应用程序

通过再次运行make命令编译Native Client模块。
通过运行make server启动SDK Web make server。
通过在Chrome中重新加载http://localhost:5103/part1重新运行该应用程序。
Chrome加载Native Client模块后，您应该会看到从模块发送的消息。

步骤9：查看完整文档

cd examples
make serve

http://localhost:5103