ClockExample Go WebAssembly

Notas de lanzamiento

Esto se ha actualizado para funcionar con Go Versión 1.12. Ya no funcionará con versiones anteriores de GO porque la función js.newscallback () en 1.11 fue reemplazada por js.funcof () en 1.12.

Reloj digital

Este es un ejemplo muy simple que muestra cómo implementar un temporizador en GO/WebAssembly. Decidí escribirlo porque en ese momento (noviembre de 2018), el soporte de WebAssembly de Go todavía era muy nuevo y había pocos buenos ejemplos de tutoriales en línea.

Ejemplo en JavaScript

En JavaScript, se puede implementar un reloj digital simple así:

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

window.onload = UpdateClock;

La última línea llama a la función UpdateClock() cuando se carga la página. La última línea en UpdateClock() llama setTimeout() para llamar UpdateClock() nuevamente después de un segundo (1000 milisegundos), por lo que el reloj continuará actualizándose.

Dentro de UpdateClock() , el tiempo se recupera creando un nuevo objeto Date , ajustando el tiempo a la zona horaria local con toLocaleTimeString() , luego insertándolo en el DOM del navegador. En el HTML, hay una etiqueta que se parece a

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

que no tiene contenido en este ejemplo. getElementById() obtiene un manejo de esa etiqueta para que pueda modificarse. Cada vez que se actualiza el texto, el navegador actualiza la pantalla.

Hagamos eso en Go

Entonces, ¿cómo hacemos todo eso en Go? Vamos a tomar paso a paso.

La creación de un nuevo objeto Date se hace así:

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

js.Global() obtiene el objeto global de JavaScript, y Get("Date") devuelve el objeto Date . New() crea una nueva instancia de él. Para obtener la hora local,

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

Llama al método toLocaleTimeString() de now , luego lo convierte en un tipo de cadena GO. Esto es lo que queremos usar para el contenido de texto en la página web. Para establecer eso,

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

Nuevamente obtiene el objeto global de JavaScript, obtiene su objeto de documento y llama document.getElementById() usando " clock " como ID. Usando el objeto devuelto, js.Set() establece la propiedad textContent (igual que innerHTML ) en la hora actual.

La última parte es configurar un evento de temporizador. En lugar de usar Settimer () cada vez que actualizamos la hora, configuremos un temporizador de intervalo para entregar eventos de temporizador cada 200 ms y llame al código de actualización de eso.

 timer_cb := js.FuncOf(update_time)

Crea una devolución de llamada para function update_time() que contiene el código GO anterior. Entonces

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

Llama a la función JavaScript setInterval() para ejecutar la devolución de llamada cada 200 milisegundos.

Ponlo juntos

Aquí está el código GO completo:

 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
}

y en main (),

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

Como puede ver, escribir "JavaScript in Go" es más detallado y complicado porque necesitamos usar el paquete js de Go para acceder a JavaScript desde Go. Pero las funciones y métodos en js nos proporcionan formas de hacer todo lo que se puede hacer en JavaScript, y hay una correspondencia de casi 1: 1 entre el código JavaScript y lo que necesitamos escribir en Go. Entonces, aunque es un poco más complicado, realmente no es difícil en absoluto.

Usando el repositorio

Puede ver el código real (con algunas diferencias menores en comparación con este archivo ReadMe) en main.go

Los siguientes archivos son necesarios para la implementación:

Para la funcionalidad básica

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

Para apariencia (CSS e imágenes)

 backgnd_tile.gif
favicon.ico
styles.css

Despliegue

Simplemente copie todos los archivos en los dos grupos anteriores a un directorio en su servidor web. Para ver el reloj que se ejecuta, cargue index.html en su navegador web.

Se incluye un servidor web simple escrito en GO. Para ver la página en su computadora, inicie el servidor web, como este

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

Luego dirija su navegador a http: // localhost: 8080

Autor

 Jay Ts
(http://jayts.com)

Derechos de autor

 Copyright 2018-2019 Jay Ts

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