Tool Setup
We need to get emsdk which is Emscripten's tool to get the compiler and all the tools you need. We will focus on how to install it for Linux, but you can find documentation for other OSs here.
It's easy to get Emscripten SDK from github using git.
Step 1:
Clone the emsdk repo : git clone https://github.com/emscripten-core/emsdk.git and enter inside the directory emsdk.
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
Step 2:
Next, we will install the necessary tools like Java, Python using the below command.
./emsdk install latest
Step 3:
To activate the latest SDK, execute the following command in your terminal
./emsdk activate latest
Step 4:
To activate PATH and other environment variables, run the following command in your terminal.
source ./emsdk_env.sh
To permanently add this path for EMSDK, use the below command :
Note : Make sure to give the proper to the emsdk_env.sh file
echo 'source "/home/kali/emsdk/emsdk_env.sh"' >>$HOME/.bashrc
Now the installation of emsdk is completed and you can now compile C code.
The process of compiling C to WebAssembly helps us to understand a basic process of how to use WebAssembly.
- Write code in a language
- Compile to “.wasm“
- Load “.wasm“ in a browser
- Use WebAssembly JavaScript API to compile and instantiate the module
- Call exported WebAssembly functions in JavaScript
Let’s create a simple program like the one below :
#include <stdio.h>
int main() {
printf(" Hello there! You made it to first step towards learning WebAssembly! Cheers!! :) \n ");
return 0;
}
Now, we have to compile it using the below command :
emcc hello.c -o hello.html -s WASM=1
After compilation, if you have tried to open the file hello.html with certain browsers, you may get an error message instead of output that you want.
That is because the operation of loading the WASM module is asynchronous, and some browsers (for security reasons) do not allow you to do this if the URL is of the kind file://path/to/file/file.html
.
In order to solve that issue you can run a local server this way using the below command :
python -m http.server 8080
Go to the browser and type in localhost:8080 or http://127.0.0.1:8080/
Now you should be able to see other three files in the same directory: Hello.html
, Hello.js
and Hello.wasm
.
-
Hello.wasm
is the file that contains the Webassembly code (the compiled code). -
Hello.js
is the "glue code" needed to allow JavaScript to call and "communicate" with the WASM compiled code. Emscripten generates this automatically and it is absolutely needed in order to run WASM modules. If you compile without the-s WASM=1
flag this file will contain also the content of hello.wasm (but makes no difference in reality). -
Hello.html
is just a web page automatically generated that shows the result of your Webassembly code in a user friendly way. You don't actually need this file, but it is a cool way to quickly visualize what are you doing. You can tell Emscripten not to generate it by just using-o Hello.js
instead of-o Hello.html
(everything else remains as before).
Output :
Top comments (0)