ClockExample Go WebAssembly

Catatan Rilis

Ini telah diperbarui untuk bekerja dengan GO versi 1.12. Ini tidak akan lagi bekerja dengan versi GO sebelumnya karena fungsi js.newcallback () di 1.11 digantikan oleh js.funcof () di 1.12.

Jam digital

Ini adalah contoh yang sangat sederhana yang menunjukkan cara menerapkan timer di Go/WebAssembly. Saya memutuskan untuk menulisnya karena pada saat itu (November 2018), dukungan WebAssembly Go masih sangat baru dan ada beberapa contoh tutorial yang bagus secara online.

Contoh dalam JavaScript

Dalam JavaScript, jam digital sederhana dapat diimplementasikan seperti ini:

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

window.onload = UpdateClock;

Baris terakhir memanggil fungsi UpdateClock() saat halaman dimuat. Baris terakhir di UpdateClock() memanggil setTimeout() untuk menghubungi UpdateClock() lagi setelah satu detik (1000 milidetik), sehingga jam akan terus diperbarui.

Dalam UpdateClock() , waktu diambil dengan membuat objek Date baru, menyesuaikan waktu ke zona waktu setempat dengan toLocaleTimeString() , kemudian memasukkannya ke dalam DOM browser. Di HTML, ada tag yang terlihat seperti

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

yang tidak memiliki konten dalam contoh ini. getElementById() mendapatkan pegangan pada tag itu sehingga dapat dimodifikasi. Setiap kali teks diperbarui, browser memperbarui tampilan.

Ayo lakukan itu di Go

Jadi bagaimana kita melakukannya semua itu? Mari kita ambil langkah demi langkah.

Membuat objek Date baru dilakukan seperti ini:

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

js.Global() Mendapat Objek Global JavaScript, dan Get("Date") mengembalikan objek Date . New() menciptakan contoh baru. Untuk mendapatkan waktu setempat,

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

Panggilan metode toLocaleTimeString() now , lalu mengubahnya menjadi jenis string go. Inilah yang ingin kami gunakan untuk konten teks di halaman web. Untuk mengaturnya,

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

Sekali lagi mendapatkan objek global JavaScript, mendapatkan objek dokumennya, dan memanggil document.getElementById() menggunakan " clock " sebagai ID. Menggunakan objek yang dikembalikan, js.Set() mengatur properti textContent (sama seperti innerHTML ) ke waktu saat ini.

Bagian terakhir adalah mengatur acara timer. Daripada menggunakan settimer () setiap kali kami memperbarui waktu, mari kita atur timer interval untuk mengirimkan acara timer setiap 200 ms, dan hubungi kode pembaruan dari itu.

 timer_cb := js.FuncOf(update_time)

Membuat panggilan balik ke function update_time() yang berisi kode Go di atas. Kemudian

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

Panggilan fungsi javascript setInterval() untuk menjalankan panggilan balik setiap 200 milidetik.

Menyatukannya

Ini kode GO lengkap:

 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
}

dan di main (),

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

Seperti yang Anda lihat, menulis "JavaScript in Go" lebih bertele -tele dan rumit karena kita perlu menggunakan paket js Go untuk mengakses JavaScript dari Go. Tetapi fungsi dan metode dalam js menyediakan cara bagi kita untuk melakukan segalanya dalam perjalanan yang dapat dilakukan dalam JavaScript, dan ada korespondensi hampir 1: 1 antara kode JavaScript dan apa yang perlu kita tulis di Go. Jadi meskipun ini sedikit lebih rumit, itu benar -benar tidak sulit sama sekali.

Menggunakan repositori

Anda dapat melihat kode yang sebenarnya (dengan beberapa perbedaan kecil dibandingkan dengan file readme ini) di main.go

File -file berikut diperlukan untuk penyebaran:

Untuk fungsi dasar

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

Untuk penampilan (CSS dan gambar)

 backgnd_tile.gif
favicon.ico
styles.css

Penyebaran

Cukup salin semua file dalam dua grup di atas ke direktori di server web Anda. Untuk melihat jam dijalankan, muat index.html ke browser web Anda.

Server web sederhana yang ditulis dalam Go disertakan. Untuk melihat halaman di komputer Anda, mulai server web, seperti ini

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

Kemudian arahkan browser Anda ke http: // localhost: 8080

Pengarang

 Jay Ts
(http://jayts.com)

Hak cipta

 Copyright 2018-2019 Jay Ts

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