WebAssembly with Web Worker

本文目的是將 WebAssembly 的執行部分交給 Web Worker 執行進而達到 main thread 的 UI 運作順暢，範例將由上一篇 Rust + WebAssembly 的範例做改版。

範例原始碼 rust-wasm-crypto-demo (webworker branch)

workerize-loader

workerize-loader 除了實作輕量的 RPC (Remote Process Call)implementation 外還能在 worker 裡面使用 async await feature, 整合上也幾乎無痛引入。

loader 設定流程：

1. 安裝 loader: yarn add workerize-loader --dev
2. 增加 loader 設定針對 .worker.js 檔案做相關處理。

webpack.cofig.js

Webpack globalObject 設定

因為 webpack v4 預設編譯將模塊綁至 window object, 所以在 output 需增加設定 globalObject: ‘this’ . 此設定是避免因為 worker 無法取得 DOM reference 的 window is undefined 錯誤。

撰寫 worker

因為原本透過 wasm-bindgen 設定的 wasm (rust) -> call js function 的綁定是在 window object, 移至 worker 以後則將綁定函數移至 worker 環境的 self function. 被 trigger 的 self function 再透過 worker.postMessage 轉發出去。

socket.worker.js

使用 worker

建立 worker 後監聽 message event 拿到從 wasm -> worker 一路轉發的資料。

WasmSocket.js

範例原始碼 rust-wasm-crypto-demo (webworker branch)