Introduction à WebAssembly (WASM)-js tutoriel-php.cn

Introduction to 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.

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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
 }

Copier après la connexion

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

Copier après la connexion

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;
 }
```
Copier après la connexion

test.html

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

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WebAssembly Example</title>
   </head>
   <body>
     <h1>WebAssembly Example</h1>
     <div>

</li>
<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));

Copier après la connexion

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

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

Copier après la connexion

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

Configuration HTML :

Le fichier test.html contient une simple page HTML qui charge le binaire WebAssembly à l'aide de JavaScript.
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.

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

Copier après la connexion

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

Copier après la connexion

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
 }

Copier après la connexion

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!