Einführung in WebAssembly (WASM)

WebAssembly (WASM) ist ein binäres Befehlsformat für eine stapelbasierte virtuelle Maschine, die als tragbares Ziel für Hochleistungsanwendungen konzipiert ist. In diesem Artikel erfahren Sie, wie Sie ein einfaches C-Programm zu WebAssembly kompilieren, es in einen Webbrowser laden und mithilfe von JavaScript damit interagieren. Wir werden auch einige nützliche Tools und Befehle für die Arbeit mit WASM außerhalb der Entwicklungscontainerumgebung untersuchen.

Einrichten der Entwicklungsumgebung

Erstellen Sie die erforderliche Ordnerstruktur und Dateien für Ihr WebAssembly-Projekt.

1. Projektordner erstellen: Erstellen Sie zunächst ein neues Verzeichnis für Ihr Projekt. In diesem Ordner fügen Sie die erforderlichen Dateien und Konfigurationen hinzu.

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

1. Dev-Container einrichten: Erstellen Sie im Verzeichnis „wasm-web-example“ den Ordner „.devcontainer“, um die Konfigurationsdateien des Entwicklungscontainers zu speichern. Diese Dateien richten einen Container mit installiertem Emscripten ein, um C-Code in WebAssembly zu kompilieren.

Erstellen Sie im Ordner .devcontainer die folgenden Dateien:

• devcontainer.json
  
  Diese Datei konfiguriert VSCode für die Verwendung des Docker-Containers mit den erforderlichen Erweiterungen und Umgebungseinstellungen.
  

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

• Docker-Datei
  
  Die Docker-Datei richtet die Emscripten-Umgebung ein. Hier ist der Inhalt dieser Datei:
  

   # 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. VSCode-Einstellungen erstellen: Erstellen Sie im Stammverzeichnis Ihres Projekts einen .vscode-Ordner mit den folgenden Dateien:

• c_cpp_properties.json
  
  Diese Datei konfiguriert C IntelliSense und enthält Pfade für Ihr Projekt.
  

   {
     "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
  
  Diese Datei enthält spezifische VSCode-Einstellungen für Sprachzuordnungen.
  

   {
     "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. C-, JavaScript- und HTML-Dateien erstellen: Erstellen Sie nun die folgenden Dateien für Ihr Projekt:

• test.c
  
  Diese C-Datei enthält die einfache Funktion, die zu WebAssembly kompiliert wird.
  

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

• test.html
  
  Diese HTML-Datei lädt das WebAssembly-Modul mithilfe von JavaScript.
  

   
   
     
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>WebAssembly Example</title>
     
     
       <h1>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));
  

Da Sie nun alle erforderlichen Dateien und Konfigurationen eingerichtet haben, können Sie mit dem Kompilieren und der Interaktion mit WebAssembly fortfahren.

C-Code mit Emscripten zu WebAssembly kompilieren

1. Grundlegendes C-Programm:
   
   Die Datei test.c enthält eine einfache Funktion add, die zwei Ganzzahlen addiert. Wir werden diese C-Funktion mit Emscripten in WebAssembly kompilieren.

2. Emscripten-Befehl:
   
   Öffnen Sie im Entwicklungscontainer das Terminal (verwenden Sie cmd j in VSCode) und führen Sie den folgenden Emscripten-Befehl aus, um den C-Code in WebAssembly zu kompilieren:
   

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

Dieser Befehl generiert test.wasm, die WebAssembly-Binärdatei, und stellt sicher, dass die Add-Funktion zur Verwendung in JavaScript exportiert wird.

Laden und Interagieren mit WebAssembly im Browser

1. HTML-Setup:
   
   Die Datei test.html enthält eine einfache HTML-Seite, die die WebAssembly-Binärdatei mithilfe von JavaScript lädt.

2. JavaScript-Setup:
   
   Die JavaScript-Datei test.js lädt die Datei test.wasm und ruft die exportierte Add-Funktion auf:

Verwenden externer Tools unter macOS

Außerhalb des Entwicklungscontainers gibt es mehrere nützliche Befehle, die Sie ausführen können, um mit WebAssembly auf Ihrem Mac zu arbeiten.

1. wabt installieren: wabt (WebAssembly Binary Toolkit) bietet Dienstprogramme für die Arbeit mit WebAssembly, einschließlich der Konvertierung von .wasm-Dateien in das für Menschen lesbare WAT-Format (WebAssembly Text). Installieren Sie es über 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. WASM in WAT umwandeln: Sobald wabt installiert ist, können Sie das Tool wasm2wat verwenden, um Ihre WebAssembly-Binärdatei (test.wasm) in das WAT-Format zu konvertieren:

 # 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. HTML-Seite bereitstellen: Um die HTML-Seite anzuzeigen, die mit dem WebAssembly-Modul interagiert, können Sie den einfachen HTTP-Server von Python verwenden:

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

Fazit

Indem Sie diese Schritte befolgen, können Sie eine Entwicklungsumgebung einrichten, um C-Code in WebAssembly zu kompilieren, mit ihm mithilfe von JavaScript zu interagieren und resultierende Binärdateien zur Überprüfung zu konvertieren. Die Verwendung externer Tools wie wabt und Pythons HTTP-Server vereinfacht die Verwaltung und Erkundung von WebAssembly-Modulen auf macOS-Systemen.