So far, we have taken a look at writing the low-level instruction language of WebAssembly. While this can be a fun exercise to take on, most of our projects will be much grander in scale and we will want to utilize a high-level language to accomplish our goals. While there are languages out there that will compile to WebAssembly that are similar to JavaScript (https://github.com/AssemblyScript/assemblyscript), a good chunk of modules will be written while utilizing system languages such as C, C++, or Rust. In this section, we will take a look at writing C/C++ code for the browser.
For us to begin our C/C++ writing adventure, we will need to grab the Emscripten SDK to compile to WebAssembly. This can be found at https://emscripten.org/index.html. We will mostly be following the Getting started guide that Emscripten provides. Follow these steps:
- First, we will clone the Emscripten SDK by running the following command:
> git clone https://github.com/emscripten-core/emsdk.git
- Head into the directory by using the following command:
> cd emsdk
- Pull the latest changes and the following commands:
> git pull
> emsdk latest install
> emsdk activate latest
> emsdk_env.bat
Now that we have the preceding commands to aid us, we are ready to start writing C and C++ for the web! Let's go ahead and start with an easy module:
#include <stdio.h>
int main() {
printf("Hello, World! ");
return 0;
}
This basic C program is everybody's favorite Hello World program. To compile this program, go ahead and run the following command:
> emcc hello_world.c
If everything has been installed correctly, we should get the following two files:
- a.out.wasm
- a.out.js
With these two files, we can utilize an index.html file and load them in, like so:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="a.out.js"></script>
</body>
</html>
We should get a printout of Hello World! to our console! Let's go ahead and write another C program, just like the previous WebAssembly program we wrote – FizzBuzz:
#include <stdio.h>
void fizzbuzz(int num) {
for(int i = 1; i <= num; i++) {
if(i%3 == 0) {
printf("Fizz");
}
if(i%5 == 0) {
printf("Buzz");
}
}
printf(" ");
}
If we compile this and try to run it, we will see that nothing is found. The documentation states that it should be on the global Module variable, but if we check there, we will see that there is no fizzbuzz program to be found. Fortunately, Emscripten does dead code analysis for us and noticed that our C program doesn't have a main function and that it doesn't call the fizzbuzz function, so it eliminated it.
To handle this, we can add an argument to our emcc call:
> emcc -s "EXPORTED_FUNCTIONS=['_fizzbuzz']" fizzbuzz.c
With this, we can go into the browser and our developer console and type the following:
Module._fizzbuzz(10);
We should see a printout! We have just compiled our first library function from C that can be used in our JavaScript code. Now, what if we want to try something a little more difficult? What if we want to run a JavaScript function inside our C/C++ code?
To do this, we will have to do the following:
- We will need to put an extern declaration at the top of our file (Emscripten will look in the JS location first, but we can also pass a command-line flag to tell it where else to look):
#include <stdio.h>
extern int add(int, int);
int main() {
printf("%d ", add(100, 200));
return 1;
}
- Next, we will create an external.js file that will house our new function:
mergeInto(LibraryManager.library, {
add: function(x, y) {
return x + y;
}
});
- Now, we can compile our program with the following line of code:
> emcc -s extern.c --js-library external.js
After, we can head back to the browser and see that it prints out 300! Now, we know how to use external JavaScript in our C/C++ programs and we can grab our C/C++ code from the browser.
All this time, we have been overwriting our files, but is there another way for us to handle this? Of course – we can call the emcc system with the emcc -o <file_name.js> flag. Therefore, we can compile our extern.c file and call it extern.js by running the following command:
> emcc --help
Alternatively, we can go to their website: https://emscripten.org/.
Now that we are able to write and compile C code for our browser, we will turn our attention to utilizing this power. Let's implement a hamming code generator that we can utilize in JavaScript that is written in C and can be compiled to WebAssembly.