WebAssembly笔记(4)-JavaScript和C++的交互

一 JS调用C++函数

从JS中调用C++函数，需要把C++函数声明为导出，有好几种方法，本文采用最原始也是效率最高的方法，就是函数签名加上 EMSCRIPTEN_KEEPALIVE。

1.1 EMSCRIPTEN_KEEPALIVE

作用是告诉C++编译器这个函数会被用到，不要在“tree shaking”的时候删掉，并且会将函数名加上前缀 _ 导出给 JS。另外还需加上 extern "C" 告诉 C++ 编译器不要修改函数名，保留 C 语言的函数名。

// test.c

#include   // EMSCRIPTEN_KEEPALIVE

#ifdef __cplusplus
#define EXTERN_C extern "C"
#else
#define EXTERN_C
#endif

EXTERN_C EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
  return a + b;
}

然后使用 emcc -o test.js test.c 编译，将会生成 test.js 和 test.wasm 两个文件，test.js 的作用是加载 test.wasm。

为了方便在网页中展示结果，再增加一个 test.html 文件，在 html 中去加载 test.js，内容如下。

    
    


    

        Test WASM.
    
    
    

其中，Module是个全局的JavaScript对象，Module.onRuntimeInitialized 将会在WebAssembly模块完全初始化时被调用，相当于 C/C++ 中的 main 函数。Module._add 就代表调用 C 代码中的 add 函数。

然后使用 rmrun 创建一个 http 服务，方便运行 html 网页。

emrun --no_browser --port 8080 .

最后，用浏览器打开地址：http://localhost:8090/test.html ，就会看到 Test WASM. 的显示，并在浏览器开发工具的Console窗口看到 call _add: 30 输出，代表JS代码调用WASM模块中的C/C++函数成功了。

二 JS传参数(字符串)给C

字符串在C中就是一个以0结尾的字符数组，内存是连续的。所以要把JS字符串传到C，首先要开辟一块C的内存，再把JS字符串放进这块内存，C就可以访问到了。

1、在 test.c 增加以下代码。

#include   // printf
#include   // EMSCRIPTEN_KEEPALIVE

EXTERN_C EMSCRIPTEN_KEEPALIVE
void log_js_string(const char* str) {
  printf("%s\n", str);
}

2、用 emcc 导出时增加选项，把 C 语言中的 malloc 和 free 函数一起导出到JS。

emcc -s EXPORTED_FUNCTIONS="['_malloc','_free']" -o test.js test.c

3、然后在 test.html 中增加以下内容。

4、最后按第一部分的方法，运行 test.html 就能看到结果了。

三 C传参数(字符串)给JS

类似的，从C传字符串给JS，就是往JS分配的内存中写入字符串内容。

1、在 test.c 中增加以下内容

#include   // snprintf
#include   // size_t
#include   // EMSCRIPTEN_KEEPALIVE

EXTERN_C EMSCRIPTEN_KEEPALIVE
int get_c_string(char* out_str, size_t size) {
  if (out_str == NULL) {
    return 12;
  }
  return snprintf(out_str, size, "Hello World");
}

2、同样用 emcc 命令导出 JS。

emcc -s EXPORTED_FUNCTIONS="['_malloc','_free']" -o test.js test.c

3、编辑 test.html。

4、运行 test.html 查看结果。