Arbeiten mit WebAssembly und Go: Erstellung schneller Webanwendungen

Einführung in WebAssembly und Go

WebAssembly (Wasm) ist ein binäres Low-Level-Befehlsformat, das im Browser mit nahezu nativer Geschwindigkeit ausgeführt wird. In Kombination mit der Sprache Go (Golang) erhalten Sie ein leistungsstarkes Werkzeug zur Erstellung hochperformanter Webanwendungen. Go wird zu WebAssembly kompiliert, sodass komplexe Berechnungen, Algorithmen und sogar Spiele direkt in den Browser übertragen werden können, ohne Einbußen bei der Leistung.

In diesem Artikel werden wir uns ansehen, wie Sie die Umgebung einrichten, ein einfaches Modul in Go schreiben, es in Wasm kompilieren und mit JavaScript integrieren. Sie lernen die wichtigsten Pakete, Einschränkungen und Best Practices kennen.

Einrichten der Umgebung für die Kompilierung von Go in Wasm

Installation von Go und WebAssembly-Abhängigkeiten

Stellen Sie zunächst sicher, dass Go Version 1.11 oder neuer installiert ist (empfohlen wird 1.21+). WebAssembly wird standardmäßig unterstützt. Für die Kompilierung wird die Umgebungsvariable GOOS=wasm GOARCH=wasm verwendet.

Außerdem wird die Support-Datei wasm_exec.js benötigt, die im Lieferumfang von Go enthalten ist. Kopieren Sie sie in das Stammverzeichnis Ihres Projekts:

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

Projektstruktur

Erstellen wir eine einfache Struktur:

my-wasm-app/├── main.go├── wasm_exec.js├── index.html└── main.wasm (wird nach der Kompilierung erstellt)

Schreiben eines Go-Moduls für WebAssembly

Einfaches Beispiel: Additionsfunktion

Erstellen Sie eine Datei main.go mit folgendem Inhalt:

package main

import (    "syscall/js")

func add(this js.Value, args []js.Value) interface{} {    if len(args) < 2 {        return 0    }    a := args[0].Int()    b := args[1].Int()    return a + b}

func main() {    c := make(chan struct{}, 0)

    js.Global().Set("goAdd", js.FuncOf(add))

    <-c}

Hier verwenden wir das Paket syscall/js für die Interaktion mit JavaScript. Die Funktion add nimmt zwei Argumente entgegen und gibt deren Summe zurück. Der Kanal c blockiert das Beenden des Programms, sodass das Modul aktiv bleibt.

Kompilierung in Wasm

Führen Sie den folgenden Befehl aus:

GOOS=wasm GOARCH=wasm go build -o main.wasm main.go

Das Ergebnis ist eine Datei main.wasm mit einer Größe von etwa 1–2 MB (für das einfache Beispiel). Verwenden Sie in der Produktion das Flag -ldflags="-s -w", um die Größe zu reduzieren.

Integration mit HTML und JavaScript

Erstellen einer HTML-Seite

Erstellen Sie eine Datei index.html:

<!DOCTYPE html><html lang="de"><head>    <meta charset="UTF-8">    <title>Go + WebAssembly</title>    <script src="wasm_exec.js"></script></head><body>    <h2>Go-Rechner im Browser</h2>    <input type="number" id="num1" value="5">    <input type="number" id="num2" value="10">    <button onclick="calculate()">Addieren</button>    <p>Ergebnis: <span id="result">0</span></p>

    <script>        const go = new Go();        WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject)            .then((result) => {                go.run(result.instance);                console.log("WebAssembly-Modul geladen");            });

        function calculate() {            const a = parseInt(document.getElementById('num1').value);            const b = parseInt(document.getElementById('num2').value);            const sum = goAdd(a, b);            document.getElementById('result').innerText = sum;        }    </script></body></html>

Beachten Sie: Die Funktion goAdd wird durch den Aufruf js.Global().Set("goAdd", ...) im Go-Code global verfügbar.

Starten eines lokalen Servers