Wasm Builders 🧱

Cover image for Calling a C function from JavaScript Code
Ajay Kumar
Ajay Kumar

Posted on • Updated on

Calling a C function from JavaScript Code

When we want to call a custom function we need specify an Exported function while compiling with emscripten, also when we will be doing so, we need to specify the main function too otherwise it will be eliminated as dead code. Export it if you want main() to run.

Reading String return from C function
When we call a C function let _greetX() then a pointer to that message/string is being returned, to read that Memory location it provides an inbuild function called ccall().

Passing arguments string/number using ccall
When we call _greetX function it returns a pointer to a Memory location, and when we pass a parameter to it, it simply ignores it. To pass string/number as a parameter we can use ccall as such:

ccall('Function Name', 'Return Type', ['Parameter Type'], [Parameter])

For the argument of string type: ccall('greetX', 'string', ['string'], ['stringParameter'])
For the argument of number type: ccall('wCount', 'number', ['number'], [1])
Enter fullscreen mode Exit fullscreen mode

Wrapping a function using cwrap
As we can see that whenever we need to call a function i.e. greetX with some parameter we need to specify the return type, parameter type, etc, so to make it easier we can use function cwrap which will wrap it up, and we can use it for a normal function calling.

const wGreet = cwrap('greetX', 'string', ['string']);

wGreet('String Parameter');
Enter fullscreen mode Exit fullscreen mode

Command to Export function is as such:

emcc forLoop.c -s WASM=1 -s EXPORTED_FUNCTIONS='['_wCount', '_main', '_greetX']'  -o forLoop.js
Enter fullscreen mode Exit fullscreen mode

It will export wcount and main function specified in our c code and a wasm file which will have all our logic and a js file which is a glue code to help load wasm to the browser, where we need to include only js file to our HTML file.

Serving files
To start the inbuilt server provided by Emscripten itself used this command:

emrun --no_browser --port 8080 index.html
Enter fullscreen mode Exit fullscreen mode

The code for this tutorial can be found Here

Next we will see how to optimize js and wasm file created by Emscripten

Top comments (0)