ClockExample Go WebAssembly

发行说明

已更新以使用GO版本1.12。它将不再使用GO的先前版本，因为1.11中1.11中的函数js.newcallback（）在1.12中被js.funcof（）替换。

数字时钟

这是一个非常简单的示例，展示了如何在GO/WebAssembly中实现计时器。我之所以决定写它，是因为当时（2018年11月），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()在一秒钟（1000毫秒）后再次调用UpdateClock() ，因此时钟将继续更新。

在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()

调用now的toLocaleTimeString()方法，然后将其转换为GO字符串类型。这就是我们要在网页中的文本内容中使用的内容。为此，

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

再次获取JavaScript全局对象，获取其文档对象，并使用“ clock ”作为ID调用document.getElementById() 。使用返回的对象， js.Set()将textContent （与innerHTML相同）属性设置为当前时间。

最后一部分是设置计时器事件。与其每次更新时间时使用settimer（）每次更新时间，让我们设置一个间隔计时器以每200 ms提供计时器事件，并从中调用更新代码。

 timer_cb := js.FuncOf(update_time)

创建对包含上述GO代码的function update_time()的回调。然后

 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")

如您所见，编写“ Go中的JavaScript”更加冗长且复杂，因为我们需要使用GO的js软件包从GO中访问JavaScript。但是js中的功能和方法为我们提供了可以在JavaScript中完成所有操作的所有操作的方法，并且JavaScript代码与我们需要在GO中写的内容之间有近1：1的对应关系。因此，尽管它更复杂，但确实并不困难。

使用存储库

您可以在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

部署

只需将上述两个组中的所有文件复制到Web服务器上的目录。要查看时钟运行，请将index.html加载到您的Web浏览器中。

包括一个简单的Web服务器，其中包括GO。要查看计算机上的页面，请启动Web服务器，这样

 $ 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)