码迷,mamicode.com
首页 > 编程语言 > 详细

[WASM] Call a JavaScript Function from WebAssembly

时间:2017-06-29 17:49:23      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:and   ram   nal   res   url   tin   byte   roc   names   

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;
            });

 

[WASM] Call a JavaScript Function from WebAssembly

标签:and   ram   nal   res   url   tin   byte   roc   names   

原文地址:http://www.cnblogs.com/Answer1215/p/7094646.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!