Search code examples
javascriptcangulartypescriptwebassembly

Is it possible to run WebAssembly code async?

I have written a C function that I am able to execute from Angular/TypeScript/JavaScript using WebAssembly:

testWebAssembly() {
    Module.ccall("aCFunction", null, [], []); // takes a few seconds to finish
}

This function does some heavy mathematical calculations and needs a few seconds to finish. It is fired when a user clicks a button:

<button (click)="testWebAssembly()">Launch C function</button>

Is it possible to execute the function so that it does not block the UI of the web application?

I tried setTimeOut/async/Promise, but I don't seem to be able to make it work.

Thank you!

Solution

  • WebAssembly and JavaScript share the same execution thread, i.e. when you execute WebAssembly from within JavaScript, your JavaScript code halts, and vice-versa. In that respect it's just like executing any other native (i.e, browser-supplied) APIs from your JavaScript code.

    One option you do have is to run your WebAssembly in a WebWorker, using postMessage to send messages to your wasm code that executed in a different thread. There's a great example here, that renders a fractal using WebWorkers:

    https://www.reddit.com/r/rust/comments/8hdq5r/a_rust_javascript_web_workers_fractal_renderer/

    In the future WebAssembly will likely have its own support for threading:

    https://github.com/WebAssembly/threads