WebAssembly - Vinculación dinámica
La vinculación dinámica es el proceso en el que dos o más módulos se vincularán durante el tiempo de ejecución.
Para demostrar cómo funciona el enlace dinámico, usaremos el programa C y lo compilaremos en wasm usando Ecmascript sdk.
Así que aquí tenemos
test1.c
int test1(){
return 100;
}
test2.c
int test2(){
return 200;
}
main.c
#include <stdio.h>
int test1();
int test2();
int main() {
int result = test1() + test2();
return result;
}
En el código main.c, hace uso de test1 () y test2 (), que se definen dentro de test1.cy test2.c. Veamos cómo vincular estos módulos en WebAssembly.
El comando para compilar el código anterior es el siguiente: utilice SIDE_MODULE = 1 para la vinculación dinámica como se muestra en el comando.
emcc test1.c test2.c main.c -s SIDE_MODULE=1 -o maintest.wasm
Usando WasmtoWat, que está disponible en https://webassembly.github.io/wabt/demo/wasm2wat/, obtendrá el formato de texto de WebAssembly de maintest.wasm.
(module
(type $t0 (func (result i32))) (type $t1 (func))
(type $t2 (func (param i32))) (type $t3 (func (param i32 i32) (result i32)))
(import "env" "stackSave" (func $env.stackSave (type $t0)))
(import "env" "stackRestore" (func $env.stackRestore (type $t2)))
(import "env" "__memory_base" (global $env.__memory_base i32))
(import "env" "__table_base" (global $env.__table_base i32))
(import "env" "memory" (memory $env.memory 0))
(import "env" "table" (table $env.table 0 funcref))
(func $f2 (type $t1)
(call $__wasm_apply_relocs)
)
(func $__wasm_apply_relocs (export "__wasm_apply_relocs") (type $t1))
(func $test1 (export "test1") (type $t0) (result i32)
(local $l0 i32)
(local.set $l0
(i32.const 100)
)
(return
(local.get $l0)
)
)
(func $test2 (export "test2") (type $t0) (result i32)
(local $l0 i32)
(local.set $l0
(i32.const 200))
(return
(local.get $l0)
)
)
(func $__original_main
(export "__original_main")
(type $t0)
(result i32)
(local $l0 i32)
(local $l1 i32)
(local $l2 i32)
(local $l3 i32)
(local $l4 i32)
(local $l5 i32)
(local $l6 i32)
(local $l7 i32)
(local $l8 i32)
(local $l9 i32)
(local.set $l0(call $env.stackSave))
(local.set $l1 (i32.const 16))
(local.set $l2 (i32.sub (local.get $l0) (local.get $l1)))
(call $env.stackRestore (local.get $l2) ) (local.set $l3(i32.const 0))
(i32.store offset=12 (local.get $l2) (local.get $l3))
(local.set $l4 (call $test1))
(local.set $l5 (call $test2))
(local.set $l6 (i32.add (local.get $l4) (local.get $l5)))
(i32.store offset=8 (local.get $l2) (local.get $l6))
(local.set $l7 (i32.load offset=8 (local.get $l2)))
(local.set $l8 (i32.const 16))
(local.set $l9 (i32.add (local.get $l2) (local.get $l8)))
(call $env.stackRestore (local.get $l9)) (return(local.get $l7))
)
(func $main
(export "main")
(type $t3)
(param $p0 i32)
(param $p1 i32)
(result i32)
(local $l2 i32)
(local.set $l2
(call $__original_main))
(return (local.get $l2))
)
(func $__post_instantiate (export "__post_instantiate") (type $t1) (call $f2))
(global $__dso_handle (export "__dso_handle") i32 (i32.const 0))
)
El formato de texto de WebAssembly tiene algunas importaciones definidas como se muestra a continuación:
(import "env" "stackSave" (func $env.stackSave (type $t0)))
(import "env" "stackRestore" (func $env.stackRestore (type $t2)))
(import "env" "__memory_base" (global $env.__memory_base i32))
(import "env" "__table_base" (global $env.__table_base i32))
(import "env" "memory" (memory $env.memory 0))
(import "env" "table" (table $env.table 0 funcref))
Esto se agrega al compilar el código por emcc (emscripten sdk) y se ocupa de la administración de la memoria en WebAssembly.
Trabajar con importaciones y exportaciones
Ahora, para ver la salida, tendremos que definir las importaciones que puede ver en el código .wat -
(import "env" "stackSave" (func $env.stackSave (type $t0)))
(import "env" "stackRestore" (func $env.stackRestore (type $t2)))
(import "env" "__memory_base" (global $env.__memory_base i32))
(import "env" "__table_base" (global $env.__table_base i32))
(import "env" "memory" (memory $env.memory 0))
(import "env" "table" (table $env.table 0 funcref))
Los términos anteriores se explican de la siguiente manera:
env.stackSave - Se utiliza para la gestión de pilas, una funcionalidad que proporciona el código compilado de emscripten.
env.stackRestore - Se utiliza para la gestión de pilas, una funcionalidad que proporciona el código compilado de emscripten.
env.__memory_base- Es un desplazamiento global i32 inmutable, es decir, utilizado en env.memory y reservado para el módulo wasm. El módulo puede utilizar este global en el inicializador de sus segmentos de datos, para que se carguen en la dirección correcta.
env.__table_base- Es un desplazamiento global i32 inmutable, es decir, utilizado en env.table y reservado para el módulo wasm. El módulo puede usar este global en el inicializador de sus segmentos de elementos de tabla, de modo que se carguen en el desplazamiento correcto.
env.memory - Esto tendrá los detalles de la memoria que se deben compartir entre los módulos wasm.
env.table - Esto tendrá los detalles de la tabla que deben compartirse entre los módulos wasm.
Las importaciones deben definirse en javascript de la siguiente manera:
var wasmMemory = new WebAssembly.Memory({'initial': 256,'maximum': 65536});
const importObj = {
env: {
stackSave: n => 2, stackRestore: n => 3, //abortStackOverflow: () => {
throw new Error('overflow');
},
table: new WebAssembly.Table({
initial: 0, maximum: 65536, element: 'anyfunc'
}), __table_base: 0,
memory: wasmMemory, __memory_base: 256
}
};
Ejemplo
A continuación se muestra el código javascript que hace uso de importObj dentro de WebAssembly.instantiate.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var wasmMemory = new WebAssembly.Memory({'initial': 256,'maximum': 65536});
const importObj = {
env: {
stackSave: n => 2, stackRestore: n => 3, //abortStackOverflow: () => {
throw new Error('overflow');
},
table: new WebAssembly.Table({
initial: 0, maximum: 65536, element: 'anyfunc'
}), __table_base: 0,
memory: wasmMemory, __memory_base: 256
}
};
fetch("maintest.wasm") .then(bytes => bytes.arrayBuffer()) .then(
module => WebAssembly.instantiate(module, importObj)
)
.then(finalcode => {
console.log(finalcode);
console.log(WebAssembly.Module.imports(finalcode.module));
console.log(finalcode.instance.exports.test1());
console.log(finalcode.instance.exports.test2());
console.log(finalcode.instance.exports.main());
});
</script>
</body>
</html>
Salida
La salida es la siguiente: