ClockExample Go WebAssembly

Выпуск заметок

Это было обновлено для работы с версией GO 1.12. Он больше не будет работать с предыдущими версиями GO, потому что функция js.newcallback () в 1.11 была заменена на js.funcof () в 1.12.

Цифровые часы

Это очень простой пример, показывающий, как реализовать таймер в Go/Webassembly. Я решил написать это, потому что в то время (ноябрь 2018 года) поддержка Go Webassembly была все еще новой, и в Интернете было несколько хороших учебных примеров.

Пример в JavaScript

В JavaScript простые цифровые часы могут быть реализованы таким образом:

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

window.onload = UpdateClock;

Последняя строка вызывает функцию UpdateClock() при загрузке страницы. Последняя строка в UpdateClock() вызывает setTimeout() для вызова UpdateClock() снова через одну секунду (1000 миллисекунд), поэтому часы будут продолжать обновляться.

Внутри UpdateClock() время получено путем создания нового объекта Date , настраивая время в локальный часовой пояс с toLocaleTimeString() , а затем вставил его в DOM браузера. В HTML есть тег, который выглядит как

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

который не имеет контента в этом примере. getElementById() получает рукоятку по этому тегу, так что его можно изменить. Каждый раз, когда текст обновляется, браузер обновляет дисплей.

Давай сделаем это в ходе

Итак, как мы делаем все это в ходе? Давайте сделаем это шаг за шагом.

Создание нового объекта Date выполняется так:

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

js.Global() получает глобальный объект JavaScript, а Get("Date") возвращает объект Date . New() создает новый экземпляр этого. Чтобы получить местное время,

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

Вызывает метод toLocaleTimeString() now , затем преобразует его в тип строки GO. Это то, что мы хотим использовать для текстового контента на веб -странице. Чтобы установить это,

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

Опять же, получает Global объект JavaScript, получает свой объект документа и вызывает document.getElementById() , используя « clock » в качестве идентификатора. Используя возвращаемый объект, js.Set() устанавливает свойство textContent (так же, как innerHTML ) в текущее время.

Последняя часть - настроить событие таймера. Вместо того, чтобы использовать SetTimer () каждый раз, когда мы обновляем время, давайте настроим интервал -таймер для доставки событий таймера каждые 200 мс, и вызовут код обновления из этого.

 timer_cb := js.FuncOf(update_time)

Создает обратный вызов для function update_time() , который содержит приведенный выше код GO. Затем

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

Вызывает функцию JavaScript setInterval() для запуска обратного вызова каждые 200 миллисекунд.

Собрать это вместе

Вот полный код GO:

 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
}

и в main (),

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

Как вы можете видеть, написание «javaScript in Go» более словесно и сложна, потому что нам нужно использовать Go js -пакет для доступа к JavaScript от Go. Но функции и методы в js предоставляют нам способы сделать все, что можно сделать в JavaScript, и между кодом JavaScript существует почти 1: 1. Так что, хотя это немного сложнее, это совсем не сложно.

Использование репозитория

Вы можете увидеть фактический код (с некоторыми незначительными различиями по сравнению с этим файлом Readme) в main.go

Для развертывания необходимы следующие файлы:

Для основной функциональности

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

Для внешнего вида (CSS и изображения)

 backgnd_tile.gif
favicon.ico
styles.css

Развертывание

Просто скопируйте все файлы в двух вышеуказанных группах в каталог на вашем веб -сервере. Чтобы увидеть запуск часов, загрузите index.html в свой веб -браузер.

Простой веб -сервер, записанный в Go, включен. Чтобы просмотреть страницу на вашем компьютере, запустите веб -сервер, как это

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

Затем направьте свой браузер на 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)