ClockExample Go WebAssembly

Notes de libération

Cela a été mis à jour pour fonctionner avec GO version 1.12. Il ne fonctionnera plus avec les versions précédentes de GO car la fonction js Js.NewCallback () en 1.11 a été remplacée par Js.Funcof () dans 1.12.

Horloge numérique

Ceci est un exemple très simple montrant comment implémenter une minuterie dans Go / WebAssembly. J'ai décidé de l'écrire car à l'époque (novembre 2018), le support WebAssembly de Go était encore très nouveau et il y avait peu de bons exemples de tutoriels en ligne.

Exemple dans JavaScript

Dans JavaScript, une simple horloge numérique peut être implémentée comme ceci:

 function UpdateClock()
{
        var now = new Date();
        var elt = document.getElementById("clock");
        elt.innerHTML = now.toLocaleTimeString();
        setTimeout(UpdateClock,1000)
}

window.onload = UpdateClock;

La dernière ligne appelle la fonction UpdateClock() lorsque la page est chargée. La dernière ligne de UpdateClock() appelle setTimeout() pour appeler à nouveau UpdateClock() après une seconde (1000 millisecondes), donc l'horloge continuera à mettre à jour.

Dans UpdateClock() , le temps est récupéré en créant un nouvel objet Date , en ajustant l'heure au fuseau horaire local avec toLocaleTimeString() , puis en insérant cela dans le DOM du navigateur. Dans le HTML, il y a une balise qui ressemble à quelque chose

 <div id="clock"></div>

qui n'a pas de contenu dans cet exemple. getElementById() obtient une poignée sur cette balise afin qu'elle puisse être modifiée. Chaque fois que le texte est mis à jour, le navigateur met à jour l'affichage.

Faisons ça dans Go

Alors, comment faisons-nous tout cela en Go? Prenons pas par étape.

La création d'un nouvel objet Date est fait comme ceci:

 now := js.Global().Get("Date").New()

js.Global() obtient l'objet global JavaScript et Get("Date") renvoie l'objet Date . New() en crée une nouvelle instance. Pour obtenir l'heure locale,

 s := now.Call("toLocaleTimeString").String()

Appelle la méthode toLocaleTimeString() de now , puis la convertit en un type de chaîne Go. C'est ce que nous voulons utiliser pour le contenu texte de la page Web. Pour définir cela,

 js.Global().Get("document").Call("getElementById", "clock").Set("textContent", s)

Obtient à nouveau l'objet Global JavaScript, obtient son objet de document et appelle document.getElementById() en utilisant " clock " comme ID. En utilisant l'objet renvoyé, js.Set() définit la propriété textContent (la même chose que innerHTML ) à l'heure actuelle.

La dernière partie consiste à mettre en place un événement de minuterie. Plutôt que d'utiliser Settimer () chaque fois que nous mettons à jour l'heure, configurons un minuteur d'intervalle pour livrer des événements de minuterie tous les 200 ms et appelons le code de mise à jour à partir de cela.

 timer_cb := js.FuncOf(update_time)

Crée un rappel pour function update_time() qui contient le code GO ci-dessus. Alors

 js.Global().Call("setInterval",timer_cb,"200")

Appelle la fonction JavaScript setInterval() pour exécuter le rappel toutes les 200 millisecondes.

L'asseoir ensemble

Voici le code de rendez-vous complet:

 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
}

et dans main (),

 timer_cb := js.FuncOf(update_time)
js.Global().Call("setInterval",timer_cb,"200")

Comme vous pouvez le voir, l'écriture de "JavaScript in Go" est plus verbeux et compliquée car nous devons utiliser le package js de Go pour accéder à JavaScript depuis Go. Mais les fonctions et les méthodes en js nous fournissent des moyens de faire tout ce qui peut être fait en JavaScript, et il y a une correspondance de près de 1: 1 entre le code JavaScript et ce que nous devons écrire en Go. Donc, même si c'est un peu plus compliqué, ce n'est vraiment pas du tout difficile.

Utilisation du référentiel

Vous pouvez voir le code réel (avec quelques différences mineures par rapport à ce fichier ReadMe) dans main.go

Les fichiers suivants sont nécessaires pour le déploiement:

Pour les fonctionnalités de base

 index.html	- the web page
main.wasm	- the compiled Go code
wasm_exec.js	- standard JavaScript glue code

Pour l'apparence (CSS et images)

 backgnd_tile.gif
favicon.ico
styles.css

Déploiement

Copiez simplement tous les fichiers dans les deux groupes ci-dessus dans un répertoire de votre serveur Web. Pour voir l'exécution de l'horloge, chargez index.html dans votre navigateur Web.

Un serveur Web simple écrit en Go est inclus. Pour afficher la page de votre ordinateur, démarrez le serveur Web, comme celui-ci

 $ go run webserver.go
2019/02/26 09:34:55 listening on ":8080"...

puis dirigez votre navigateur vers http: // localhost: 8080

Auteur

 Jay Ts
(http://jayts.com)

Droit d'auteur

 Copyright 2018-2019 Jay Ts

Released under the GNU Public License, version 3.0 (GPLv3)
(http://www.gnu.org/licenses/gpl.html)