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