zhangyang-zerotierone/zeroidc/vendor/wasm-bindgen/guide/src/examples/wasm-in-web-worker.md

WASM in Web Worker

View full source code

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.

Building & compatibility

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/www/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/www/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/www/worker.js}}