C++ 与 WebAssembly：Emscripten 工具链与运行时实践

wasm-objdump -x module.wasm | head -30   # wabt 工具链查看模块结构
wasm2wat module.wasm -o module.wat       # 反汇编为可读的文本格式

git clone https://github.com/emscripten-core/emsdk.git && cd emsdk
./emsdk install latest && ./emsdk activate latest
source ./emsdk_env.sh && em++ --version    # 每个新 shell 都要 source
# emcc (Emscripten gcc/clang-like replacement) 3.1.60

// hello.cpp
#include <cstdio>
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) { return a + b; }
int main() {
    std::printf("add(2, 3) = %d\n", add(2, 3));
    return 0;
}

em++ hello.cpp -o hello.js          # 产出 hello.js（胶水代码）与 hello.wasm（模块本体）
em++ hello.cpp -o hello.html        # 直接产出可运行的 HTML 页面，适合快速验证
emrun --port 8080 hello.html        # 本地起服务器并打开浏览器

em++ app.cpp -o app.js -O0 -g -gsource-map -sASSERTIONS=2   # 调试：保留断言与名称
em++ app.cpp -o app.js -O3 -flto --closure 1                # 发布：性能优先
em++ app.cpp -o app.js -Oz --closure 1 -sFILESYSTEM=0       # 体积优先

em++ app.cpp -o app.js -O3 \
    -sMODULARIZE=1 -sEXPORT_NAME=createApp -sEXPORT_ES6=1 \
    -sENVIRONMENT=web,node -sALLOW_MEMORY_GROWTH=1 \
    -sINITIAL_MEMORY=64MB -sSTACK_SIZE=1MB \
    -sEXPORTED_FUNCTIONS=_main,_add,_process \
    -sEXPORTED_RUNTIME_METHODS=ccall,cwrap,HEAPF32,UTF8ToString

// api.cpp
#include <emscripten.h>

extern "C" {

EMSCRIPTEN_KEEPALIVE
int fib(int n) {
    int a = 0, b = 1;
    for (int i = 0; i < n; ++i) { int t = a + b; a = b; b = t; }
    return a;
}

EMSCRIPTEN_KEEPALIVE
double sum_floats(const float* data, int n) {
    double s = 0.0;
    for (int i = 0; i < n; ++i) s += data[i];
    return s;
}

}  // extern "C"

em++ api.cpp -o api.js -O3 -sMODULARIZE=1 -sEXPORT_NAME=createApi \
    -sEXPORTED_FUNCTIONS=_fib,_sum_floats,_malloc,_free \
    -sEXPORTED_RUNTIME_METHODS=ccall,cwrap,HEAPF32

import createApi from './api.js';
const Module = await createApi();

console.log(Module.ccall('fib', 'number', ['number'], [10]));   // 55

const fib = Module.cwrap('fib', 'number', ['number']);   // 绑定一次，反复调用更快
console.log(fib(20));                                    // 6765

const n = 4;                                             // 传数组
const ptr = Module._malloc(n * 4);
Module.HEAPF32.set(new Float32Array([1.5, 2.5, 3.5, 4.5]), ptr >> 2);
console.log(Module.ccall('sum_floats', 'number', ['number', 'number'], [ptr, n]));
Module._free(ptr);

// bindings.cpp
#include <emscripten/bind.h>
#include <string>
#include <vector>

using namespace emscripten;

int add(int a, int b) { return a + b; }
std::string greet(const std::string& name) { return "hello, " + name; }

std::vector<int> range(int n) {
    std::vector<int> v;
    for (int i = 0; i < n; ++i) v.push_back(i);
    return v;
}

class Counter {
public:
    explicit Counter(int start) : value_(start) {}
    void inc() { ++value_; }
    int  value() const { return value_; }
private:
    int value_;
};

EMSCRIPTEN_BINDINGS(my_module) {
    function("add", &add);
    function("greet", &greet);
    function("range", &range);
    register_vector<int>("VectorInt");
    class_<Counter>("Counter")
        .constructor<int>()
        .function("inc", &Counter::inc)
        .function("value", &Counter::value);
}

em++ bindings.cpp -o bindings.js -O3 -lembind -sMODULARIZE=1 -sEXPORT_NAME=createBindings

import createBindings from './bindings.js';
const M = await createBindings();
console.log(M.add(2, 3), M.greet('wasm'));   // 5 hello, wasm

const v = M.range(5);
for (let i = 0; i < v.size(); ++i) console.log(v.get(i));

const c = new M.Counter(10);
c.inc();
console.log(c.value());   // 11
c.delete();               // 必须手动释放，否则内存泄漏

#include <emscripten/val.h>
#include <string>

void update_ui(int count) {
    using emscripten::val;
    val document = val::global("document");
    val el = document.call<val>("getElementById", std::string("counter"));
    el.set("textContent", std::to_string(count));
    val now = val::global("Date").call<val>("now");   // 调用 JS 函数并接收返回值
    el.set("dataset", val::object());
    el["dataset"].set("ts", now);
}

em++ app.cpp -o app.js --preload-file assets@/data        # 打包成 .data，运行时挂到 /data
em++ app.cpp -o app.js --embed-file config.json@/config.json   # 直接内嵌（小文件）

// IDBFS 持久化：写完之后必须显式同步
FS.writeFile('/persist/state.bin', new Uint8Array([1, 2, 3]));
FS.syncfs(false, (err) => { if (err) console.error('sync failed', err); });

/opt/wasi-sdk/bin/clang++ -O3 -o hello.wasm hello.cpp   # 默认目标 wasm32-wasi
wasmtime hello.wasm
# add(2, 3) = 5

em++ hello.cpp -o hello.wasm -O3 -sSTANDALONE_WASM --no-entry
# --no-entry 表示没有 main，作为 reactor 模块

wasmtime run --dir=. hello.wasm          # Bytecode Alliance 维护的运行时
wasmtime run --env KEY=VALUE hello.wasm
wasmer run --dir=. hello.wasm            # 支持 LLVM / Cranelift / Singlepass 多后端
node --experimental-wasi-unstable-preview1 run.js   # Node.js 内置 WASI 支持

// 完整可编译示例：同时导出 C 函数与 embind 类的 wasm 模块
// 编译（两个接口一起）：
//   em++ wasm_demo.cpp -o wasm_demo.js -O3 -lembind \
//       -sMODULARIZE=1 -sEXPORT_NAME=createDemo \
//       -sEXPORTED_FUNCTIONS=_malloc,_free,_crc32_of \
//       -sEXPORTED_RUNTIME_METHODS=cwrap,HEAPU8

#include <cstdint>
#include <cstddef>
#include <string>

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

// ====== 1. C 函数接口：CRC32 ======
static std::uint32_t crc32_impl(const std::uint8_t* data, std::size_t n) {
    std::uint32_t crc = 0xFFFFFFFFu;
    for (std::size_t i = 0; i < n; ++i) {
        crc ^= data[i];
        for (int k = 0; k < 8; ++k)
            crc = (crc & 1u) ? (0xEDB88320u ^ (crc >> 1)) : (crc >> 1);
    }
    return crc ^ 0xFFFFFFFFu;
}

extern "C" {

EMSCRIPTEN_KEEPALIVE
std::uint32_t crc32_of(const std::uint8_t* data, std::size_t n) {
    return crc32_impl(data, n);
}

}  // extern "C"

// ====== 2. embind 接口：文本统计 ======
class TextStats {
public:
    void feed(const std::string& s) {
        chars_ += s.size();
        for (char c : s) if (c == '\n') ++lines_;
    }
    std::size_t chars() const { return chars_; }
    std::size_t lines() const { return lines_; }

private:
    std::size_t chars_ = 0;
    std::size_t lines_ = 0;
};

EMSCRIPTEN_BINDINGS(wasm_demo) {
    emscripten::class_<TextStats>("TextStats")
        .constructor<>()
        .function("feed", &TextStats::feed)
        .function("chars", &TextStats::chars)
        .function("lines", &TextStats::lines);
}

import createDemo from './wasm_demo.js';          // ES Module
const M = await createDemo();

const crc32Of = M.cwrap('crc32_of', 'number', ['number', 'number']);
const bytes = new TextEncoder().encode('123456789');
const ptr = M._malloc(bytes.length);
M.HEAPU8.set(bytes, ptr);                          // HEAPU8 按字节寻址
console.log(crc32Of(ptr, bytes.length).toString(16));   // cbf43926
M._free(ptr);

const stats = new M.TextStats();                   // embind 对象须手动 delete
stats.feed('Hello WebAssembly\nsecond line');
console.log(stats.chars(), stats.lines());   // 29 1
stats.delete();