This is an attempt to show off the process of writing a simple function in C, compiling it to WebAssembly, and calling it from both Node.js and the Web browser, as of April 2019.
There's a lot of out of date guides out there, so the goal here is to keep things both as simple as possible and working using the norms of early 2019.
Note: This is aimed at macOS-based users. Everything will be generally fine for Linux users too, but installing a recent version of LLVM/clang (or even Emscripten) is a real minefield unless you know what you're doing.
Another note: Surma has written a fantastic tutorial which goes much deeper into the stuff covered in this repo. I strongly recommend it.
Here's a basic Fibonacci sequence algorithm written in C:
int fib(int n) {
int a = 0, b = 1, c = 0;
for (int i = 1; i <= n; i++) {
c = a + b;
a = b;
b = c;
}
return a;
}
Store that in a file called fib.c
You need to be running the latest version of llvm/clang for the compilation to be relatively straightforward. The version of clang that comes with macOS/Xcode is NOT suitable.
On macOS with homebrew installed, run brew install llvm
You can also download pre-built binaries from here for most operating systems.
Once you have clang
in play, this is how to compile fib.c
to fib.wasm
:
/usr/local/opt/llvm/bin/clang fib.c -o fib.wasm --target=wasm32 -nostdlib -fvisibility=default -Xlinker --no-entry -Xlinker -export-dynamic
You should now have a fib.wasm
file to play with.
@julien has supplied a Makefile
which also runs the above, though note you may need to prefix running make
with a different PATH
if you are using a separate build of clang
like above. For example:
PATH=/usr/local/opt/llvm/bin:$PATH make
Using a recent version of Node (8+):
node node.js
Read the source code for the mechanism involved.
Serve index.html
over HTTP. The easiest way to do this on most systems is:
python -m SimpleHTTPServer 3000
Then navigate to http://localhost:3000/
Read the source code for the mechanism involved and some extra comments on its operation.