WebAssembly - Arbeiten mit C++

Hallo, angehende Programmierer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von WebAssembly und C++ zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich Ihnen versichern, dass dieses Thema zwar zunächst einschüchternd erscheinen mag, aber wir werden es in handhabbare Stücke zerlegen, die sogar absolute Anfänger verdauen können. Also, lasst uns die Ärmel hochwerren und eintauchen!

Was ist WebAssembly?

Bevor wir uns dem Code zuwenden, lassen Sie uns verstehen, was WebAssembly eigentlich ist. Stellen Sie sich vor, Sie möchten mit jemandem sprechen, der Ihre Sprache nicht kennt. Sie bräuchten einen Übersetzer, oder? WebAssembly ist so etwas wie ein Übersetzer für Ihren Webbrowser. Es ermöglicht Programmen, die in Sprachen wie C++ geschrieben sind, in Webbrowsern mit nahezu nativer Geschwindigkeit zu laufen. Cool, oder?

Warum C++ mit WebAssembly?

Sie fragen sich vielleicht, "Warum C++?" Nun, C++ ist wie das Schweizer Taschenmesser der Programmiersprachen - es ist leistungsstark, flexibel und schon seit Jahren im Einsatz. In Kombination mit WebAssembly können wir high-performance-Anwendungen ins Web bringen. Es ist wie das Turboaufladen Ihrer Website!

Einrichten unserer Umgebung

Bevor wir die erste Zeile Code schreiben, müssen wir unsere Arbeitsumgebung einrichten. Keine Sorge, ich werde Sie Schritt für Schritt durchführen:

1. Installieren Sie Emscripten: Dies ist unsere magische Zauberstab, der C++ in WebAssembly verwandelt.
2. Richten Sie einen Texteditor ein: Ich empfehle Visual Studio Code, aber jeder Texteditor tut es.
3. Öffnen Sie ein Terminal: Wir verwenden dies, um unseren Code zu kompilieren.

Unser erstes WebAssembly-Programm

Lassen Sie uns mit einem einfachen "Hello, World!"-Programm beginnen. Hier ist der Code:

#include <emscripten/emscripten.h>
#include <stdio.h>

extern "C" {
EMSCRIPTEN_KEEPALIVE
void sayHello() {
printf("Hello, WebAssembly World!\n");
}
}

Lassen Sie uns das einmal auseinandernehmen:

• #include <emscripten/emscripten.h>: Diese Zeile inkludiert die Emscripten-Headerdatei, die uns Zugriff auf WebAssembly-bezogene Funktionen gewährt.
• extern "C": Diesweist den Compiler an, C-style-Namen für unsere Funktionen zu verwenden.
• EMSCRIPTEN_KEEPALIVE: Dies ist wie ein "Nicht löschen"-Schild auf unserer Funktion, das sicherstellt, dass sie JavaScript zur Verfügung steht.
• void sayHello(): Dies ist unsere Funktion, die die Begrüßung ausdruckt.

Kompilieren unseres Codes

Es ist Zeit, unseren magischen Zauberstab zu schwenken! Führen Sie im Terminal Folgendes aus:

emcc hello.cpp -o hello.html -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"

Dieser Befehl sieht aus wie ein Zauber aus Harry Potter, aber lassen Sie mich ihn erklären:

• emcc: Dies ist unser Compiler.
• hello.cpp: Unsere Quelldatei.
• -o hello.html: Dies erstellt eine HTML-Datei, die wir im Browser öffnen können.
• Der Rest sind spezielle Flags, um unsere WebAssembly mit JavaScript gut funktionieren zu lassen.

Ausführen unserer WebAssembly

Öffnen Sie die generierte hello.html in Ihrem Browser, öffnen Sie die Konsole und tippen Sie:

Module.ccall('sayHello', null, null, null);

Wenn Sie "Hello, WebAssembly World!" in der Konsole sehen, gratuliere ich Ihnen! Sie haben gerade C++ in Ihrem Browser ausgeführt!

Ein komplexeres Beispiel: Fibonacci-Rechner

Nun, da wir unsere Füße nass gemacht haben, lassen Sie uns etwas anspruchsvolleres ausprobieren - einen Fibonacci-Zahlen-Rechner.

#include <emscripten/emscripten.h>

extern "C" {
EMSCRIPTEN_KEEPALIVE
int fibonacci(int n) {
if (n <= 1) return n;
return fibonacci(n-1) + fibonacci(n-2);
}
}

Diese Funktion berechnet die nth Fibonacci-Zahl rekursiv. Es ist nicht die effizienteste Methode, aber sie ist großartig für die Demonstration!

Kompilieren Sie sie wie zuvor, und rufen Sie sie von JavaScript aus folgendermaßen auf:

console.log(Module.ccall('fibonacci', 'number', ['number'], [10]));

Dies sollte die 10. Fibonacci-Zahl (welche 55 ist) ausgeben.

Arbeiten mit Arrays

Lassen Sie uns eine Stufe höher gehen und mit Arrays arbeiten. Hier ist eine Funktion, die die Summe eines Arrays berechnet:

#include <emscripten/emscripten.h>

extern "C" {
EMSCRIPTEN_KEEPALIVE
int sumArray(int* arr, int size) {
int sum = 0;
for (int i = 0; i < size; i++) {
sum += arr[i];
}
return sum;
}
}

Um dies von JavaScript aus zu verwenden, müssen wir etwas mehr Arbeit leisten:

let arr = new Int32Array([1, 2, 3, 4, 5]);
let buffer = Module._malloc(arr.length * arr.BYTES_PER_ELEMENT);
Module.HEAP32.set(arr, buffer >> 2);
let sum = Module.ccall('sumArray', 'number', ['number', 'number'], [buffer, arr.length]);
Module._free(buffer);
console.log(sum);  // Sollte 15 ausgeben

Dies mag kompliziert aussehen, aber wir tun im Wesentlichen:

1. Erstellen eines Arrays in JavaScript
2. Allokieren von Speicher im WebAssembly-Heap
3. Kopieren unseres Arrays in diesen Speicher
4. Aufrufen unserer Funktion
5. Freigeben des allokierten Speichers

Fazit

Glückwunsch! Sie haben die ersten Schritte in die Welt von WebAssembly und C++ gemacht. Wir haben viel Boden coberter, von einem einfachen "Hello, World!" bis hin zum Arbeiten mit Arrays. Denken Sie daran, dass das Lernen zu programmieren wie das Lernen einer neuen Sprache ist - es erfordert Übung und Geduld. Lassen Sie sich nicht entmutigen, wenn Sie nicht alles sofort verstehen. Halten Sie experimentierfreudig, halten Sie кодируя, und vor allem - haben Sie Spaß!

Hier ist eine Tabelle, die die Hauptmethoden zusammenfasst, die wir verwendet haben:

Methode	Beschreibung
emcc	Emscripten-Kompiler-Befehl
EMSCRIPTEN_KEEPALIVE	Makro, um zu verhindern, dass die Funktion optimiert wird
Module.ccall	JavaScript-Methode zum Aufruf von C++-Funktionen
Module._malloc	Allokieren von Speicher im WebAssembly-Heap
Module._free	Freigeben des allokierten Speichers im WebAssembly-Heap
Module.HEAP32	Int32Array-Ansicht des WebAssembly-Speichers

Erinnern Sie sich daran, dass WebAssembly und C++ eine Welt voller Möglichkeiten für die Web-Entwicklung eröffnen. Der Himmel ist die Grenze! Halten Sie kodierend, halten Sie lernen, und wer weiß? Vielleicht sind Sie in ein paar Jahren derjenige, der diesen Kurs unterrichtet!

Credits: Image by storyset