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)