如何将数据从 WebAssembly OpenGL 应用程序传递到 JavaScript？

Question

我想在浏览器中创建一个简单的对话框，使用 WebAssembly 将按钮单击作为输入。

我已经成功使用 OpenGL、SDL2 和 imGui 创建了一个应用程序，并使用 Emscripten 将其移植到 JavaScript。 但我在将数据从 WebAssembly OpenGL 应用程序传递到 JavaScript 时遇到问题。

如何将数据从 C++ 传递到 Javascript 以确认用户已执行某些操作的网页（例如：单击“确定”按钮）？

我尝试使用

emscripten_cancel_main_loop

停止 Emscripten 运行循环。并且应用程序只是冻结在网页上。
我正在尝试将事件从 C++ 发送到 JavaScript，但不知道它是如何工作的。

Answer 1

经过多次尝试，我找到了一种将 CustomEvent 从 WebAssembly 分派到我的网页的方法。

用于发送数据的函数如下所示：

EM_JS(void, sendData, (int data), {
    window.dispatchEvent(
        new CustomEvent("fromWASM", {
            detail: {
                data: data
            }
        })
    );
});

然后直接在 C++ 代码上调用

sendData()

，就好像它是普通的 C++ 函数一样。

最后，我们需要使用

addEventListener

:

监听 JavaScript 端的事件

window.addEventListener('fromWASM', (event) => {
    console.log(event.detail);
});

我还想知道我们可以将消息从网页传递到OpenGL应用程序吗？

Answer 2

你的处理方式完全错误。我只是用 C++ 这样做来轻松控制我的网页内容：

#include <../emsdk/emscripten/master/system/include/emscripten.h>


/* in your C++ code somewhere */
emscripten_run_script('alert(\"The operation is completed!\");');

emscripten_run_script 将在加载 WebAssembly 的文档上下文中执行任意 Javascript 代码。

---

编辑

在使用 Emscripten 和 Qt5 for WebAssembly 时，要从 JavaScript 调用 C++ 函数并在 JavaScript 中处理结果，通常使用 EMSCRIPTEN_BINDINGS 将 C++ 函数公开给 JavaScript。但是，emscripten_run_script 用于从 C++ 运行 JavaScript 代码，而不是相反。

以下是如何公开 C++ 函数，然后从 JavaScript 调用它：

使用 EMSCRIPTEN_BINDINGS 公开 C++ 函数：

#include <emscripten/bind.h>

int myFunction(int x) {
    // Your C++ code here
    return x * 2; // Example operation
}

EMSCRIPTEN_BINDINGS(my_module) {
    emscripten::function("myFunction", &myFunction);
}

从 JavaScript 调用公开的 C++ 函数： JavaScript

// Call the C++ function from JavaScript
const result = Module.myFunction(10);

// Decide what to do with the result
console.log(result); // Use the result in your JavaScript code

如果您需要在调用 C++ 函数后运行 JavaScript 函数，您可以将 JavaScript 回调传递给 C++ 代码，然后从那里调用它：

定义一个接受回调的 C++ 函数：

#include <emscripten.h>

void myFunctionWithCallback(int x, emscripten::val callback) {
    int result = x * 2; // Example operation
    // Convert the result to a val before passing to callback
    callback(emscripten::val(result)); }

EMSCRIPTEN_BINDINGS(my_module) {
    emscripten::function("myFunctionWithCallback", &myFunctionWithCallback); }

使用 JavaScript 回调调用 C++ 函数：

// Define a JavaScript callback function
function myCallback(result) {
    // Use the result in your JavaScript code
    console.log('Callback received result:', result);
}

// Call the C++ function and pass the JavaScript callback
Module.myFunctionWithCallback(10, myCallback);

这样，您可以在用户采取操作后在 JavaScript 中处理 C++ 函数的结果。请记住，emscripten::val 类型用于在 C++ 和 JavaScript 类型之间进行转换。