Arbeit mit WebAssembly und Go: Von A bis Z – Vollständiger Leitfaden

Einführung in WebAssembly und Go

WebAssembly (WASM) ist ein binäres Low-Level-Format, das es ermöglicht, Code, der in anderen Sprachen als JavaScript geschrieben wurde, direkt im Browser auszuführen. Go (Golang) mit seiner leistungsstarken Standardbibliothek und hervorragender Parallelitätsunterstützung ist zu einem der besten Kandidaten für die Kompilierung in WASM geworden. In diesem Artikel werden wir den Prozess der Arbeit mit WebAssembly in Go von der Installation der Werkzeuge bis zur Bereitstellung einer fertigen Lösung durchgehen.

Moderne Webanwendungen erfordern hohe Leistung, und WebAssembly bietet die Möglichkeit, in Go geschriebenen Code mit nahezu nativer Geschwindigkeit auszuführen. Dies öffnet Türen für die Übertragung von rechenintensiven Aufgaben, Spiel-Engines und Datenverarbeitungssystemen direkt in den Browser.

Installation und Einrichtung der Umgebung

Stellen Sie vor dem Start sicher, dass Sie die neueste Version von Go (1.21+) installiert haben. Für die Arbeit mit WebAssembly benötigen Sie den Compiler tinygo (optional, um die Größe der Binärdateien zu reduzieren) oder den Standard-go build.

Grundlegende Anforderungen

\n
• Go 1.21 oder neuer
\n
• Browser mit WebAssembly-Unterstützung (Chrome, Firefox, Safari, Edge)
\n
• Grundlegendes Verständnis von JavaScript
\n

Einrichtung von Umgebungsvariablen

# Setzen von GOOS und GOARCH für die Cross-Kompilierung\nexport GOOS=js\nexport GOARCH=wasm\n\n# Überprüfen, ob alles richtig eingestellt ist\ngo env GOOS GOARCH\n# Sollte anzeigen: js wasm

Außerdem muss die Support-Datei wasm_exec.js aus der Go-Standardbibliothek kopiert werden:

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./

Schreiben und Kompilieren des ersten WASM-Moduls

Erstellen wir ein einfaches Modul, das eine Funktion zum Addieren zweier Zahlen exportiert und eine Nachricht in der Browserkonsole ausgibt.

Go-Code

package main\n\nimport "syscall/js"\n\nfunc add(this js.Value, args []js.Value) interface{} {\n    if len(args) < 2 {\n        return "Error: need two arguments"\n    }\n    a := args[0].Int()\n    b := args[1].Int()\n    return a + b\n}\n\nfunc main() {\n    // Registrieren der Funktion im globalen Objekt\n    js.Global().Set("goAdd", js.FuncOf(add))\n    \n    // Blockieren der Goroutine, damit WASM nicht beendet wird\n    select {}\n}

Kompilierung in WASM

go build -o main.wasm main.go

Nach der Kompilierung erhalten Sie eine Datei main.wasm mit einer Größe von etwa 2-3 MB (mit dem Standard-Compiler). Für die Produktion wird die Verwendung von TinyGo empfohlen, das die Größe auf 10-50 KB reduziert.

Integration mit JavaScript und HTML

Jetzt erstellen wir eine HTML-Seite, die unser WASM-Modul lädt und verwendet.

HTML-Vorlage

<!DOCTYPE html>\n<html>\n<head>\n    <meta charset="utf-8">\n    <title>Go WebAssembly Demo</title>\n</head>\n<body>\n    <h1>Go + WebAssembly</h1>\n    <input type="number" id="num1" value="10">\n    <input type="number" id="num2" value="20">\n    <button onclick="calculate()">Addieren</button>\n    <p>Ergebnis: <span id="result">0</span></p>\n\n    <script src="wasm_exec.js"></script>\n    <script>\n        const go = new Go();\n        \n        WebAssembly.instantiateStreaming(\n            fetch("main.wasm"), \n            go.importObject\n        ).then((result) => {\n            go.run(result.instance);\n            console.log("WASM geladen!");\n        });\n\n        function calculate() {\n            const a = parseInt(document.getElementById('num1').value);\n            const b = parseInt(document.getElementById('num2').value);\n            const result = goAdd(a, b);\n            document.getElementById('result').textContent = result;\n        }\n    </script>\n</body>\n</html>

Arbeit mit Speicher und komplex