WebAssembly - API JavaScript

In questo capitolo, capiremo come caricare il codice wasm ed eseguirlo nel browser utilizzando l'aiuto dell'API di webassembly javascript.

Ecco alcune API importanti, che utilizzeremo durante il tutorial per eseguire il codice wasm.

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

Prima di discutere le API javascript di WebAssembly, per testare l'API e l'output useremo il seguente programma C e il codice .wasm generato dal programma c utilizzando wasm explorer.

Un esempio per il programma C è il seguente:

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

Utilizzeremo WASM explorer, per ottenere il codice wasm -

Scarica il codice WASM e usalo per testare le API.

fetch () API del browser

L'API fetch () ha lo scopo di caricare la risorsa di rete .wasm.

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

Restituisce una promessa come mostrato di seguito -

È inoltre possibile utilizzare il metodo XMLHttpRequest per recuperare la risorsa di rete wasm.

WebAssembly.compile ()

La responsabilità dell'API è compilare i dettagli del modulo che vengono recuperati da .wasm.

Sintassi

La sintassi è la seguente:

WebAssembly.compile(buffer);

Parametri

Buffer - Questo codice da .wasm deve essere convertito in un array tipizzato o in un arraybuffer, prima di dare come input per la compilazione.

Valore di ritorno

Restituirà una promessa che avrà il modulo compilato.

Esempio

Vediamo un esempio, che fornisce l'output come modulo compilato utilizzando webAssembly.compile ().

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

Produzione

Il file console.log, se controllato nel browser, ti fornirà i dettagli del modulo compilato:

Il modulo ha un oggetto costruttore con importazioni, esportazioni e customSections. Vediamo la prossima API, per avere maggiori dettagli sul modulo compilato.

WebAssembly.instance

Utilizzando WebAssembly.instance, l'API ti fornirà l'istanza eseguibile del modulo compilato che può essere ulteriormente eseguita per ottenere l'output.

Sintassi

La sintassi è la seguente:

new WebAssembly.Instance(compiled module)

Valore di ritorno

Il valore restituito sarà un oggetto con la funzione array di export che può essere eseguita.

Esempio

<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>

Produzione

L'output ci fornirà un array di funzioni di esportazione come mostrato di seguito:

Puoi vedere la funzione square, che abbiamo ottenuto dal codice C compilato.

Per eseguire la funzione quadrato, puoi fare quanto segue:

<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>

L'output sarà:

225

WebAssembly.instantiate

Questa API si occupa di compilare e istanziare il modulo insieme.

Sintassi

La sintassi è la seguente:

WebAssembly.instantiate(arraybuffer, importObject)

Parametri

arraybuffer - Il codice da .wasm deve essere convertito in array tipizzato o arraybuffer prima di dare come input per istanziare.

importObject- L'oggetto di importazione deve avere i dettagli della memoria, le funzioni importate da utilizzare all'interno del modulo. Può essere un oggetto modulo vuoto, nel caso non ci sia nulla da condividere.

Valore di ritorno

Restituirà una promessa, che avrà i dettagli del modulo e dell'istanza.

Esempio

<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>

Produzione

Quando esegui il codice, otterrai l'output indicato di seguito.

WebAssembly.instantiateStreaming

Questa API si occupa di compilare e istanziare il modulo WebAssembly dal codice .wasm fornito.

Sintassi

La sintassi è la seguente:

WebAssembly.instantiateStreaming(wasmcode, importObject);

Parametri

wasmcode - Risposta da fetch o da qualsiasi altra API che fornisce il codice wasm e restituisce una promessa.

importObject- L'oggetto di importazione deve avere i dettagli della memoria, le funzioni importate da utilizzare all'interno del modulo. Può essere un oggetto modulo vuoto nel caso in cui non ci sia nulla da condividere.

Valore di ritorno

Restituirà una promessa, che avrà i dettagli del modulo e dell'istanza.

Esempio

Un esempio è discusso di seguito:

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

Quando lo provi nel browser, vedrai un errore:

Per farlo funzionare sul tuo server, dovrai aggiungere il tipo mime application / wasm oppure utilizzare WebAssembly.instantiate (arraybuffer, importObject).