跳至正文

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.h>  // 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,内容如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebAssembly Test</title>
</head>
<body>
    <div id="app">
        Test WASM.
    </div>
    <script type="text/javascript" src="test.js"></script>
    <script>
      Module.onRuntimeInitialized = function () {
        console.log('call _add: ', Module._add(10, 20)); // 30
      };
    </script>
</body>
</html>

其中,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 <stdio.h>  // printf
#include <emscripten.h>  // 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 中增加以下内容。

<script>
      Module.onRuntimeInitialized = function () {
        var str = "Hello World";
        // 返回 uint8Array
        var strBuffer = new TextEncoder().encode(str);
        // 分配所需内存
        var strPointer = Module._malloc(strBuffer.length + 1);
        // 写入 uint8 缓冲区
        Module.HEAPU8.set(strBuffer, strPointer);
        // 以 0 结尾
        Module.HEAPU8[strPointer + strBuffer.length] = 0;
        Module._log_js_string(strPointer);
        // 用完后释放内存
        Module._free(strPointer);
        console.log('Success to call _log_js_string: ');
      };
    </script>

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

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

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

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

#include <stdio.h>  // snprintf
#include <stddef.h>  // size_t
#include <emscripten.h>  // 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。

<script>
  Module.onRuntimeInitialized = function () {
    // 第一次调用先获取需要的内存大小
    var size = Module._get_c_string(0, 0);
    var strPointer = Module._malloc(size);
    Module._get_c_string(strPointer, size);
    var strBuffer = new Uint8Array(Module.HEAPU8.buffer, strPointer, size - 1);
    var str = new TextDecoder().decode(strBuffer);
    console.log(str); // Hello World
    Module._free(strPointer);
  };
</script>

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

发表回复

您的电子邮箱地址不会被公开。