[Rust] Pass a JavaScript Function to WebAssembly and Invoke it from Rust

時間 2019-11-29

標籤 rust pass javascript function webassembly invoke 欄目 JavaScript 简体版

原文原文鏈接

In some cases it’s useful to be able to invoke a JavaScript function inside Rust. This session showcases how this can be done, by passing along our JavaScript functions to the WebAssembly module instantiation.html

First let's create a function in js:git

      const appendNumberToBody = (number) => {
        const text = document.createTextNode(number);
        document.body.appendChild(text);
      }

Wrap this function into a single object which contains 'env':github

      const importObject = {
        env: {
          appendNumberToBody: appendNumberToBody
        }
      };

When we load wasm, we can pass in the object:promise

WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)

It return a promise, we can run the exported function return by wasm inside the promise.session

Now we are going to create a function in Rust:app

extern {
    fn appendNumberToBody(x: u32);
}

#[no_mangle]
pub extern fn run() {
    unsafe { // we need to wrap with unsafe if getting the passed in value from third party
        appendNumberToBody(42);
    }
}

We exprot 'run' function, then we can invoke it inside promise:ide

      WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
      .then(wasmModule => {
          wasmModule.instance.exports.run();
        });

---------fetch

Full code: Githubthis

index.html:spa

<!DOCTYPE html>
<html>
  <head>
    <script> 

      // pass the data from Js to Rust
      const appendNumberToBody = (number) => {
        const text = document.createTextNode(number);
        document.body.appendChild(text);
      }

      const importObject = {
        env: {
          appendNumberToBody: appendNumberToBody,
          alert: alert
        }
      };

      WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
      .then(wasmModule => {
          wasmModule.instance.exports.run();
        });
    </script>
  <head>
  <body></body>
<html>

lib.rs:

extern {
    fn appendNumberToBody(x: u32);
    fn alert(x: u32);
}

#[no_mangle]
pub extern fn run() {
    unsafe {
        appendNumberToBody(42);
        alert(33)
    }
}

相關標籤/搜索

rust

javascript...function

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。