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

时间:2022-07-24
本文章向大家介绍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 Worldn");
}

#ifdef __cplusplus
extern "C"
{
#endif

void EMSCRIPTEN_KEEPALIVE add(int a, int b)
{
    printf("a+b=%dn", 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