通过 emscripten 编写 wasm

emscripten 使用 LLVM 编译器。emscripten 官方文档

环境要求

• python 2.7.12+，3 也可以。
• mime-type 媒体类型，application/wasm，可以通过 http 头验证。

安装

# 下载 emsdk 仓库
git clone https://github.com/emscripten-core/emsdk.git && cd emsdk

# 下载并安装 sdk
./emsdk install latest

# 激活最新 sdk
./emsdk activate latest

# 激活终端环境变量
source ./emsdk_env.sh

---

也可以添加到环境变量中

# emsdk
export PATH=$PATH:$YOUR_DIR/emsdk
export PATH=$PATH:$YOUR_DIR/emsdk/node/14.18.2_64bit/bin
export PATH=$PATH:$YOUR_DIR/emsdk/upstream/emscripten

验证

emsdk list

一个简单的 wasm 程序

calculate_prime.c

#ifdef __EMSCRIPTEN__
    #include <emscripten.h>
#endif
#include <stdlib.h>
#include <stdio.h>

int IsPrime(int value) {
  int i;
  for (i = 2; i < value; i++) {
    if (value % i == 0) {
      return 0;
    }
  }
  return 1;
}

int main(int argc, char **argv) {
  int start = 0;
  int end = 100;

  printf("prime number between %d and %d\n", start, end);

  for (int i = start; i < end; i++) {
    if (IsPrime(i)) {
      printf("%d is prime\n", i);
    }
  }
  return 0;
}

</div>
</div>

编译 查看结果

emcc calculate_prime.c -o html_template.html

形成三个文件

html_template.html
html_template.js
html_template.wasm

html 主要包含了 wasm 的引用和实例化。通过 web API 以及 emsdk 通过 js 提供的工具进行运行。

当然也可以只生成 js 文件。

emcc calculate_prime.c -o js_plumbing.js

生成文件

js_plumbing.js
js_plumbing.wasm

生成的 wasm 文件是二进制文件， 我们可以通过将 wasm 转化成 wat 来进行阅读。

# https://github.com/webassembly/wabt
wasm2wat js_plumbing.wasm -o js_plumbing.wat

打开会看到这样的代码片段。（如何阅读wasm?）

(module
  (type (;0;) (func (param i32 i32 i32) (result i32)))
  (type (;1;) (func (param i32) (result i32)))
  (type (;2;) (func (result i32)))
  (type (;3;) (func (param i32)))

wasm 与 javascript 交互

side_module.c

int Increment(int x) {
  return x + 1;
}

编译

emcc side_module.c -s SIDE_MODULE=2 -O1 -s EXPORTED_FUNCTIONS=\["_Increment"\] -o side_module.wasm

• -s SIDE_MODULE=2: 将代码编译为副模块，并且emcc 不会在生成的模块中包含 C 的标准库
• 优化标记 -O1，默认 -O0 。-O0 保留无关函数；-O1 进行了 tree sharking; -O2 压缩并 tree sharking
• -s EXPORTED_FUNCTIONS=['_Increment'] 指定 Increment 为导出函数，需要前面增加 _，允许多个。
• *.wasm 后缀代表只生成 webAssembly 文件。

---

index.js 来加载 wasm

const wasmBinaryFile = 'side_module.wasm'

/**
 * WebAssembly.Memory
 * 包含内存、表、全局变量、函数引用等
 */
const env = {
    '__table_base': 0,
    'memory': new WebAssembly.Memory({ initial: 256, maximum: 256 }),
    '__memory_base': 1024,
};

WebAssembly.instantiateStreaming(
    fetch(wasmBinaryFile),
    {env},
).then(result => {
    const increment = result.instance.exports.Increment;
    
    console.log('get wasm export function:', increment);
    increment && console.log(increment(17).toString())
})