ClockExample Go WebAssembly
1.0.0
Dies wurde aktualisiert, um mit GO Version 1.12 zu arbeiten. Es funktioniert nicht mehr mit früheren Versionen von Go, da die Funktion Js.Newcallback () in 1.11 in 1.12 durch js.funcof () ersetzt wurde.
Dies ist ein sehr einfaches Beispiel, das zeigt, wie ein Timer in Go/WebAssembly implementiert wird. Ich habe mich entschlossen, es aufzuschreiben, weil zu dieser Zeit (November 2018) die Unterstützung von Go noch sehr neu war und es nur wenige gute Tutorial -Beispiele online gab.
In JavaScript kann eine einfache digitale Uhr so implementiert werden:
function UpdateClock()
{
var now = new Date();
var elt = document.getElementById("clock");
elt.innerHTML = now.toLocaleTimeString();
setTimeout(UpdateClock,1000)
}
window.onload = UpdateClock;
Die letzte Zeile ruft die Funktion UpdateClock() auf, wenn die Seite geladen wird. Die letzte Zeile in UpdateClock() ruft setTimeout() auf, um UpdateClock() nach einer Sekunde (1000 Millisekunden) erneut aufzurufen, sodass die Uhr weiter aktualisiert wird.
Innerhalb von UpdateClock() wird die Zeit abgerufen, indem ein neues Date erstellt wird, die Zeit an die lokale Zeitzone mit toLocaleTimeString() anpasst und diese dann in den DOM des Browsers einfügt. In der HTML gibt es ein Tag, das ungefähr so aussieht wie
<div id="clock"></div>
Das hat keinen Inhalt in diesem Beispiel. getElementById() erhält dieses Tag, damit es geändert werden kann. Jedes Mal, wenn der Text aktualisiert wird, aktualisiert das Browser die Anzeige.
Wie machen wir das alles in Go? Nehmen wir es Schritt für Schritt.
Das Erstellen eines neuen Date erfolgt wie folgt:
now := js.Global().Get("Date").New()
js.Global() erhält das javaScript globale Objekt und Get("Date") das Date zurück. New() erstellt eine neue Instanz davon. Um die Ortszeit zu bekommen,
s := now.Call("toLocaleTimeString").String()
Ruft die Methode toLocaleTimeString() von now und wandelt sie dann in einen GO -String -Typ um. Dies möchten wir für den Textinhalt auf der Webseite verwenden. Um das zu setzen,
js.Global().Get("document").Call("getElementById", "clock").Set("textContent", s)
Wiederholt das JavaScript Global Object, erhält sein Dokumentobjekt und ruft document.getElementById() mit " clock " als ID auf. Unter Verwendung des zurückgegebenen Objekts legt js.Set() die Eigenschaft textContent (die gleiche wie innerHTML ) auf die aktuelle Zeit fest.
Der letzte Teil besteht darin, ein Timer -Event einzurichten. Anstatt SetTimer () jedes Mal zu verwenden, wenn wir die Zeit aktualisieren, richten wir einen Intervall -Timer ein, um Timer -Ereignisse alle 200 ms zu liefern und den Update -Code daraus aufzurufen.
timer_cb := js.FuncOf(update_time)
Erstellt einen Rückruf zum function update_time() , der den obigen GO -Code enthält. Dann
js.Global().Call("setInterval",timer_cb,"200")
Ruft die Funktion javaScript setInterval() auf, um den Rückruf alle 200 Millisekunden auszuführen.
Hier ist der vollständige Go -Code:
func update_time(this js.Value, args []js.Value) interface{} {
s := js.Global().Get("Date").New().Call("toLocaleTimeString").String()
js.Global().Get("document").Call("getElementById", "clock").Set("textContent", s)
return nil
}
und in Main (),,
timer_cb := js.FuncOf(update_time)
js.Global().Call("setInterval",timer_cb,"200")
Wie Sie sehen können, ist das Schreiben von "JavaScript in Go" ausführlicher und komplizierter, da wir js -Paket von GO verwenden müssen, um von Go auf JavaScript zuzugreifen. Funktionen und Methoden in js bieten uns jedoch Möglichkeiten, alles in Go zu tun, das in JavaScript erfolgen kann, und es gibt eine Korrespondenz zwischen dem JavaScript -Code und dem, was wir in Go schreiben müssen. Obwohl es etwas komplizierter ist, ist es wirklich nicht schwierig.
Sie können den tatsächlichen Code (mit einigen geringfügigen Unterschieden im Vergleich zu dieser Readme -Datei) in main.go sehen.
Die folgenden Dateien sind für die Bereitstellung erforderlich:
index.html - the web page
main.wasm - the compiled Go code
wasm_exec.js - standard JavaScript glue code
backgnd_tile.gif
favicon.ico
styles.css
Kopieren Sie einfach alle Dateien in den beiden oben genannten Gruppen in ein Verzeichnis auf Ihrem Webserver. Um den Taktlauf zu sehen, laden Sie index.html in Ihren Webbrowser.
Ein einfacher Webserver in GO ist enthalten. Um die Seite auf Ihrem Computer anzuzeigen, starten Sie den Webserver wie diese
$ go run webserver.go
2019/02/26 09:34:55 listening on ":8080"...
Legen Sie dann Ihren Browser auf http: // localhost: 8080
Jay Ts
(http://jayts.com)
Copyright 2018-2019 Jay Ts
Released under the GNU Public License, version 3.0 (GPLv3)
(http://www.gnu.org/licenses/gpl.html)
