Introduction à WebAssembly (WASM)

WebAssembly (WASM) est un format d'instruction binaire pour une machine virtuelle basée sur une pile, conçue comme une cible portable pour les applications hautes performances. Dans cet article, nous allons explorer comment compiler un programme C simple en WebAssembly, le charger dans un navigateur Web et interagir avec lui à l'aide de JavaScript. Nous explorerons également quelques outils et commandes utiles pour travailler avec WASM en dehors de l'environnement de conteneur de développement.

Configuration de l'environnement de développement

Créez la structure de dossiers et les fichiers nécessaires pour votre projet WebAssembly.

1. Créer un dossier de projet : Commencez par créer un nouveau répertoire pour votre projet. Dans ce dossier, vous ajouterez les fichiers et configurations nécessaires.

   mkdir wasm-web-example
   cd wasm-web-example

1. Configurer le conteneur de développement : Dans le répertoire wasm-web-example, créez le dossier .devcontainer pour stocker les fichiers de configuration du conteneur de développement. Ces fichiers configureront un conteneur avec Emscripten installé pour compiler le code C dans WebAssembly.

Dans le dossier .devcontainer, créez les fichiers suivants :

• devcontainer.json
  
  Ce fichier configure VSCode pour utiliser le conteneur Docker avec les extensions et paramètres d'environnement nécessaires.
  

   {
     "name": "Emscripten DevContainer",
     "build": {
       "dockerfile": "Dockerfile"
     },
     "customizations": {
       "vscode": {
         "settings": {
           "terminal.integrated.shell.linux": "/bin/bash",
           "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools",
           "C_Cpp.default.intelliSenseMode": "gcc-x64"
         },
         "extensions": [
           "ms-vscode.cpptools",
           "ms-vscode.cmake-tools"
         ]
       }
     },
     "postCreateCommand": "emcc --version"
   }
  

• Fichier Docker
  
  Le Dockerfile configurera l'environnement Emscripten. Voici le contenu de ce fichier :
  

   # Use the official Emscripten image
   FROM emscripten/emsdk:3.1.74
  
   # Set the working directory
   WORKDIR /workspace
  
   # Copy the source code into the container
   COPY . .
  
   # Install any additional packages if necessary (optional)
   # Ensure to clean up cache to minimize image size
   RUN apt-get update && \
       apt-get install -y build-essential && \
       apt-get clean && \
       rm -rf /var/lib/apt/lists/*
  

1. Créer des paramètres VSCode : A la racine de votre projet, créez un dossier .vscode avec les fichiers suivants :

• c_cpp_properties.json
  
  Ce fichier configure le C IntelliSense et inclut les chemins pour votre projet.
  

   {
     "configurations": [
       {
         "name": "Linux",
         "includePath": [
           "${workspaceFolder}/**",
           "/emsdk/upstream/emscripten/system/include"
         ],
         "defines": [],
         "compilerPath": "/usr/bin/gcc",
         "cStandard": "c17",
         "cppStandard": "gnu++17",
         "configurationProvider": "ms-vscode.cmake-tools"
       }
     ],
     "version": 4
   }
  

• settings.json
  
  Ce fichier comprend des paramètres VSCode spécifiques pour les associations de langues.
  

   {
     "files.associations": {
       "emscripten.h": "c"
     },
     "[javascript]": {
       "editor.defaultFormatter": "vscode.typescript-language-features"
     },
     "[typescript]": {
       "editor.defaultFormatter": "vscode.typescript-language-features"
     },
     "[jsonc]": {
       "editor.defaultFormatter": "vscode.json-language-features"
     },
     "[json]": {
       "editor.defaultFormatter": "vscode.json-language-features"
     },
     "[html]": {
       "editor.defaultFormatter": "vscode.html-language-features"
     }
   }
  

1. Créer des fichiers C, JavaScript et HTML : Maintenant, créez les fichiers suivants pour votre projet :

• test.c
  
  Ce fichier C contient la fonction simple qui sera compilée en WebAssembly.
  

   // test.c
   int add(int lhs, int rhs) {
       return lhs + rhs;
   }
  

• test.html
  
  Ce fichier HTML chargera le module WebAssembly à l'aide de JavaScript.
  

   
   
     
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>WebAssembly Example</title>
     
     
       <h1 id="WebAssembly-Example">WebAssembly Example</h1>
       <div>
  
  
  <li>
  <p><strong>test.js</strong><br><br>
   This JavaScript file will fetch the WebAssembly module and call the exported function.<br>
  </p>
  <pre class="brush:php;toolbar:false"> // test.js
   const wasmFile = 'test.wasm';
  
   fetch(wasmFile)
     .then(response => response.arrayBuffer())
     .then(bytes => WebAssembly.instantiate(bytes))
     .then(({ instance }) => {
       const result = instance.exports.add(5, 3); // Call the WebAssembly function
       document.getElementById('output').textContent = `Result from WebAssembly: ${result}`;
     })
     .catch(error => console.error('Error loading WebAssembly module:', error));
  

Maintenant que vous avez configuré tous les fichiers et configurations nécessaires, vous pouvez passer à la compilation et à l'interaction avec WebAssembly.

Compilation du code C vers WebAssembly à l'aide d'Emscripten

1. Programme C de base :
   
   Le fichier test.c contient une simple fonction add qui ajoute deux entiers. Nous allons compiler cette fonction C dans WebAssembly en utilisant Emscripten.

2. Commande Emscripten :
   
   Dans le conteneur de développement, ouvrez le terminal (utilisez cmd j dans VSCode) et exécutez la commande Emscripten suivante pour compiler le code C dans WebAssembly :
   

   mkdir wasm-web-example
   cd wasm-web-example

Cette commande générera test.wasm, le binaire WebAssembly, et garantira que la fonction d'ajout est exportée pour être utilisée en JavaScript.

Chargement et interaction avec WebAssembly dans le navigateur

1. Configuration HTML :
   
   Le fichier test.html contient une simple page HTML qui charge le binaire WebAssembly à l'aide de JavaScript.

2. Configuration JavaScript :
   
   Le fichier JavaScript test.js charge le fichier test.wasm et appelle la fonction d'ajout exportée :

Utilisation d'outils externes sur macOS

En dehors du conteneur de développement, il existe plusieurs commandes utiles que vous pouvez exécuter pour travailler avec WebAssembly sur votre Mac.

1. Installer wabt : wabt (WebAssembly Binary Toolkit) fournit des utilitaires pour travailler avec WebAssembly, notamment la conversion de fichiers .wasm au format WAT (WebAssembly Text) lisible par l'homme. Installez-le via Homebrew :

 {
   "name": "Emscripten DevContainer",
   "build": {
     "dockerfile": "Dockerfile"
   },
   "customizations": {
     "vscode": {
       "settings": {
         "terminal.integrated.shell.linux": "/bin/bash",
         "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools",
         "C_Cpp.default.intelliSenseMode": "gcc-x64"
       },
       "extensions": [
         "ms-vscode.cpptools",
         "ms-vscode.cmake-tools"
       ]
     }
   },
   "postCreateCommand": "emcc --version"
 }

1. Convertir WASM en WAT : Une fois wabt installé, vous pouvez utiliser l'outil wasm2wat pour convertir votre binaire WebAssembly (test.wasm) au format WAT :

 # Use the official Emscripten image
 FROM emscripten/emsdk:3.1.74

 # Set the working directory
 WORKDIR /workspace

 # Copy the source code into the container
 COPY . .

 # Install any additional packages if necessary (optional)
 # Ensure to clean up cache to minimize image size
 RUN apt-get update && \
     apt-get install -y build-essential && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*

1. Servir la page HTML : Pour afficher la page HTML qui interagit avec le module WebAssembly, vous pouvez utiliser le simple serveur HTTP de Python :

 {
   "configurations": [
     {
       "name": "Linux",
       "includePath": [
         "${workspaceFolder}/**",
         "/emsdk/upstream/emscripten/system/include"
       ],
       "defines": [],
       "compilerPath": "/usr/bin/gcc",
       "cStandard": "c17",
       "cppStandard": "gnu++17",
       "configurationProvider": "ms-vscode.cmake-tools"
     }
   ],
   "version": 4
 }

Conclusion

En suivant ces étapes, vous pouvez configurer un environnement de développement pour compiler du code C en WebAssembly, interagir avec celui-ci à l'aide de JavaScript et convertir les binaires résultants pour inspection. L'utilisation d'outils externes tels que wabt et le serveur HTTP de Python simplifie la gestion et l'exploration des modules WebAssembly sur les systèmes macOS.