WebAssembly - API JavaScript

Dans ce chapitre, nous allons comprendre comment charger le code wasm et l'exécuter dans le navigateur à l'aide de l'API javascript webassembly.

Voici quelques API importantes que nous allons utiliser tout au long du didacticiel pour exécuter du code wasm.

  • API de navigateur fetch ()
  • WebAssembly.compile
  • WebAssembly.instance
  • WebAssembly.instantiate
  • WebAssembly.instantiateStreaming

Avant de discuter de l'API javascript WebAssembly, pour tester l'API et la sortie, nous allons utiliser le programme C suivant et le code .wasm généré à partir du programme c à l'aide de l'explorateur wasm.

Un exemple de programme C est le suivant -

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

Nous allons utiliser l'explorateur WASM, pour obtenir le code wasm -

Téléchargez le code WASM et utilisez-le pour tester les API.

API de navigateur fetch ()

L'API fetch () est conçue pour charger une ressource réseau .wasm.

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

Il renvoie une promesse comme indiqué ci-dessous -

Vous pouvez également utiliser la méthode XMLHttpRequest pour récupérer la ressource réseau wasm.

WebAssembly.compile ()

La responsabilité de l'API est de compiler les détails du module qui sont extraits de .wasm.

Syntaxe

La syntaxe est la suivante -

WebAssembly.compile(buffer);

Paramètres

Buffer - Ce code de .wasm doit être converti en un tableau typé ou un arraybuffer, avant de le donner comme entrée à compiler.

Valeur de retour

Il renverra une promesse qui contiendra le module compilé.

Exemple

Voyons un exemple, qui donne la sortie sous forme de module compilé en utilisant webAssembly.compile ().

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

Production

Le console.log, une fois vérifié dans le navigateur, vous donnera les détails du module compilé -

Le module a un objet constructeur avec des importations, des exportations et des sections personnalisées. Voyons la prochaine API, pour obtenir plus de détails sur le module compilé.

WebAssembly.instance

En utilisant WebAssembly.instance, l'API vous donnera l'instance exécutable du module compilé qui peut être exécutée ultérieurement pour obtenir la sortie.

Syntaxe

La syntaxe est la suivante -

new WebAssembly.Instance(compiled module)

Valeur de retour

La valeur de retour sera un objet avec le tableau de la fonction d'export qui peut être exécutée.

Exemple

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

Production

La sortie nous donnera un tableau de fonctions d'exportation comme indiqué ci-dessous -

Vous pouvez voir la fonction square, que nous avons obtenue à partir du code C qui est compilé.

Pour exécuter la fonction carrée, vous pouvez faire ce qui suit -

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

225

WebAssembly.instantiate

Cette API prend en charge la compilation et l'instanciation du module ensemble.

Syntaxe

La syntaxe est la suivante -

WebAssembly.instantiate(arraybuffer, importObject)

Paramètres

arraybuffer - Le code de .wasm doit être converti en tableau typé ou en arraybuffer avant d'être donné comme entrée à instancier.

importObject- L'objet d'importation doit avoir des détails sur la mémoire, les fonctions importées à utiliser à l'intérieur du module. Il peut s'agir d'un objet module vide, au cas où il n'y aurait rien à partager.

Valeur de retour

Il renverra une promesse, qui contiendra les détails du module et de l'instance.

Exemple

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

Production

Lorsque vous exécutez le code, vous obtiendrez la sortie mentionnée ci-dessous.

WebAssembly.instantiateStreaming

Cette API se charge de la compilation et de l'instanciation du module WebAssembly à partir du code .wasm donné.

Syntaxe

La syntaxe est la suivante -

WebAssembly.instantiateStreaming(wasmcode, importObject);

Paramètres

wasmcode - Réponse de fetch ou de toute autre API qui donne le code wasm et renvoie une promesse.

importObject- L'objet d'importation doit avoir des détails sur la mémoire, les fonctions importées à utiliser à l'intérieur du module. Il peut s'agir d'un objet module vide au cas où il n'y aurait rien à partager.

Valeur de retour

Il renverra une promesse, qui contiendra les détails du module et de l'instance.

Exemple

Un exemple est présenté ci-dessous -

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

Lorsque vous le testez dans le navigateur, vous verrez une erreur -

Pour le faire fonctionner du côté de votre serveur, vous devrez ajouter l'application de type mime / wasm ou bien utiliser WebAssembly.instantiate (arraybuffer, importObject).