Los pasos a continuación fueron probados en Ubuntu, también son aplicables a otros sistemas operativos basados en este. Los pasos que hacen uso de la terminal fueron ejecutados desde una misma sesión (de terminal).
Pasos
Paso 1: Instalación de emscripten:
# Ubicarse en una carpeta donde desee proceder con la instalación
cd Documents
# Descargar codigo fuente de Emscripten (emsdk repo)
git clone https://github.com/emscripten-core/emsdk.git
# Entrar al directorio
cd emsdk
# Descargar e instalar lo más reciente del SDK tools.
./emsdk install latest
# Construir el "latest" SDK y "active" para el usuario actual. (escribe el archivo ~/.emscripten)
./emsdk activate latest
# Activar el PATH y otras variables de entorno en la terminal actual
source ./emsdk_env.shPaso 2: Escribir código C
A continuación, creamos la función myFunction que mostrará un mensaje y retornará el argumento numérico argc multiplicado por 2./// main.c
#include <stdio.h>
#include <stdlib.h>
#include <emscripten/emscripten.h>
int main(int argc, char ** argv) {
printf("WebAssembly module loadedn");
return 0;
}
#ifdef __cplusplus
extern "C" {
#endif
int EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) {
printf("MyFunction Called");
return argc * 2;
}
#ifdef __cplusplus
}
#endifNotas:
- La librería emscripten/emscripten.h estará disponible una vez se ha completado el paso 1.
- La etiqueta EMSCRIPTEN_KEEPALIVE hace que la función myFunction esté disponible en JavaScript después de la compilación.
Paso 3: Compilar C en WASM
emcc main.c -O3 -o index.js -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"- El comando toma main.c como archivo de entrada y genera el archivo index.js.
- El archivo index.js expone la función ccall que será usada posteriormente para ejecutar myFunction.
- El comando genera otro archivo llamado index.wasm el cual contiene todo el código compilado.
Paso 4: Cargar código compilado en el navegador.
PASO 4.1: CREAR ARCHIVO MAIN.HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WebAssembly Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button id="myFunc">Call myFunction</button>
<!-- Include the JavaScript glue code. -->
<!-- This will load the WebAssembly module and run its main. -->
<script async src="index.js"></script>
<script>
document.getElementById('myFunc').addEventListener('click', function(ev) {
var result = Module.ccall(
'myFunction', // name of C function
'number', // return type
['number'], // argument types
[42]); // arguments
console.log('Result:', result);
});
</script>
</body>
</html>PASO 4.2: MONTAR SERVIDOR LOCAL
Este paso es opcional si ya dispones de alguna herramienta para montar un servidor local.1. Instalar el paquete global local-web-server de npm.
npm i local-web-server -gmodule.exports = {
mime: {
'application/wasm': ['wasm']
}
};ws
# Muestra algo como: Listening on http://david:8000, http://127.0.0.1:80005. Abrir la ventana de desarrollo del navegador web (F12) y entrar a la pestaña “Console”. Luego, dentro de la pagina web debes presionar el botón “Call myFunction”, en la consola aparecerá un mensaje con el resultado de nuestra función myFunction => Result: 84.
Finalmente podemos entender todo el flujo de ejecución de WASM así:
