Feat/multithread

.cargo/config

@@ -1,2 +1,8 @@
 [target.'cfg(not(target_arch = "wasm32"))']
 rustflags = ["-C", "target-cpu=native"]
+
+[target.wasm32-unknown-unknown]
+rustflags = ["-C", "target-feature=+atomics,+bulk-memory,+mutable-globals"]
+
+[unstable]
+build-std = ["panic_abort", "std"]

rust-toolchain

@@ -0,0 +1 @@
+nightly-2022-12-12

wasm/Cargo.toml

@@ -62,12 +62,23 @@ default-features = false
 version = "0.2"
 features = [ "serde-serialize" ]
 
+# [dependencies.wasm-bindgen-rayon]
+# version = "1.0"
+
 [dependencies.js-sys]
 version = "0.3"
 
 [dependencies.web-sys]
 version = "0.3"
-features = ["console"]
+features = [
+    'console',
+    'Document',
+    'HtmlElement',
+    'HtmlInputElement',
+    'MessageEvent',
+    'Window',
+    'Worker',
+]
 
 [dependencies.console_error_panic_hook]
 version = "0.1.7"
@@ -80,4 +91,7 @@ opt-level = 3
 lto = true
 
 [package.metadata.wasm-pack.profile.release]
-wasm-opt = ["-O4", "--fast-math"]
+wasm-opt = ["-O4"]
+
+# [features]
+# thread_local_internals = [ ]

wasm/src/lib.rs

@@ -15,6 +15,7 @@
 // along with the Aleo library. If not, see <https://www.gnu.org/licenses/>.
 
 pub mod account;
+
 pub use account::*;
 
 pub mod record;
@@ -25,3 +26,76 @@ pub use program::*;
 
 pub(crate) mod types;
 pub(crate) use types::*;
+
+// Messing with WebWorkers
+use std::cell::RefCell;
+use std::rc::Rc;
+use wasm_bindgen::prelude::*;
+use web_sys::{console, HtmlElement, HtmlInputElement, MessageEvent, Worker};
+
+#[wasm_bindgen(module = "./testworker.js")]
+extern "C" {
+    // #[wasm_bindgen(js_name = startWorker)]
+    fn start_workers(module: JsValue) -> Promise;
+}
+
+#[wasm_bindgen]
+pub unsafe fn start_up_worker() {
+    let worker_handle = Rc::new(RefCell::new(Worker::new("./testworker.js").unwrap()));
+    console::log_1(&"Created a new worker from within WASM".into());
+
+    setup_input_oninput_callback(worker_handle.clone());
+}
+
+unsafe fn setup_input_oninput_callback(worker: Rc<RefCell<web_sys::Worker>>) {
+    console::log_1(&"before create document".into());
+    let document = web_sys::window().unwrap().document().unwrap();
+
+    // If our `onmessage` callback should stay valid after exiting from the
+    // `oninput` closure scope, we need to either forget it (so it is not
+    // destroyed) or store it somewhere. To avoid leaking memory every time we
+    // want to receive a response from the worker, we move a handle into the
+    // `oninput` closure to which we will always attach the last `onmessage`
+    // callback. The initial value will not be used and we silence the warning.
+    #[allow(unused_assignments)]
+    let mut persistent_callback_handle = get_on_msg_callback();
+
+    console::log_1(&"before create callback".into());
+    let callback = Closure::new(move |number: MessageEvent| {
+        console::log_1(&"oninput callback triggered".into());
+
+        // Access worker behind shared handle, following the interior
+        // mutability pattern.
+        let worker_handle = &*worker.borrow();
+        let _ = worker_handle.post_message(&number.into());
+        persistent_callback_handle = get_on_msg_callback();
+
+        // Since the worker returns the message asynchronously, we
+        // attach a callback to be triggered when the worker returns.
+        worker_handle
+            .set_onmessage(Some(persistent_callback_handle.as_ref().unchecked_ref()));
+    });
+
+    // Attach the closure as `oninput` callback to the input field.
+    console::log_1(&"before create input listener".into());
+    document
+        .get_element_by_id("inputNumber")
+        .expect("#inputNumber should exist")
+        .dyn_ref::<HtmlInputElement>()
+        .expect("#inputNumber should be a HtmlInputElement")
+        .set_oninput(Some(callback.as_ref().unchecked_ref()));
+
+    // Leaks memory.
+    console::log_1(&"before callback forget".into());
+    callback.forget();
+}
+
+unsafe fn get_on_msg_callback() -> Closure<dyn FnMut(MessageEvent)> {
+    let callback = Closure::new(move |event: MessageEvent| {
+        console::log_2(&"Received response: ".into(), &event.data().into());
+
+        console::log_1(&event.data().as_string().into());
+    });
+
+    callback
+}

wasm/src/testworker.js

@@ -0,0 +1,25 @@
+// 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/aleo_wasm.js');
+
+console.log('Initializing worker');
+
+async function init_wasm_in_worker() {
+    // Load the wasm file by awaiting the Promise returned by `wasm_bindgen`.
+    await wasm_bindgen('./pkg/aleo_wasm_bg.wasm');
+
+    // Set callback to handle messages passed to the worker.
+    self.onmessage = async event => {
+        // By using methods of a struct as reaction to messages passed to the
+        // worker, we can preserve our state between messages.
+        console.log(event);
+        console.log(event.data);
+
+        // Send response back to be handled by callback in main thread.
+        // A simple pass through
+        self.postMessage(event.data);
+    };
+};
+
+init_wasm_in_worker();

website/package.json

@@ -32,7 +32,8 @@
     "webpack-dev-server": "^4.7.4"
   },
   "scripts": {
-    "start": "yarn upgrade @aleohq/wasm && webpack-dev-server",
+    "build-wasm": "cd ../wasm && wasm-pack build --debug --target web",
+    "start": "yarn build-wasm && yarn upgrade @aleohq/wasm && webpack-dev-server",
     "build": "webpack --config webpack.config.js",
     "predeploy": "yarn build",
     "deploy": "gh-pages -d build",

website/src/App.js

@@ -8,11 +8,12 @@ import {DecryptRecord} from "./tabs/record/DecryptRecord";
 import {GetBlockByHeight} from "./tabs/rest/GetBlockByHeight";
 import {GetBlockByHash} from "./tabs/rest/GetBlockByHash";
 import { SendCredits } from './tabs/transaction/SendCredits';
+import { WasmWorkers } from './tabs/transaction/WasmWorkers';
 
 const {Header, Content, Footer} = Layout;
 
 function App() {
-    const [menuIndex, setMenuIndex] = useState(3);
+    const [menuIndex, setMenuIndex] = useState(4);
 
     return (
         <Layout className="layout" style={{minHeight: '100vh'}}>
@@ -23,6 +24,7 @@ function App() {
                     <Menu.Item key="2" onClick={() => setMenuIndex(1)}>Record</Menu.Item>
                     <Menu.Item key="3" onClick={() => setMenuIndex(2)}>REST API</Menu.Item>
                     <Menu.Item key="4" onClick={() => setMenuIndex(3)}>Send Credits</Menu.Item>
+                    <Menu.Item key="5" onClick={() => setMenuIndex(4)}>Play With Wasm Workers</Menu.Item>
                 </Menu>
             </Header>
             <Content style={{padding: '50px 50px'}}>
@@ -54,6 +56,12 @@ function App() {
                         <SendCredits/>
                     </>
                 }
+                {
+                    menuIndex === 4 &&
+                    <>
+                        <WasmWorkers/>
+                    </>
+                }
             </Content>
             <Footer style={{textAlign: 'center'}}>Visit the <a href="https://github.com/AleoHQ/aleo">Aleo Github
                 repo</a>.</Footer>

website/src/tabs/transaction/WasmWorkers.js

@@ -0,0 +1,33 @@
+import React, {useState, useEffect} from "react";
+import {Card, Divider, Form, Input, Button } from "antd";
+const { TextArea } = Input;
+import {useAleoWASM} from "../../aleo-wasm-hook";
+import {downloadAndStoreFiles, getSavedFile} from '../../db';
+import init, * as aleo from '@aleohq/wasm';
+
+await init();
+
+export const WasmWorkers = () => {
+    const aleo = useAleoWASM();
+    const layout = {labelCol: {span: 4}, wrapperCol: {span: 21}};
+
+    useEffect(async () => {
+        await init();
+        aleo.start_up_worker();
+    });
+
+    if (aleo !== null) {
+        return <Card title="Wasm Worker" style={{width: "100%", borderRadius: "20px"}} bordered={false}>
+            <Form {...layout}>
+                <Form.Item label="Number" colon={false}>
+                    <Input id="inputNumber" name="number" size="large" placeholder="Input a number" allowClear
+                          style={{borderRadius: '20px'}}/>
+                </Form.Item>
+            </Form>
+        </Card>
+    } else {
+        return <h3>
+            <center>Loading...</center>
+        </h3>
+    }
+}

website/src/workers/worker.js

@@ -1,22 +1,24 @@
-import "babel-polyfill";
+import init, * as aleo from '@aleohq/wasm';
 
-import("@aleohq/wasm").then(aleo => {
-  self.addEventListener("message", ev => {
-    const {privateKey, transferProverBytes, toAddress, amount, plaintext} = ev.data;
-    console.log('Web worker: Started Transfer...');
-    console.log(ev.data);
-    let startTime = performance.now();
-    const pK = aleo.PrivateKey.from_string(privateKey);
-    const provingKey = aleo.ProvingKey.from_bytes(transferProverBytes);
-    console.log(`Web worker: Deserialized proving key Completed: ${performance.now() - startTime} ms`);
-    startTime = performance.now();
-    const address = aleo.Address.from_string(toAddress);
-    const rec = aleo.RecordPlaintext.fromString(plaintext);
+await init();
 
-    startTime = performance.now();
-    const result = aleo.TransactionBuilder.build_transfer_full(pK, provingKey, address, BigInt(amount), rec);
-    console.log(`Web worker: Transaction Completed: ${performance.now() - startTime} ms`);
-    console.log(result);
-    self.postMessage({ transaction: result });
-  });
+// await aleo.initThreadPool(navigator.hardwareConcurrency);
+
+self.addEventListener("message", ev => {
+  const {privateKey, transferProverBytes, toAddress, amount, plaintext} = ev.data;
+  console.log('Web worker: Started Transfer...');
+  console.log(ev.data);
+  let startTime = performance.now();
+  const pK = aleo.PrivateKey.from_string(privateKey);
+  const provingKey = aleo.ProvingKey.from_bytes(transferProverBytes);
+  console.log(`Web worker: Deserialized proving key Completed: ${performance.now() - startTime} ms`);
+  startTime = performance.now();
+  const address = aleo.Address.from_string(toAddress);
+  const rec = aleo.RecordPlaintext.fromString(plaintext);
+
+  startTime = performance.now();
+  const result = aleo.TransactionBuilder.build_transfer_full(pK, provingKey, address, BigInt(amount), rec);
+  console.log(`Web worker: Transaction Completed: ${performance.now() - startTime} ms`);
+  console.log(result);
+  self.postMessage({ transaction: result });
 });

website/webpack.config.js

@@ -13,6 +13,10 @@ const appConfig = {
     },
     devServer: {
         port: 3000,
+        headers: {
+            'Cross-Origin-Opener-Policy': 'same-origin',
+            'Cross-Origin-Embedder-Policy': 'require-corp'
+        },
     },
     module: {
         rules: [
@@ -35,7 +39,9 @@ const appConfig = {
         maxAssetSize: 8388608
     },
     experiments: {
-        asyncWebAssembly: true
+        syncWebAssembly: true,
+        asyncWebAssembly: true,
+        topLevelAwait: true
     },
     devtool: 'source-map',
 }
@@ -44,6 +50,12 @@ const workerConfig = {
     mode: 'development',
     entry: "./src/workers/worker.js",
     target: "webworker",
+    // plugins: [
+    //     new WasmPackPlugin({
+    //         crateDirectory: path.resolve(__dirname, "../wasm"),
+    //         extraArgs: '--target web'
+    //     })
+    // ],
     resolve: {
         extensions: [".js", ".wasm"]
     },
@@ -52,7 +64,9 @@ const workerConfig = {
         filename: "worker.js"
     },
     experiments: {
-        asyncWebAssembly: true
+        syncWebAssembly: true,
+        asyncWebAssembly: true,
+        topLevelAwait: true
     },
     devtool: 'source-map',
 };