From 0925a7282441554e065120930174b6be9f2f00c6 Mon Sep 17 00:00:00 2001 From: Yang Xiufeng Date: Fri, 18 Apr 2025 22:59:05 +0800 Subject: [PATCH] worker --- examples/wasm-in-web-worker/Cargo.toml | 2 ++ examples/wasm-in-web-worker/build.sh | 4 +--- examples/wasm-in-web-worker/index.html | 7 +++---- examples/wasm-in-web-worker/index.js | 11 ++++------- examples/wasm-in-web-worker/src/lib.rs | 10 ++++++++-- examples/wasm-in-web-worker/worker.js | 16 ++++++++-------- guide/src/examples/wasm-in-web-worker.md | 7 ------- 7 files changed, 26 insertions(+), 31 deletions(-) diff --git a/examples/wasm-in-web-worker/Cargo.toml b/examples/wasm-in-web-worker/Cargo.toml index b1fdb41a794..13a39fd7d2f 100644 --- a/examples/wasm-in-web-worker/Cargo.toml +++ b/examples/wasm-in-web-worker/Cargo.toml @@ -21,6 +21,8 @@ features = [ 'MessageEvent', 'Window', 'Worker', + 'WorkerOptions', + 'WorkerType', ] path = "../../crates/web-sys" diff --git a/examples/wasm-in-web-worker/build.sh b/examples/wasm-in-web-worker/build.sh index 0e8f2607375..3ad83cc6ead 100755 --- a/examples/wasm-in-web-worker/build.sh +++ b/examples/wasm-in-web-worker/build.sh @@ -2,6 +2,4 @@ set -ex -# This example requires to *not* create ES modules, therefore we pass the flag -# `--target no-modules` -wasm-pack build --target no-modules +wasm-pack build --target web diff --git a/examples/wasm-in-web-worker/index.html b/examples/wasm-in-web-worker/index.html index 943bdf2ebe8..1e6a3954db2 100644 --- a/examples/wasm-in-web-worker/index.html +++ b/examples/wasm-in-web-worker/index.html @@ -14,11 +14,10 @@

Main Thread/Wasm Web Worker Interaction

- - - - + + + \ No newline at end of file diff --git a/examples/wasm-in-web-worker/index.js b/examples/wasm-in-web-worker/index.js index 05d2209d8e5..08213f73706 100644 --- a/examples/wasm-in-web-worker/index.js +++ b/examples/wasm-in-web-worker/index.js @@ -1,12 +1,9 @@ -// We only need `startup` here which is the main entry point -// In theory, we could also use all other functions/struct types from Rust which we have bound with -// `#[wasm_bindgen]` -const {startup} = wasm_bindgen; +// Use ES module import syntax to import functionality from the module +// that we have compiled. +import init, { startup } from './pkg/wasm_in_web_worker.js'; async function run_wasm() { - // Load the Wasm file by awaiting the Promise returned by `wasm_bindgen` - // `wasm_bindgen` was imported in `index.html` - await wasm_bindgen(); + await init(); console.log('index.js loaded'); diff --git a/examples/wasm-in-web-worker/src/lib.rs b/examples/wasm-in-web-worker/src/lib.rs index 1985721b4c7..a27d28b2abd 100644 --- a/examples/wasm-in-web-worker/src/lib.rs +++ b/examples/wasm-in-web-worker/src/lib.rs @@ -1,7 +1,9 @@ use std::cell::RefCell; use std::rc::Rc; use wasm_bindgen::prelude::*; -use web_sys::{console, HtmlElement, HtmlInputElement, MessageEvent, Worker}; +use web_sys::{ + console, HtmlElement, HtmlInputElement, MessageEvent, Worker, WorkerOptions, WorkerType, +}; /// A number evaluation struct /// @@ -45,7 +47,11 @@ pub fn startup() { // able to interact with the code in the worker. Therefore, we wrap it in // `Rc` following the interior mutability pattern. Here, it would // not be needed but we include the wrapping anyway as example. - let worker_handle = Rc::new(RefCell::new(Worker::new("./worker.js").unwrap())); + let worker_options = WorkerOptions::new(); + worker_options.set_type(WorkerType::Module); + let worker_handle = Rc::new(RefCell::new( + Worker::new_with_options("./worker.js", &worker_options).unwrap(), + )); console::log_1(&"Created a new worker from within Wasm".into()); // Pass the worker to the function which sets up the `oninput` callback. diff --git a/examples/wasm-in-web-worker/worker.js b/examples/wasm-in-web-worker/worker.js index 99f4d30817b..89806fc1044 100644 --- a/examples/wasm-in-web-worker/worker.js +++ b/examples/wasm-in-web-worker/worker.js @@ -1,17 +1,17 @@ +// Use ES module import syntax to import functionality from the module +// that we have compiled. +// // The worker has its own scope and no direct access to functions/objects of the -// global scope. We import the generated JS file to make `wasm_bindgen` -// available which we need to initialize our Wasm code. -importScripts('./pkg/wasm_in_web_worker.js'); +// global scope. +import init, { NumberEval } from './pkg/wasm_in_web_worker.js'; + console.log('Initializing worker') -// In the worker, we have a different struct that we want to use as in -// `index.js`. -const {NumberEval} = wasm_bindgen; async function init_wasm_in_worker() { - // Load the Wasm file by awaiting the Promise returned by `wasm_bindgen`. - await wasm_bindgen('./pkg/wasm_in_web_worker_bg.wasm'); + // Load the Wasm file. + await init(); // Create a new object of the `NumberEval` struct. var num_eval = NumberEval.new(); diff --git a/guide/src/examples/wasm-in-web-worker.md b/guide/src/examples/wasm-in-web-worker.md index 67dca9fe251..4392bc66f78 100644 --- a/guide/src/examples/wasm-in-web-worker.md +++ b/guide/src/examples/wasm-in-web-worker.md @@ -8,13 +8,6 @@ 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