WebAssembly调用JS对象遇env模块错误及栈内存警告求助

一、返回栈内存地址的警告问题 #

原因 #

myFunction中的query是局部std::string变量，函数执行完毕后栈内存会被回收，c_str()返回的指针指向的内存已失效，属于悬垂指针，会引发未定义行为。

解决方案 #

不要直接返回栈上字符串的指针，推荐以下两种处理方式：

方式1：使用堆内存分配字符串

extern "C" {
    EMSCRIPTEN_KEEPALIVE
    const char* myFunction() {
        val window = val::global("window");
        std::string query = decode_request(window);
        // 分配堆内存并拷贝字符串内容
        char* result = (char*)malloc(query.size() + 1);
        strcpy(result, query.c_str());
        return result;
    }
}

注意：这种方式需要JS端在使用完字符串后调用Module._free(result)释放内存，避免内存泄漏。

方式2：直接返回emscripten::val（更推荐）

利用emscripten::val自动处理类型转换与内存管理，无需手动操作：

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

using namespace emscripten;

std::string decode_request(val window) {
    val location = window["location"];
    std::string search = location["search"].as<std::string>();
    size_t pos = search.find('?');
    if (pos != std::string::npos) {
        return search.substr(pos + 1);
    } else {
        return "";
    }
}

EMSCRIPTEN_KEEPALIVE
val myFunction() {
    val window = val::global("window");
    std::string query = decode_request(window);
    return val(query);
}

这种写法不需要extern "C"包裹，Emscripten会自动处理函数导出与类型映射。

二、WebAssembly实例化失败的错误 #

原因 #

编译时使用了-lembind，生成的Wasm模块依赖Emscripten的运行时环境（如env模块中的底层函数），直接用WebAssembly.instantiateStreaming加载裸Wasm文件时，未提供这些依赖的导入对象，导致报错。

解决方案 #

使用Emscripten生成的module.js胶水代码加载模块，而非直接加载.wasm文件：

1. 修改HTML代码，引入胶水代码并等待模块初始化完成：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebAssembly Example</title>
</head>
<body>
    <h1>WebAssembly Example</h1>
    <p id="result">Result: </p>

    <button onclick="run()">Trigger</button>

    <!-- 引入Emscripten生成的胶水脚本 -->
    <script src="module.js"></script>
    <script>
        // 监听模块加载完成事件
        Module.onRuntimeInitialized = function() {
            console.log("Wasm模块加载完成");
        };

        function run() {
            // 直接调用导出的函数
            const result = Module.myFunction();
            console.log("Result:", result);
            document.getElementById("result").textContent = "Result: " + result;
        }
    </script>
</body>
</html>

2. 保持原有编译命令不变：

emcc -o module.js module_2.cpp -s EXPORTED_RUNTIME_METHODS="['ccall']" -lembind

额外优化提示 #

• 若采用方式1返回堆内存，JS端需主动释放内存：

  function run() {
      const resultPtr = Module.myFunction();
      const result = Module.UTF8ToString(resultPtr);
      console.log("Result:", result);
      document.getElementById("result").textContent = "Result: " + result;
      Module._free(resultPtr); // 释放堆内存
  }
  

• 编译时可添加-s ALLOW_MEMORY_GROWTH=1参数，避免内存不足问题。

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