How to pass data from WebAssembly OpenGL application to JavaScript?

After several attempts, I've come to an approach to dispatch CustomEvent from WebAssembly to my Web page.

The function that was used to send data looks like this:

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

Then call sendData() directly on C++ code as if it was a normal C++ function.

Finally, we'll need to listen to the event on the JavaScript side with addEventListener:

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

I'm also wondering can we pass messages from the web page to the OpenGL application?

You are going about this the entirely wrong way. I simply do this in C++ to easily control my web content:

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


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

emscripten_run_script will execute arbitrary Javascript code in the context of the document where the webassembly is loaded.

EDIT

If you wanted to perform the operation in reverse (calling a C++ method from the javascript context), you would want to expose the C++ method to Javascript like this:

#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);
}

Now in the Javascript context:

// 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

You can even pass Javascript functions as callbacks using emscripten::val and use them like any other javascript callback.

#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); }