Calling a C style function pointer in a WebAssembly from JavaScript

Question

Is there any way to get access to function pointers living inside a WebAssembly module?

For example, given the following "module" compiled to WebAssembly:

extern void set_callback(void (*callback)(void *arg), void *arg);

static void callback(void *arg)
{
  /* ... */
}

int main() {
  set_callback(&callback, 0);
  return 0;
}

Can an implementation of do_callback in JavaScript invoke the callback without having to rely on an intermediary C function export to do the actual function call?

var instance = new WebAssembly.Instance(module, {
  memory: /* ... */
  env: {
    set_callback: function set_callback(callbackptr, argptr) {
      // We only got the pointer, is there any  
    },
  },
});

By intermediary function export, I mean that I could add an internal function with public visibility.

do_callback(void (*callback)(void *arg), void *arg)
{
  callback();
}

Then the JavaScript set_callback function can call the function pointer via the delegate do_callback function.

function set_callback(callbackptr, argptr) {
  instance.exports.do_callback(callbackptr, argptr);
}

But, it's preferable to do this without having to go through that explicit indirection, is it possible, with function tables maybe?

Ghillie · Accepted Answer · 2017-08-01 03:59:10Z

4

+250

You can invoke function pointers from Javascript.

Function pointers are stored in a Table. When a function pointer is passed to Javascript you are receiving the integer index into the table for that function pointer. Pass that index to Table.prototype.get() and you can call the function.

...

set_callback: function set_callback(callbackptr, argptr) {
  tbl.get(callbackptr)(argptr);
},

...

You can read more about this on this MDN page under the Tables section: https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API#Tables

Edit: Here is the minimal example I used to test this.

The first file is fptr.c compiled with emcc fptr.c -Os -s WASM=1 -s SIDE_MODULE=1 -o fptr.wasm

typedef int (*fptr_type)(void);

extern void pass_fptr_to_js(fptr_type fptr);

static int callback_0(void)
{
    return 26;
}

static int callback_1(void)
{
    return 42;
}

void run_test()
{
    pass_fptr_to_js(callback_0);
    pass_fptr_to_js(callback_1);
}

And here is fptr.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebAssembly Experiment</title>
</head>
<body>
    <h3>Check the console.</h3>
    <script type="text/javascript">
        fetch('fptr.wasm').then(function(response) {
            response.arrayBuffer().then(function(buffer) {
                WebAssembly.compile(buffer).then(function(module) {
                    var imports = {};

                    imports.env = {};

                    imports.env.memoryBase = 0;
                    imports.env.memory = new WebAssembly.Memory({ initial: 256 });
                    imports.env.tableBase = 0;
                    imports.env.table = new WebAssembly.Table({ initial: 4, element: 'anyfunc' });

                    imports.env["abort"] = function() {
                        console.error("ABORT");
                    };

                    imports.env["_pass_fptr_to_js"] = function(fptr) {
                        console.log("table index: " + fptr + ", return value: " + imports.env.table.get(fptr)());
                    };

                    WebAssembly.instantiate(module, imports).then(function(instance) {
                        instance.exports["__post_instantiate"]();
                        instance.exports["_run_test"]();
                    });
                });
            });
        });
    </script>
</body>
</html>

edited Aug 1, 2017 at 3:59

answered Jul 31, 2017 at 21:28

Ghillie

9095 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ghillie Over a year ago

@CasperBeyer I've edited my post to include the working example I used to test this.

Casper Beyer Over a year ago

How would I get clang to generate imports for table and memory without Emscripten? Do it at the linker level? e.g wasm-link with an "empty" module containing the imports?

MB-F Over a year ago

@CasperBeyer This sounds like a new unrelated question. If you post it as such it will have more visibility.

Casper Beyer · Accepted Answer · 2018-05-09 02:59:07Z

0

The issue back then was that Clang basically did not implement call_indirect and did not actually populate the function table with anything during code generation.

Has been resolved in the current version of LLVM.

edited May 9, 2018 at 2:59

answered Apr 15, 2018 at 4:40

Casper Beyer

2,3212 gold badges24 silver badges36 bronze badges

2 Comments

Megamind Over a year ago

Are you sure? I get RangeError: WebAssembly.Table.get(): invalid index 184300 into funcref table of size 2000

Casper Beyer Over a year ago

This is ages ago, but yes it did get resolved.

Hipreme · Accepted Answer · 2023-01-10 18:33:33Z

For some reason, the table approach is not working for me, so I did in the opposite direction: I implemented a function table in my source language (D).

This way, I can make it work by passing handles to javascript:

__gshared ubyte* function(ubyte* args)[] _annonymousFunctionTable;
extern(C) size_t _getFuncAddress(ubyte* fn);
export extern(C) ubyte* __callDFunction(size_t addr, ubyte* args)
{
return _annonymousFunctionTable[addr](args);
}

I don't call directly _getFuncAddress here because there is another way of sending functions I did for D for argument count and type checking.

This way, I can call any function I would like with how many arguments which I want without depending on the wasm implementation.

Collectives™ on Stack Overflow

Calling a C style function pointer in a WebAssembly from JavaScript

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related