WebAssembly - API de JavaScript

En este capítulo, entenderemos cómo cargar el código wasm y ejecutarlo en el navegador usando la ayuda de la API javascript webassembly.

Aquí hay algunas API importantes que usaremos a lo largo del tutorial para ejecutar código wasm.

• fetch () API del navegador
• WebAssembly.compile
• WebAssembly.instance
• WebAssembly.instantiate
• WebAssembly.instantiateStreaming

Antes de discutir las API de javascript de WebAssembly, para probar la API y la salida, vamos a utilizar el siguiente programa en C y el código .wasm generado a partir del programa c utilizando wasm explorer.

Un ejemplo de programa C es el siguiente:

#include<stdio.h>
int square(int n) { 
   return n*n; 
}

Usaremos el explorador WASM para obtener el código wasm -

Descargue el código WASM y utilícelo para probar las API.

fetch () API del navegador

La API fetch () está destinada a cargar el recurso de red .wasm.

<script>
   var result = fetch("findsquare.wasm");
   console.log(result);
</script>

Devuelve una promesa como se muestra a continuación:

También puede hacer uso del método XMLHttpRequest para recuperar el recurso de red wasm.

WebAssembly.compile ()

La responsabilidad de la API es compilar los detalles del módulo que se obtienen de .wasm.

Sintaxis

La sintaxis es la siguiente:

WebAssembly.compile(buffer);

Parámetros

Buffer - Este código de .wasm tiene que convertirse en una matriz con tipo o búfer de matriz, antes de dar como entrada para compilar.

Valor devuelto

Devolverá una promesa que tendrá el módulo compilado.

Ejemplo

Veamos un ejemplo, que da la salida como un módulo compilado usando webAssembly.compile ().

<script> 
   fetch("findsquare.wasm") .then(bytes => bytes.arrayBuffer()) 
   .then(mod => {
      var compiledmod = WebAssembly.compile(mod);
      compiledmod.then(test=> {
         console.log(test); 
      })
   })
</script>

Salida

El archivo console.log, cuando está marcado en el navegador, te dará los detalles del módulo compilado:

El módulo tiene un objeto constructor con importaciones, exportaciones y secciones personalizadas. Veamos la siguiente API para obtener más detalles del módulo compilado.

WebAssembly.instance

Utilizando WebAssembly.instance, la API le dará la instancia ejecutable del módulo compilado que se puede ejecutar más para obtener el resultado.

Sintaxis

La sintaxis es la siguiente:

new WebAssembly.Instance(compiled module)

Valor devuelto

El valor de retorno será un objeto con la función de matriz de exportaciones que se puede ejecutar.

Ejemplo

<script> 
   fetch("findsquare.wasm") 
      .then(bytes => bytes.arrayBuffer())
      .then(mod => WebAssembly.compile(mod)).then(module => {
         let instance = new WebAssembly.Instance(module); 
         console.log(instance); 
      })
</script>

Salida

La salida nos dará una matriz de funciones de exportación como se muestra a continuación:

Puede ver la función cuadrada, que obtuvimos del código C que está compilado.

Para ejecutar la función cuadrada, puede hacer lo siguiente:

<script>
   fetch("findsquare.wasm") 
   .then(bytes => bytes.arrayBuffer()) 
   .then(mod => WebAssembly.compile(mod)) 
   .then(module => { 
      let instance = new WebAssembly.Instance(module);
      console.log(instance.exports.square(15));
   })
</script>

La salida será -

225

WebAssembly.instantiate

Esta API se encarga de compilar y crear instancias del módulo en conjunto.

Sintaxis

La sintaxis es la siguiente:

WebAssembly.instantiate(arraybuffer, importObject)

Parámetros

arraybuffer - El código de .wasm debe convertirse en una matriz escrita o un búfer de matriz antes de dar como entrada para instanciar.

importObject- El objeto de importación debe tener detalles de la memoria, funciones importadas para ser utilizadas dentro del módulo. Puede ser un objeto de módulo vacío, en caso de que no haya nada para compartir.

Valor devuelto

Devolverá una promesa, que tendrá detalles de módulo e instancia.

Ejemplo

<script type="text/javascript">
   const importObj = {
      module: {}
   };
   fetch("findsquare.wasm")
      .then(bytes => bytes.arrayBuffer())
      .then(module => WebAssembly.instantiate(module, importObj)) 
      .then(finalcode => { 
         console.log(finalcode); console.log(finalcode.instance.exports.square(25)); 
      }); 
</script>

Salida

Cuando ejecute el código, obtendrá el resultado mencionado a continuación.

WebAssembly.instantiateStreaming

Esta API se encarga de compilar y de instanciar el módulo WebAssembly a partir del código .wasm proporcionado.

Sintaxis

La sintaxis es la siguiente:

WebAssembly.instantiateStreaming(wasmcode, importObject);

Parámetros

wasmcode - Respuesta de fetch o cualquier otra API que proporcione el código wasm y devuelva una promesa.

importObject- El objeto de importación debe tener detalles de la memoria, funciones importadas para ser utilizadas dentro del módulo. Puede ser un objeto de módulo vacío en caso de que no haya nada para compartir.

Valor devuelto

Devolverá una promesa, que tendrá detalles de módulo e instancia.

Ejemplo

A continuación se analiza un ejemplo:

<script type="text/javascript">     
   const importObj = { 
      module: {} 
   };
   WebAssembly.instantiateStreaming(fetch("findsquare.wasm"), importObj).then(obj => {
      console.log(obj); 
   }); 
</script>

Cuando lo pruebe en el navegador, verá un error:

Para que funcione en el extremo de su servidor, tendrá que agregar el tipo mime application / wasm o bien hacer uso de WebAssembly.instantiate (arraybuffer, importObject).