[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;
            });
时间: 2024-11-05 16:02:27

[WASM] Call a JavaScript Function from WebAssembly的相关文章

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

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. First let's create a function in js: con

javascript function对象

<html> <body> <script type="text/javascript"> Function.prototype.get_my_name = function(){ return this; }; var func = function(){ this.my_name = 'function name'; } console.log(func.get_my_name()); console.log(func.my_name);//想明

详解Javascript Function陷阱

Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装.继承等,也可以让代码得到复用.但事物都有两面性,Javascript函数有的时候也比较“任性”,你如果不了解它的“性情”,它很可能给你制造出一些意想不到的麻烦(bugs)出来. Javascript Function有两种类型: 1)函数声明(Function Declaration); // 函数声明 function funDeclaration(type){

【转】onclick事件与href=&#39;javascript:function()&#39;的区别

href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:function()' 这样的写法,因为 href 属性里面设置了js代码后,在某些浏览器下可能会引发其他不必要的事件.造成非预期效果. 而且 onclick事件会比 href属性先执行,所以会先触发 onclick 然后触发href,所以如果不想页面跳转,可以设置 onclick里面的js代码执行到最后

javascript (function(){})() 【转】

代码如下: (function(){ //这里忽略jQuery所有实现 })(); (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也像其他人一样很兴奋地想看看源码是什么样 的.然而,在看到源码的第一眼,我就迷糊了.为什么只有一个匿 名函数又没看到运行(当然是运行了……),就能有jQuery这么个函数库了?于是,我抱着疑问来到CSDN.结果相信现在很多人都很清楚了(因为在我之 后也不乏来者,呵呵~).当一个匿名函数被括起来,然后再在后面

JavaScript function函数种类(转)

转自:http://www.cnblogs.com/polk6/p/3284839.html JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通函数:介绍普通函数的特性:同名覆盖.arguments对象.默认返回值等. 2. 匿名函数:介绍匿名函数的特性:变量匿名函数.无名称匿名函数. 3. 闭包函数:介绍闭包函数的特性. 1. 普通函数 1.1 示例 1 2 3 function ShowName(name) {     alert(na

JavaScript function函数种类

原文:JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. var n1 = 1; function add(value1) { return n1 + 1; } alert(add(n1));//调用

[JavaScript]function expression(函数陈述式) VS declaration (函数运算式)

摘要:[JavaScript]function expression(函数陈述式) VS declaration (函数运算式) 先前写过一篇[Javascript]Call method(调用函数)关于函数声明,这边进阶一下做一个比较. 但在开始前, 先来回忆一下如何自定一个JS函数 How to create JS custom function 第一种 - declaration (函数运算式) function callTest(){ console.log(123); } callTe

深入理解 JavaScript Function

1.Function Arguments JavaScript 函数的参数 类型可以是 复杂类型如  Object or Array 和简单类型 String Integer null undefined;当参数是 复杂类型的时候,将会把 复杂类型的 引用传出 函数体内,也就是传入函数内的不是 复杂类型的副本,而是其在内存中的指针.当参数是 简单类型的时候,就会直接传值进入函数体内.look the below demostrated: var obj={name:'joe'}; (functi