zoukankan      html  css  js  c++  java
  • [WASM] Call a JavaScript Function from WebAssembly

    Using WASM Fiddle, we show how to write a simple number logger function that calls a consoleLog function defined in JavaScript. We then download and run the same function in a local project.

    WASM Fiddle: https://wasdk.github.io/WasmFiddle/?cvrmt

    Demo Repo: https://github.com/guybedford/wasm-intro

    Basiclly WASM is hard to debug, we still need Javascript to help, the way to do debugging is we pass Javascript Console.log function into WASM though "imports".
     
    Defined a C code:
    #include <math.h>
    
    void consoleLog (float num);
    
    float getSqrt (float num) {
      consoleLog(num);
      return sqrt(num);
    }

    Defined a function called "consoleLog".

    After build to wasm:

    (module
      (type $FUNCSIG$vf (func (param f32)))
      (type $FUNCSIG$ff (func (param f32) (result f32)))
      (import "env" "consoleLog" (func $consoleLog (param f32)))
      (table 0 anyfunc)
      (memory $0 1)
      (export "memory" (memory $0))
      (export "getSqrt" (func $getSqrt))
      (func $getSqrt (param $0 f32) (result f32)
        (call $consoleLog
          (get_local $0)
        )
        (f32.sqrt
          (get_local $0)
        )
      )
    )

    It's importing consoleLog from a module called environment.

    This is just a default module namespace name for the externals of a C code compilation process.

    Now on JS side, we need to pass the console.log function from "imports" param:

            function fetchAndInstantiateWasm(url, imports) {
                return fetch(url)
                    .then((res) => {
                        if (res.ok) {
                            return res.arrayBuffer();
                        }
                        throw new Error('Unable to fetch WASM')
                    })
                    .then((bytes) => {
                        return WebAssembly.compile(bytes);
                    })
                    .then(module => {
                        return WebAssembly.instantiate(module, imports || {});
                    })
                    .then(instance => instance.exports);
            }
    
            fetchAndInstantiateWasm('./program.wasm', {
                env: {
                    consoleLog: (num) => console.log(num) 
                }
            })
                .then(m => {
                    window.getSqrt = m.getSqrt;
                });
  • 相关阅读:
    Less与Sass
    JQuery基础
    JS中DOM以及BOM
    JS函数入门
    JS入门
    响应式布局和弹性布局,移动开发常用技巧
    CSS基础1
    H5入门
    error C2143: syntax error : missing ';' before 'type'
    Windows系统下nodejs安装及配置
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7094646.html
Copyright © 2011-2022 走看看