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
[00:00] When writing WebAssembly, one of the issues we hit is with debugging workflows. We can actually get this raw WebAssembly format in the browser console and step through it, but it's often not very useful for finding a problem.
[00:12] Source maps will be coming, but in the meantime, we unfortunately have to step back to some of the old JavaScript tricks. To debug this get_square_root function, what I'm going to do is create a console.log function that I can call. For example, if I wanted to know what inputs this function was getting, I want to just log that number.
[00:31] The way we can create a console.log function is by calling this function that actually exists in JavaScript. We define the shape of this function in C and treat it as an external function. It has no return value, so it's a void. Then the input value is going to be a float number.
[00:50] We're going to just define that signature. When we build our WebAssembly, we'll see that this function is automatically treated as an external and it becomes available as an input within our module. It's importing console.log from a module called environment.
[01:07] This is just a default module namespace name for the externals of a C code compilation process. In our instantiation code here, we've got this wasm import object going into the instance creation. I'm going to change this to be a direct object literal and set that environment value to contain a console.log.
[01:32] Normally, we'd set this to the console.log function, but because I'm in WasmFiddle, I want to use the WasmFiddle log function, which is just called log. We can now execute this code, and we can see the input value logged before we log the output value.
[01:47] We're running a JavaScript function directly from within WebAssembly. To quickly go through loading the same workflow in our local application, I'm going to download the WebAssembly binary. Switching into the local application, I'm first going to include our wasm helper. Using this helper, I'm going to fetch the program.wasm file that we located in the project folder.
[02:09] The optional second argument to this helper is the imports object. This is where we can set that environment module. I'm going to set the console.log function of the environment module, this time just to be the direct console.log function in the browser. The promise we get back for this fetchAndInstantiate call is our executed WebAssembly module with the exports available on the objects.
[02:34] I can now call the get_square_root function directly with any input value. If I log the output as well, we should see both the input and the output being logged in the browser.