0. 前提知識(shí)點(diǎn)

導(dǎo)出C中的函數(shù)給JS調(diào)用：主要是EMSCRIPTEN_KEEPALIVE這個(gè)Emscripten環(huán)境特有的宏。

#include <stdio.h>#ifndef EM_PORT_API # if defined(__EMSCRIPTEN__) # include <emscripten.h> # if defined(__cplusplus) # define EM_PORT_API(rettype) extern "C" rettype EMSCRIPTEN_KEEPALIVE # else # define EM_PORT_API(rettype) rettype EMSCRIPTEN_KEEPALIVE # endif # else # if defined(__cplusplus) # define EM_PORT_API(rettype) extern "C" rettype # else # define EM_PORT_API(rettype) rettype # endif # endif #endifEM_PORT_API (int) sum(int *ptr, int count) {int total = 0;for(int i = 0; i < count; i++) {total += ptr[i];}return total; } // js Module._sum(ptr, 10);

使用Emscripten編譯C代碼到wasm。Emscripten的環(huán)境比較難配置，主要是網(wǎng)絡(luò)問(wèn)題，但好在有docker環(huán)境可以直接使用trzeci/emscripten。推薦寫個(gè)build.sh文件方便修改編譯腳本

# build.sh docker run --rm -v $(pwd):$(pwd) -u $(id -u):$(id -g) trzeci/emscripten emcc helloworld.c -o helloworld.js

使用編譯后的wasm。編譯成功后有會(huì).wasm文件和其對(duì)應(yīng)的.js膠水文件，其目錄：

. ├── build.sh ├── index.html ├── test.cc ├── test.js └── test.wasm

在index.html寫測(cè)試代碼

<script>var Module = {};Module.onRuntimeInitialized = () => {// 在這個(gè)回調(diào)中調(diào)用wasm中的方法}; </script> <!-- 膠水層代碼要放在后臺(tái) --> <script src="test.js"></script>

WASM Table: 存儲(chǔ)函數(shù)

這是一個(gè)包裝了WebAssemble Table 的Javascript包裝對(duì)象，具有類數(shù)組結(jié)構(gòu)，存儲(chǔ)了多個(gè)函數(shù)引用。在Javascript或者WebAssemble中創(chuàng)建Table 對(duì)象可以同時(shí)被Javascript或WebAssemble 訪問(wèn)和更改。

1. 在C中調(diào)用JS函數(shù)之a(chǎn)ddFunction

Emscripten提供了多種在C環(huán)境調(diào)用JavaScript的方法，包括：

EM_JS/EM_ASM宏內(nèi)聯(lián)JavaScript代碼

emscripten_run_script函數(shù)

JavaScript函數(shù)注入（更準(zhǔn)確的描述為：“Implement C API in JavaScript”，既在JavaScript中實(shí)現(xiàn)C函數(shù)API）

使用addFunction將函數(shù)指針傳到C代碼中調(diào)用

前3種方法點(diǎn)擊鏈接就可以查看詳細(xì)的使用說(shuō)明

下面著重描述下第4種方法，主要結(jié)合Calling JavaScript functions as function pointers from C實(shí)踐一下

You can use addFunction to return an integer value that represents a function pointer. Passing that integer to C code then lets it call that value as a function pointer, and the JavaScript function you sent to addFunction will be called.
你可以使用addFunction這個(gè)函數(shù)的返回值（數(shù)字）來(lái)代表這個(gè)函數(shù)的指針。然后將該指針（數(shù)字）傳遞給C代碼，然后讓其將該值作為函數(shù)指針進(jìn)行調(diào)用，發(fā)送給addFunction的JavaScript函數(shù)將被調(diào)用。

由上面的說(shuō)明可以推測(cè)出Module有一個(gè)addFunction的方法，返回值是一個(gè)數(shù)字類型。

在嘗試調(diào)用的時(shí)候，發(fā)現(xiàn)提示說(shuō)要在編譯的時(shí)候?qū)С鲞@個(gè)函數(shù)

docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk emcc test.cc -o test.js # 要在這里加上-s EXTRA_EXPORTED_RUNTIME_METHODS="['addFunction']"

再次調(diào)用時(shí)又發(fā)現(xiàn)要設(shè)置wasm table成為可以grow的

此時(shí)要在編譯腳本中再加上一行

-s ALLOW_TABLE_GROWTHYou should build with -s ALLOW_TABLE_GROWTH to allow new functions to be added to the table. Otherwise by default the table has a fixed size.

加上編譯后，再次運(yùn)行，發(fā)現(xiàn)叕報(bào)錯(cuò)了，缺少函數(shù)簽名

查看文檔

When using addFunction on LLVM wasm backend, you need to provide an additional second argument, a Wasm function signature string. Each character within a signature string represents a type. The first character represents the return type of a function, and remaining characters are for parameter types. - 'v': void type - 'i': 32-bit integer type - 'j': 64-bit integer type (currently does not exist in JavaScript) - 'f': 32-bit float type - 'd': 64-bit float type

原來(lái)是addFunction的第二個(gè)參數(shù)需要標(biāo)明函數(shù)的返回值類型，及參數(shù)類型，再次修改

終于成功了，此時(shí)已得到了函數(shù)的指針，將其傳入到C代碼中就可以調(diào)用了。

下面看下C代碼的實(shí)現(xiàn)：

// 聲明函數(shù)簽名，在JS中調(diào)用addFunction時(shí)，第二個(gè)函數(shù)的簽名要與此聲明保持一致 typedef void testExternalJSMethod(int p);// 導(dǎo)出一個(gè)接收函數(shù) EM_PORT_API (void) pass_fn_ptr(int ptr) {((testExternalJSMethod*)ptr)(1); } // js Module.onRuntimeInitialized = () => {function jsFunction(i) {console.log('定義在js中的function');console.log('從c中傳來(lái)的參數(shù): ', i);}// 這里說(shuō)明下，C語(yǔ)言是先聲明函數(shù)返回的類型，所以這里要先寫返回值的類型，再寫其他參數(shù)的類型var fPtr = Module.addFunction(jsFunction, 'vi');Module._pass_fn_ptr(fPtr); };

最后看下輸出結(jié)果：

2. addFunction的優(yōu)點(diǎn)

相對(duì)于第3種方式來(lái)說(shuō)比較靈活，第3種在js中函數(shù)的實(shí)現(xiàn)的參與到編譯的過(guò)程中，而真實(shí)應(yīng)用時(shí)給c調(diào)用的函數(shù)往往混合在業(yè)務(wù)代碼中，或者是用ts去實(shí)現(xiàn)的，這樣第3種方式就會(huì)很麻煩；

EM_ASM emscripten_run_script這種方式直接將js代碼內(nèi)聯(lián)到C中，沒(méi)有什么維護(hù)性；

#include <emscripten.h>int main() {EM_ASM(console.log('你好，Emscripten！'));return 0; }

X. 參考文檔

C/C++面向WebAssembly編程

Calling JavaScript functions as function pointers from C

總結(jié)

以上是生活随笔為你收集整理的调用c++_WebAssembly： 在C代码中调用JS的函数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。