これは、GOバージョン1.12で動作するように更新されました。 1.11の関数js.newcallback()が1.12のjs.funcof()に置き換えられたため、以前のバージョンのGoでは機能しなくなります。
これは、GO/WebAssemblyでタイマーを実装する方法を示す非常に簡単な例です。当時(2018年11月)、GoのWebAssemblyサポートはまだ非常に新しいものであり、オンラインで良いチュートリアルの例はほとんどなかったため、書き込むことにしました。
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()を呼び出して、1秒(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文字列型に変換します。これは、Webページのテキストコンテンツに使用したいものです。それを設定するには、
js.Global().Get("document").Call("getElementById", "clock").Set("textContent", s)
再びJavaScriptグローバルオブジェクトを取得し、ドキュメントclockを取得し、 document.getElementById()を呼び出します。返されたオブジェクトを使用して、 js.Set()は、 textContent ( innerHTMLと同じ)プロパティを現在に設定します。
最後の部分は、タイマーイベントをセットアップすることです。時間を更新するたびにsittimer()を使用するのではなく、200ミリ秒ごとにタイマーイベントを配信するためにインターバルタイマーを設定し、そこから更新コードを呼び出します。
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のJavaScriptにアクセスするためにGOのjsパッケージを使用する必要があるため、より冗長で複雑です。しかし、 jsの関数と方法は、JavaScriptで実行できるすべてを行う方法を提供し、JavaScriptコードとGOで書く必要があるものとの間にはほぼ1:1の対応があります。そのため、もう少し複雑ですが、まったく難しくありません。
main.goで実際のコード(このREADMEファイルと比較していくつかのわずかな違いがある)を見ることができます。
展開には、次のファイルが必要です。
index.html - the web page
main.wasm - the compiled Go code
wasm_exec.js - standard JavaScript glue code
backgnd_tile.gif
favicon.ico
styles.css
上記の2つのグループのすべてのファイルをWebサーバーのディレクトリにコピーするだけです。クロックの実行を確認するには、index.htmlをWebブラウザーにロードします。
GOに記載されているシンプルなWebサーバーが含まれています。コンピューターのページを表示するには、このように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)