Einführung in WebAssembly in Go

Einführung in WebAssembly in Go
Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

WebAssembly ist eine der modernen Technologien, die entwickelt wurde, um mehr Sprachen im Browser mit Javascript-Interoperabilität auszuführen.





WebAssembly (WASM) ist ein plattformunabhängiges, binäres Anweisungsformat für stapelbasierte virtuelle Maschinen, das als portables Kompilierungsziel für Programmiersprachen entwickelt wurde, die in unterstützenden Umgebungen (d. h. den Web- und Server-Apps) ausgeführt werden.





72 dpi in 300 dpi umwandeln

Mit WASM können Sie mehrere Programmiersprachen, einschließlich Go, in Ihrem Browser ausführen und die Funktionen der Sprache nutzen. Interoperieren Sie auch mit Javascript im Web.





Erste Schritte mit WebAssembly in Go

Go bietet erstklassige Unterstützung für die Verwendung von WebAssembly in Ihren Go-Anwendungen, Sie müssen nur wenige Konfigurationen vornehmen und Go-Code in WebAssembly kompilieren.

Sie müssen einige Konfigurationen vornehmen, um Ihren Go-Code in WebAssembly zu transpilieren. Sie müssen Ihre Go-Architektur ändern GOARCH Umgebungsvariable zu wasm und Go-Betriebssystem GUT variabel zu js .



Führen Sie diesen Befehl im Terminal Ihres Arbeitsverzeichnisses aus, um diese Konfigurationen vorzunehmen.

 Set GOARCH=wasm GOOS=js  

Der nächste Schritt besteht darin, Ihren Go-Code in eine WebAssembly zu transpilieren .wasm Datei. Führen Sie diesen Befehl aus, um Ihre zu transpilieren main.go Datei in eine Datei namens lib.wasm





 go build -o lib.wasm main.go 

Beim Ausführen des Befehls finden Sie a lib.wasm in Ihrem Arbeitsverzeichnis.

Sie müssen die WebAssembly-Datei, die Ihrer Go-Installation beiliegt, in Ihr Arbeitsverzeichnis kopieren, um die WebAssembly-Datei mit NodeJS auf einer Webseite auszuführen.





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

Der Befehl kopiert die wasm_exec.js Datei in Ihr Arbeitsverzeichnis und dient als Einstiegspunkt für Ihre Anwendung.

Sie können jetzt die verwenden wasm_exec.js Skript zum Ausführen Ihrer WASM-Dateien mit Go and make DOM-API Anrufe.

 node wasm_exec.js main.wasm 

Starten eines Webservers zum Hosten der Website

Fügen Sie diesen Code von den Go-Autoren zu einer HTML-Datei in Ihrem Arbeitsverzeichnis hinzu, um einen WebAssembly-Datenstrom mit der zu instanziieren instantiateStreaming Methode.

 <!DOCTYPE html> 
<!--
Copyright 2018 The Go Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->

<html>
<head>
    <meta charset="utf-8" />
    <title>Go wasm</title>
</head>

<body>
<script src="wasm_exec.js"></script>

<script>
    if (!WebAssembly.instantiateStreaming) {
        // polyfill
        WebAssembly.instantiateStreaming = async (resp, importObject) => {
            const source = await (await resp).arrayBuffer();
            return await WebAssembly.instantiate(source, importObject);
        };
    }

    const go = new Go();

    let mod, inst;

    WebAssembly.instantiateStreaming(fetch("lib.wasm"), go.importObject).then(
        result => {
            mod = result.module;
            inst = result.instance;
            document.getElementById("runButton").disabled = false;
        }
    );

    async function run() {
        await go.run(inst);
        inst = await WebAssembly.instantiate(mod, go.importObject); // reset instance
    }
</script>

<button onClick="run();" id="runButton" disabled>Run</button>
</body>
</html>

Der HTML-Code stammt von den Go-Autoren, um einen WebAssembly-Stream zu instanziieren, der Ihren Go-Code mit der Webseite verbindet.

Starten eines Webservers zum Ausführen der Seite

Du wirst Richten Sie den Server mit dem ein http Paket . Importieren Sie die http Paket und die Protokoll Paket zum Protokollieren möglicher Fehler in der Konsole.

Was tun mit alten Flachbildschirmen?
 import ( 
    "log"
    "net/http"
)

Sie können Variablen für die Serveradresse und das Verzeichnis der Dateien deklarieren, die Sie an der Adresse bereitstellen möchten.

 var ( 
    serverAddr = ":8080"
    directory = "."
)

Du kannst den ... benutzen Dateiserver Methode der http -Paket, um Dateien in einem bestimmten Verzeichnis bereitzustellen. Das Dateiserver -Methode übernimmt das Verzeichnis und gibt eine Dateiserverinstanz zurück.

 func main() { 
    serveFiles := http.FileServer(http.Dir(directory))
    if err := http.ListenAndServe(serverAddr, serveFiles); err != nil {
        log.Fatalln(err)
}
}

Im hauptsächlich -Funktion haben Sie eine Dateiserver-Instanzvariable deklariert, um die Dateien im Stammverzeichnis bereitzustellen. Das ListenAndServe -Methode stellt die Dateien im angegebenen Verzeichnis am angegebenen Port bereit.

  Ergebnis des Ladens von WASM im Browser

WebAssembly-Funktionen in Go

Go bietet Funktionen zum Aufrufen von JS-Funktionen und zum Interagieren mit dem DOM in der Systemaufruf/js Paket.

Das js -Paket bietet Zugriff auf WebAssembly-Hostumgebungen auf der js/wasm die Architektur. Sie müssen Ihre Entwicklungsumgebung entsprechend einrichten GOARCH=wasm GOOS=js um auf das Paket zuzugreifen und es zu verwenden.

TV-Bildwiederholfrequenz 60 vs 120
  js-Paketdokumentvorschau

Sie können die verschiedenen Methoden im Paket verwenden, um mit Ihrer Webseite zu interagieren. So können Sie Funktionen mit registrieren js Paket.

 // function definition 
func print(this js.Value, i []js.Value) interface{} {
    return js.ValueOf(i[:])
}

Das drucken Funktion bei Registrierung als Callback-Funktion gibt die an die Funktion übergebenen Daten in der Browser-Konsole aus.

Mit dem können Sie Rückruffunktionen anmelden Satz Methode der Global Methode der js Paket. Das Satz -Methode übernimmt den Funktionsbezeichner und eine Callback-Funktionsinstanz.

 func RegisterCallbackFunctions() { 
    js.Global().Set("print", js.FuncOf(print))
}

Das RegisterCallbackFunctions Methode registriert die drucken Funktion als Rückruffunktion, die Sie in der Browserkonsole verwenden können.

WebAssembly ist ein experimentelles Feature in vielen Sprachen, einschließlich Go

WebAssembly-Funktionen sind für viele Sprachen relativ neu, insbesondere seit die Sprache kürzlich zum W3C-Standard wurde. Das js Das Paket ist experimentell und das Paket ist vom Go-Kompatibilitätsversprechen ausgenommen.