ClockExample Go WebAssembly

Notas de liberação

Isso foi atualizado para funcionar com o Go versão 1.12. Ele não funcionará mais com versões anteriores do GO porque a função JS.NewCallback () em 1.11 foi substituída pelo JS.Funcof () em 1.12.

Relógio digital

Este é um exemplo muito simples, mostrando como implementar um cronômetro no Go/WebAssembly. Decidi escrevê -lo porque, na época (novembro de 2018), o suporte a WebAssembly do Go ainda era muito novo e havia poucos bons exemplos de tutoriais online.

Exemplo em JavaScript

Em JavaScript, um relógio digital simples pode ser implementado assim:

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

window.onload = UpdateClock;

A última linha chama a função UpdateClock() quando a página é carregada. A última linha no UpdateClock() chama setTimeout() para ligar para UpdateClock() novamente após um segundo (1000 milissegundos), para que o relógio continuará atualizando.

No UpdateClock() , o horário é recuperado criando um novo objeto Date , ajustando o horário para o fuso horário local com toLocaleTimeString() , depois inserindo isso no DOM do navegador. No HTML, há uma tag que se parece com

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

que não tem conteúdo neste exemplo. getElementById() controla essa tag para que ela possa ser modificada. Toda vez que o texto é atualizado, o navegador atualiza a tela.

Vamos fazer isso

Então, como fazemos tudo isso em Go? Vamos dar um passo a passo.

Criar um novo objeto Date é feito assim:

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

js.Global() recebe o objeto global JavaScript e Get("Date") retorna o objeto Date . New() cria uma nova instância. Para obter a hora local,

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

Chama o método toLocaleTimeString() de now e depois o converte em um tipo de string go. É isso que queremos usar para o conteúdo de texto na página da web. Para definir isso,

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

Novamente recebe o objeto global JavaScript, obtém seu objeto de documento e chama document.getElementById() usando " clock " como o ID. Usando o objeto retornado, js.Set() define a propriedade textContent (a mesma da innerHTML ) para o horário atual.

A última parte é configurar um evento de timer. Em vez de usar o settimer () toda vez que atualizamos o horário, vamos configurar um timer de intervalo para entregar eventos de temporizador a cada 200 ms e chamar o código de atualização disso.

 timer_cb := js.FuncOf(update_time)

Cria um retorno de chamada para function update_time() que contém o código GO acima. Então

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

Chama a função JavaScript setInterval() para executar o retorno de chamada a cada 200 milissegundos.

Juntando

Aqui está o código 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
}

e em main (),

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

Como você pode ver, escrever "JavaScript in Go" é mais detalhado e complicado, porque precisamos usar o pacote js do Go para acessar o JavaScript do Go. Mas as funções e métodos no js fornecem maneiras de fazer tudo o que pode ser feito no JavaScript, e há uma correspondência de quase 1: 1 entre o código JavaScript e o que precisamos escrever no Go. Portanto, embora seja um pouco mais complicado, não é realmente difícil.

Usando o repositório

Você pode ver o código real (com algumas pequenas diferenças em comparação com este arquivo ReadMe) em main.go

Os seguintes arquivos são necessários para a implantação:

Para funcionalidade básica

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

Para aparência (CSS e imagens)

 backgnd_tile.gif
favicon.ico
styles.css

Implantação

Basta copiar todos os arquivos nos dois grupos acima para um diretório em seu servidor da web. Para ver a execução do relógio, carregue index.html no seu navegador da web.

Um servidor web simples escrito em Go está incluído. Para visualizar a página no seu computador, inicie o servidor da web, assim

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

Em seguida, direcione seu navegador para http: // localhost: 8080

Autor

 Jay Ts
(http://jayts.com)

Direitos autorais

 Copyright 2018-2019 Jay Ts

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