简单的WebAssembly应用搭建

 

1      WebAssembly简介

WebAssembly是一种新兴的Web技术，网上的资料并不是很多，简单的可以理解为让C/C++程序运行在浏览器上，官网上用四个词来描述该技术：高效、安全、开放、标准。

1.1      高效

C/C++代码被编译成.wasm的二进制格式文件，其目标是充分发挥硬件能力已达到原生执行效率。

1.2      安全

WebAssembly应用运行在一个沙箱化的环境中，对外只暴露特定的接口，并且在Web环境中，WebAssembly将会严格遵守浏览器的一些安全策略。

1.3      开放

.wasm文件是二进制格式文件，不便于理解，但WebAssembly在将来可以直接通过浏览器查看wasm模块的源码。

1.4      标准

WebAssembly可以被JavaScript调用，同时也可以像WebAPI一样调用浏览器的功能。

2      工具安装

编写WebAssembly应用所需的工具比较多，主要包含有浏览器（新版的chrome、firefox）、C/C++开发环境、Web环境、Emscripten编译器。这里面最麻烦的就是Emscripten编译器的安装，Emscripten是把C/C++程序编译成浏览器运行的wasm文件以及对应的JS代码的编译器，主要有两种安装方式（已windows环境为例）：

2.1      在线安装

在线安装比较容易出错，需要安装git并能访问github开源社区，参考官网：http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html，步骤如下：

2.1.1        克隆emsdk仓库

git clone https://github.com/juj/emsdk.git，这一步容易报Timed out错误：

 

可以参考w3上面的解决方法：http://3ms.huawei.com/hi/group/1503847/thread_5329623.html?mapId=6456777&t_type=ask

2.1.2        安装工具

cd emsdk           // 定位到emsdk文件夹

emsdk update       // 执行更新

emsdk install latest   // 安装各种工具

emsdk activate latest  // 生成.emscripten文件，激活配置

2.2      离线安装

离线安装比较简单，在官网http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html下载离线包emsdk-1.35.0-full-64bit.exe，里面集成了所需的各种工具，如clang、node、python、emscripten等，下载完成后直接运行就可以完成上述软件的安装，安装完成后的目录结构如下：

 

2.2.1        验证安装结果

打开cmd，输入emcc –v，提示如下信息则表示安装成功：

 

       如果提示emcc不是内部或外部命令，去检查一下.emscripten文件，.emscripten文件在当前用户所在的文件夹中（C:\Users\你的用户名），正常安装后的内容为：

 

3      应用搭建

3.1      编写C/C++程序

 

代码说明如下：

1、  当对应的js文件被加载时，main方法自动执行，printf翻译成console.log；

2、  EMSCRIPTEN_KEEPALIVE修饰的方法表示是要导出的方法，这些方法才能生成对应的API，供js调用，API名一般为下划线+方法名，即是说_addTest、_subTest。

3.2      编译.c文件为js代码

打开cmd，输入以下指令：emcc index.c –s WASM=1 –O3 –o index.js，参数解释如下：

1、emcc：代表Emscripten编译器;

2、index.c：C代码的文件；

3、-s WASM=1：指定使用WebAssembly；

4、-O3：代码优化级别；

5、-o index.js：生成wasm模块的全部文件，包含.wasm文件和.js文件等。

emcc参数的详细说明可以参考官网介绍：http://kripken.github.io/emscripten-site/docs/tools_reference/emcc.html#emccdoc

编译结果如下：

 

包含如下文件：

 

3.3      搭建Web运行环境

3.3.1        目录结果

 

3.3.2        index.html代码

 

3.3.3        index.js代码

在emscripten编译的index.js代码基础上增加如下代码：

 

3.3.4        页面效果

浏览器访问对应的地址，点击等号，能完成_addTest()和_subTest()方法的调用，页面如下：

 

3.4      总结

上述应用，通过一个简单的例子实现了通过浏览器来执行C/C++代码，WebAssembly API的具体介绍可以参考官网：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly。