WebAssembly - Dynamic Linking
A vinculação dinâmica é o processo no qual dois ou mais módulos serão vinculados durante a execução.
Para demonstrar como funciona a vinculação dinâmica, vamos usar o programa C e compilá-lo para wasm usando Ecmascript sdk.
Então aqui temos -
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;
}
No código main.c, ele usa test1 () e test2 (), que são definidos em test1.ce test2.c. Vamos verificar como vincular esses módulos no WebAssembly.
O comando para compilar o código acima é o seguinte: use SIDE_MODULE = 1 para vinculação dinâmica, conforme mostrado no comando.
emcc test1.c test2.c main.c -s SIDE_MODULE=1 -o maintest.wasm
Usando WasmtoWat, que está disponível em https://webassembly.github.io/wabt/demo/wasm2wat/, obterá o formato de texto 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))
)
O formato de texto WebAssembly tem algumas importações definidas conforme mostrado abaixo -
(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))
Isso é adicionado durante a compilação do código por emcc (emscripten sdk) e lida com o gerenciamento de memória no WebAssembly.
Trabalho com Importações e Exportações
Agora, para ver a saída, teremos que definir as importações que você pode ver no 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))
Os termos acima são explicados da seguinte forma -
env.stackSave - É usado para gerenciamento de pilha, uma funcionalidade fornecida pelo código compilado emscripten.
env.stackRestore - É usado para gerenciamento de pilha, uma funcionalidade fornecida pelo código compilado emscripten.
env.__memory_base- É um deslocamento global i32 imutável, ou seja, usado em env.memory e reservado para o módulo wasm. O módulo pode utilizar este global no inicializador de seus segmentos de dados, para que sejam carregados no endereço correto.
env.__table_base- É um deslocamento global i32 imutável, ou seja, usado em env.table e reservado para o módulo wasm. O módulo pode usar este global no inicializador de seus segmentos de elementos de tabela, para que sejam carregados no deslocamento correto.
env.memory - Isso terá os detalhes da memória que devem ser compartilhados entre os módulos wasm.
env.table - Isso terá os detalhes da tabela que devem ser compartilhados entre os módulos wasm.
As importações devem ser definidas em javascript da seguinte forma -
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
}
};
Exemplo
A seguir está o código javascript que usa 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>
Resultado
O resultado é o seguinte -