WebAssembly之使用JS调用C/C++接口

image.png

如果想在C/C++代码中定义一个需要从JavaScript调用的函数，可以使用Emscripten 的ccall()函数并使用EMSCRIPTEN_KEEPALIVE声明（它将添加函数到导出函数列表）来完成。

代码创建

创建一个test.c文件：

#include <stdio.h>
#include <emscripten/emscripten.h>

int main(int argc, char ** argv)
{
    printf("Hello World\n");
}

#ifdef __cplusplus
extern "C"
{
#endif

void EMSCRIPTEN_KEEPALIVE add(int a, int b)
{
    printf("a+b=%d\n", a+b);
}

#ifdef __cplusplus
}
#endif

默认情况下，Emscripten生成的代码总是只调用该main()函数，其他函数作为死代码被删除。

将EMSCRIPTEN_KEEPALIVE放在函数名称之前可以阻止这种情况发生。
还需要导入emscripten.h库来使用EMSCRIPTEN_KEEPALIVE。

添加模板文件HTML

在上一级新建html_template目录，并将shell_minimal.html复制到目录中。

其余步骤和上一章节相同。

运行实例

执行编译：

 emcc -o test.html test.c -O3 -s WASM=1 --shell-file ../html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1  -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']"

编译成功后执：

 emrun --no_browser --port 8080 .

image.png

在浏览器中执行：http://127.0.0.1:8080/
进入test.html：

image.png

但是并没有调用我们的函数，下面就要修改html文件调用我们的函数。

在html文件中添加按钮和对应的回调函数：

<button class="mybutton">Run myFunction</button>
document.querySelector('.mybutton')
    .addEventListener('click', function(){
        alert('check console');
        var result = Module.ccall(
            'add',
            null,
            ['number', 'number'],
            [13, 40]
        );
    })

image.png

ccall函数语法解释：

var result = Module.ccall(ident, returnType, argTypes, args);

参数：

• ident ：C导出函数的函数名（不含“_”下划线前缀）；
• returnType ：C导出函数的返回值类型，可以为'boolean'、'number'、'string'、'null'，分别表示函数返回值为布尔值、数值、字符串、无返回值；
• argTypes ：C导出函数的参数类型的数组。参数类型可以为'number'、'string'、'array'，分别代表数值、字符串、数组；
• args ：参数数组。
  使用例子：

var result = Module.ccall('add', 'number', ['number', 'number'], [13.0, 42]);

执行的效果：

image.png