A simple example of parallel execution by spawning a web worker with web_sys
, loading Wasm code in the web worker and interacting between the main thread and the worker.
At the time of this writing, only Chrome supports modules in web workers, e.g. Firefox does not. To have compatibility across browsers, the whole example is set up without relying on ES modules as target. Therefore we have to build with --target no-modules
. The full command can be found in build.sh
.
Cargo.toml
The Cargo.toml
enables features necessary to work with the DOM, log output to the JS console, creating a worker and reacting to message events.
{{#include ../../../examples/wasm-in-web-worker/Cargo.toml}}
src/lib.rs
Creates a struct NumberEval
with methods to act as stateful object in the worker and function startup
to be launched in the main thread. Also includes internal helper functions setup_input_oninput_callback
to attach a wasm_bindgen::Closure
as callback to the oninput
event of the input field and get_on_msg_callback
to create a wasm_bindgen::Closure
which is triggered when the worker returns a message.
{{#include ../../../examples/wasm-in-web-worker/src/lib.rs}}
index.html
Includes the input element #inputNumber
to type a number into and a HTML element #resultField
were the result of the evaluation even/odd is written to. Since we require to build with --target no-modules
to be able to load Wasm code in in the worker across browsers, the index.html
also includes loading both wasm_in_web_worker.js
and index.js
.
{{#include ../../../examples/wasm-in-web-worker/index.html}}
index.js
Loads our Wasm file asynchronously and calls the entry point startup
of the main thread which will create a worker.
{{#include ../../../examples/wasm-in-web-worker/index.js}}
worker.js
Loads our Wasm file by first importing wasm_bindgen
via importScripts('./pkg/wasm_in_web_worker.js')
and then awaiting the Promise returned by wasm_bindgen(...)
. Creates a new object to do the background calculation and bind a method of the object to the onmessage
callback of the worker.
{{#include ../../../examples/wasm-in-web-worker/worker.js}}