如何通过WebAssembly调用C++ STL vector的pushData函数并复用数据

第一步：调整C++代码适配WebAssembly #

首先你的原始C代码有两个小问题：pushData声明返回int但没有实际返回值，另外要让WebAssembly能识别并导出函数，得用extern "C"避免C的名字修饰（不然Wasm里的函数名会被篡改，JS没法正常调用）。另外，JS没法直接访问C++的vector内部结构，我们得额外导出几个辅助函数来获取vector的长度和元素，这样才能在JS里拿到数据。

修改后的C++代码如下：

#include <iostream>
#include <vector>
using namespace std;

// 全局vector，Wasm模块运行期间会一直存在
vector<int> ver;

extern "C" {
    // 修正后的pushData，改为void类型（因为原本也不需要返回值）
    void pushData(int n) {
        for(int i = 0; i < n; i++) {
            ver.push_back(i);
        }
    }

    // 导出获取vector长度的函数
    int getVerLength() {
        return ver.size();
    }

    // 导出获取指定索引元素的函数
    int getVerElement(int index) {
        if (index >= 0 && index < ver.size()) {
            return ver[index];
        }
        return -1; // 用-1标记索引越界
    }
}

第二步：编译C++代码为WebAssembly模块 #

我们用Emscripten这个工具链来编译，它专门处理C/C++到Wasm的转换，还会生成JS胶水代码帮我们处理内存和函数调用的细节。

打开终端，运行以下命令（把your_code.cpp换成你实际的C++文件名）：

emcc your_code.cpp -o wasm_module.js -s EXPORTED_FUNCTIONS='["_pushData", "_getVerLength", "_getVerElement"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

• -o wasm_module.js：生成一个JS胶水文件和对应的.wasm二进制文件，JS文件会帮我们自动加载和初始化Wasm模块。
• EXPORTED_FUNCTIONS：告诉编译器要导出哪些函数，注意函数名前要加下划线（Emscripten对extern "C"函数的命名规则）。
• EXPORTED_RUNTIME_METHODS：导出Emscripten提供的ccall和cwrap方法，方便JS以更友好的方式调用Wasm函数。

第三步：在JavaScript中调用Wasm函数并复用vector #

现在写一个HTML文件来加载Wasm模块，调用函数并验证vector的复用：

<!DOCTYPE html>
<html>
<head>
    <title>Wasm C++ Vector Demo</title>
</head>
<body>
    <!-- 引入Emscripten生成的JS胶水文件 -->
    <script src="wasm_module.js"></script>
    <script>
        // 等待Wasm模块完全初始化完成后再执行操作
        Module.onRuntimeInitialized = function() {
            // 用cwrap封装Wasm函数为JS风格的函数，调用更顺手
            const pushData = Module.cwrap('_pushData', null, ['number']);
            const getVerLength = Module.cwrap('_getVerLength', 'number', []);
            const getVerElement = Module.cwrap('_getVerElement', 'number', ['number']);

            // 第一次调用pushData，往vector里存入0-4
            pushData(5);
            console.log('第一次调用后vector长度:', getVerLength()); // 输出5
            // 遍历打印所有元素
            for (let i = 0; i < getVerLength(); i++) {
                console.log(`索引${i}的元素:`, getVerElement(i));
            }

            // 第二次调用pushData，继续往同一个vector里存入0-2
            pushData(3);
            console.log('第二次调用后vector长度:', getVerLength()); // 输出8
            // 再次遍历验证数据被复用
            for (let i = 0; i < getVerLength(); i++) {
                console.log(`索引${i}的元素:`, getVerElement(i));
            }
        };
    </script>
</body>
</html>

关键原理说明 #

• WebAssembly的内存是一块线性的字节数组，但JS没法直接访问C++的复杂对象（比如vector），所以我们必须通过导出的C函数来间接操作vector。
• 因为ver是C++里的全局变量，只要Wasm模块没有被销毁（页面不刷新、模块不卸载），它的内存就会一直保留，所以后续调用pushData都会往同一个vector里添加数据，实现复用。

内容的提问来源于stack exchange，提问作者divyansh gothwal