前言
了解和学习一下什么是 WebAssembly，用 WebAssembly 将 C++ 的实现转换为 JavaScript 可以调用的二进制依赖，简单入门。
WebAssembly
WebAssembly 是什么？
WebAssembly 的出现源于对 Web 应用程序性能的需求。随着 Web 应用程序变得越来越复杂，JavaScript 的性能已经无法满足需求。WebAssembly 通过提供一种低级、高效的编译目标来解决这个问题，使开发人员能够使用其他语言（如 C/C++、Rust 和 C#）编写高性能的 Web 应用程序。
简而言之，就是可以把用其他语言编写的代码进过转换之后，可以让 JavaScript 调用，以此来提升应用的性能。
WebAssembly Hello World
下面就以 C/C++ 代码为例，来学习一下如何使用 WebAssembly 。
面对不同的语言 C/C++、Rust、Java，采用 WebAssembly 进行转换需要依赖不同的转换工具，具体可以参考 WebAssembly 官网教程 的示例。
环境配置
Emscripten
Emscripten 是一个 开源的编译器 ，该编译器可以将 C/C++ 的代码编译成 JavaScript 胶水代码。 Emscripten 可以将 C/C++ 代码编译为 WebAssembly 编程语言的代码。
emcc 安装
# 1、下载 emsdk
git clone https://github.com/juj/emsdk.git
# 2、进入 emsdk 目录
cd emsdk
# 3、开始安装
# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull
# Download and install the latest SDK tools.
./emsdk install latest
# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
./emsdk activate latest
# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh
也可以将 emsdk 配置到环境变量中，这样就可以随意调用了。
执行 emcc --version 可以看到相关信息的话，环境就 ready 了。
C++ 代码编译
#include <iostream>
int main() {
std::cout << "Hello, World!" << std::endl;
return 0;
}
用 emcc 进行编译
emcc main.c -s WASM=1 -o index.html
执行命令之后会生成三个文件
index.html index.js index.wasm
- index.wasm 二进制的 wasm 模块代码
- index.js 胶水代码，包含了原生 C++ 函数和 JavaScript/wasm 之间转换的 JS 文件
- index.html 用来加载、编译和实例化 wasm 代码并且将其输出在浏览器显示上的 HTML 文件
最后执行 emrun index.html 就可以在浏览器上看到效果了。
这里由于浏览器跨域的问题，直接打开 index.html 是无法正常运行的
这里 index.html 中最核心的代码就是 <script async type="text/javascript" src="index.js"></script> 。 来执行 index.js 这个里面的逻辑。
Node 使用 WebAssembly
以上通过编译自动生成了 wasm 和 JavaScript 的胶水代码，并通过 html 进行加载，下面通过一个 NodeJs 的示例看看如何手动编写胶水层的代码。
- sum.cpp
int add(int a, int b) {
return a + b;
}
- 进行编译
emcc src/sum.cpp -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']" -o out/sum.wasm
- 读取 wasm 并执行对应的方法
const fs = require('fs');
let src = new Uint8Array(fs.readFileSync('sum.wasm'));
const env = {
memoryBase: 0,
tableBase: 0,
memory: new WebAssembly.Memory({
initial: 256
}),
table: new WebAssembly.Table({
initial: 2,
element: 'anyfunc'
}),
abort: () => {throw 'abort';}
}
WebAssembly.instantiate(src, {env: env})
.then(result => {
console.log(result.instance.exports.add(20, 89));
})
.catch(e => console.log(e));
通过以上命令转换生成 wasm 文件之后，就可以通过 node.js 按照读文件的方式读入这个二进制文件，通过其暴露的特定接口 instance.exports 调用相应的方法了。而方法名就是在 C/C++ 代码中声明的方法名。
字符串的处理
WebAssembly 并不支持字符串，而在实际开发中会大量用到字符串。
int call_with_string(int a, int b, const char *host, int times) {
printf("call_with_string Called \n");
printf("a = %d, b = %d, host = %s,times=%d\n", a, b, host, times);
return a * b + times;
}
比如这个方法里，参数是 host 是 char 类型的指针，也就是字符串。而通过以上命令直接转换，调用时即便传递了字符串，但是无法正常接受。因此，对于字符串需要特殊处理。
- 修改函数声明
#include <stdio.h>
#include <emscripten/emscripten.h>
#ifdef __cplusplus
#define EXTERN extern "C"
#else
#define EXTERN
#endif
EXTERN EMSCRIPTEN_KEEPALIVE int add(int a, int b) {
return a + b;
}
EXTERN EMSCRIPTEN_KEEPALIVE void call_with_string(int a, int b, const char *host, int times) {
printf("call_with_string Called \n");
printf("a = %d, b = %d, host = %s,times=%d\n", a, b, host, times);
}
通过头文件 <emscripten/emscripten.h> 导入 EMSCRIPTEN_KEEPALIVE 这个宏定义，并添加 EXTERN 声明。
- 导出时需要保留某些一些原生方法
emcc src/sum.cpp -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall','allocate','intArrayFromString']" -s "EXPORTED_FUNCTIONS=['_free']" -o out/sum.html
除了 ccall 之外，还需要保留 allocate,inArrayFromString,_fres 几个原生方法。
- 调用端需要使用 string 的指针
function call_string_input() {
times++
var strPtr = allocate(intArrayFromString("I am from Web"), ALLOC_NORMAL)
Module.ccall(
"call_with_string", // name of C function
null, // return type
[Number, Number, String, Number], // argument types
[2, 2, strPtr, times], // arguments
);
_free(strPtr)
}
通过 allocate 和 intArrayFromString 获取字符串的指针，进行方法调用，调用结束后通过 _free 方法释放指针。
这样才可以进行正常的调用。
遗留问题
这里字符串传参时，在 c/c++ 中添加了很多额外的参数，字符串的处理这一小节的实现，最终是依赖 emcc 生成的胶水层语言加载 wasm ,通过 nodejs 并无法直接加载，有些许差异，待解决。
参考文档
- WebAssembly完全入门——了解wasm的前世今身
- WebAssembly：改变 Web 开发的新技术
- 如何使用 WebAssembly 扩展后端应用
- Emscripten 简明教程
- WebAssembly 官网教程
- 为什么浏览器里的WebAssembly能达到本地应用的速度？
原文链接：https://juejin.cn/post/7314928953194397705 作者：IAM四十二
