WebAssembly - "Hello World"

Neste capítulo, vamos escrever um programa simples em C, convertê-lo em .wasm e executá-lo no navegador para obter o texto "Hello World".

Fará uso da ferramenta wasm explorer que irá converter o programa C para .wasm e fará uso do .wasm dentro do nosso arquivo .html.

A ferramenta Wasm explorer que está disponível em https://mbebenita.github.io/WasmExplorer/ looks as follows −

O código C que vamos usar é o seguinte -

#include <stdio.h>
char *c_hello() {
   return "Hello World"; 
}

Atualize o primeiro bloco no wasm explorer com o código C conforme mostrado abaixo -

Clique no botão COMPILAR para compilar para WASM e WAT e Firefox x86 Web Assembly conforme mostrado abaixo -

Use o DOWNLOAD para obter o arquivo .wasm e salve-o como firstprog.wasm.

Crie um arquivo .html chamado firstprog.html como mostrado abaixo -

<!doctype html>
<html>
   <head>
      <meta charset="utf-8"> 
      <title>WebAssembly Hello World</title> 
   </head> 
   <body>
      <div id="textcontent"></div>     
      <script type="text/javascript"> 
         //Your code from webassembly here
      </script> 
   </body>
</html>

Vamos agora usar firstprog.wasm para ler o helloworld da função C c_hello ().

Passo 1

Use a api fetch () para ler o código firstprog.wasm.

Passo 2

O código .wasm deve ser convertido em arraybuffer usando ArrayBuffer. O objeto ArrayBuffer retornará a você um buffer de dados binários de comprimento fixo.

O código até agora será o seguinte -

<script type="text/javascript"> 
   fetch("firstprog.wasm") .then(bytes => bytes.arrayBuffer()) 
</script>

etapa 3

Os bytes do ArrayBuffer devem ser compilados em um módulo usando WebAssembly.compile(buffer) função.

O código será semelhante a abaixo -

<script type="text/javascript">
   fetch("firstprog.wasm")
   .then(bytes => bytes.arrayBuffer())
   .then(mod => WebAssembly.compile(mod))
</script>

Passo 4

Para obter o módulo, temos que chamar o construtor webassembly.instance conforme mostrado abaixo -

<script type="text/javascript">     
   fetch("firstprog.wasm") 
   .then(bytes => bytes.arrayBuffer())
   .then(mod => WebAssembly.compile(mod))
   .then(module => {return new WebAssembly.Instance(module) }) 
</script>

Etapa 5

Vamos agora consolar a instância para ver os detalhes no navegador.

<script type="text/javascript"> 
   fetch("firstprog.wasm") .then(bytes => bytes.arrayBuffer()) 
   .then(mod => WebAssembly.compile(mod)) .then(module => {
      return new WebAssembly.Instance(module) 
   }) 
   .then(instance => {
      console.log(instance);
   }); 
</script>

Os detalhes do console.log são mostrados abaixo -

Para obter a string “Hello World” da função c_hello (), precisamos adicionar algum código em javascript.

Primeiro, obtenha os detalhes do buffer de memória conforme mostrado abaixo -

let buffer = instance.exports.memory.buffer;;

O valor do buffer deve ser convertido em um array digitado para que possamos ler os valores dele. O buffer contém a string Hello World.

Para converter para digitado, chame o construtor Uint8Array conforme mostrado abaixo -

let buffer = new Uint8Array(instance.exports.memory.buffer);

Agora, podemos ler o valor do buffer em um loop for.

Vamos agora obter o ponto de partida para ler o buffer, chamando a função que escrevemos conforme mostrado abaixo -

let test = instance.exports.c_hello();

Agora, a variável de teste tem o ponto de partida para ler nossa string. WebAssembly não tem nada para valores de string, tudo é armazenado como números inteiros.

Então, quando lemos o valor do buffer, ele será um valor inteiro e precisamos convertê-lo em uma string usando fromCharCode () em javascript.

O código é o seguinte -

let mytext = ""; 
for (let i=test; buffer[i]; i++){ 
   mytext += String.fromCharCode(buffer[i]);
}

Agora, ao consolar meu texto, você verá a string “Hello World”.

Exemplo

O código completo é o seguinte -

<!doctype html> 
<html> 
   <head> 
      <meta charset="utf-8"> 
      <title>WebAssembly Add Function</title>
      <style>
         div { 
            font-size : 30px; text-align : center; color:orange; 
         } 
      </style>
   </head>
   <body>
      <div id="textcontent"></div>
      <script> 
         fetch("firstprog.wasm")
         .then(bytes => bytes.arrayBuffer())
         .then(mod => WebAssembly.compile(mod))
         .then(module => {return new WebAssembly.Instance(module)})
         .then(instance => {   
            console.log(instance); 
            let buffer = new Uint8Array(instance.exports.memory.buffer); 
            let test = instance.exports.c_hello(); 
            let mytext = ""; 
            for (let i=test; buffer[i]; i++) {
               mytext += String.fromCharCode(buffer[i]);
            }
            console.log(mytext); document.getElementById("textcontent").innerHTML = mytext; 
         });
      </script>
   </body>
</html>

Adicionamos um div e o conteúdo é adicionado ao div, de modo que a string é exibida no navegador.

Resultado

O resultado é mencionado abaixo -

↰ Previous page Next page ↱