GoではじめるWebAssebmly その5「ウィンドウオブジェクト、localStorageを使う」
WebAssebmlyはWebブラウザ上でバイナリファイル(テキスト形式もあり)を実行できる環境です。JavaScriptと異なりコードの漏洩がなく、実行速度も高速というのがメリットです。
WebAssebmlyは元々Rustで開発することが多かったですが、最近では様々なプログラミング言語が対応しています。その一つがGoです。Go 1.11からWebAssembly向けにもコンパイルできるようになっています。
一般的なWebAssemblyはDOMやネットワーク操作が行えません。それに対してGo 1.11ではJavaScript APIを使えるようにした syscall/js
パッケージを用いることで、DOMやネットワーク操作を可能にしています。
そこで今回はさらに面白い、ウィンドウオブジェクトやlocalStorageをWebAssemblyから使ってみます。
オンライン、オフラインを検知する
Webアプリケーションのネットワーク状態を受け取るには window オブジェクトの online または offline イベントを使います。これももちろんGoのWebAssemblyの中に記述できます。
そしてオンライン、オフラインの値は navigator.onLine で取れますので、この値も使います。
func main() { | |
window := js.Global().Get("window") | |
navigator := js.Global().Get("navigator") | |
cb1 := js.NewCallback(func(args []js.Value) { | |
if navigator.Get("onLine").Bool() { | |
println("Network is Online"); | |
} else { | |
println("Network is Offline"); | |
} | |
}) | |
window.Call("addEventListener", "online", cb1) | |
window.Call("addEventListener", "offline", cb1) | |
<-make(chan struct{}, 0) | |
} |
これでWebAssembly側でもオンライン、オフラインの判定ができるようになります。
localStorageを使う
さらにWebブラウザとWebAssemblyでデータの送受信をする際に使ってみたいのがlocalStorageを経由したデータ授受です。
package main | |
import "syscall/js" | |
func main() { | |
window := js.Global().Get("window") | |
localStorage := window.Get("localStorage") | |
localStorage.Set("Hello", "World") | |
println("localStorage -> " + localStorage.Get("JavaScript").String()) | |
} |
このようなコードで localStorage に触って、データをセットしたり、値の取得を行えます。localStorageの場合、setItemやgetItemではなくSet/Getで値の授受ができるのが特徴です。 localStorage.Call("setItem", "Hello", "World")
ではうまくいきませんが、 localStorage.Get("getItem", "JavaScript")
は利用できます。
syscall/js
は非常によくできており、同時に利用する wasm_exec.js と組み合わせることでWebAssemblyからDOMやJavaScriptのAPIを透過的に扱えます。ちょっとした使い方さえ覚えてしまえばJavaScriptと変わらず使えるようになりそうです。
オンライン、オフライン判定などWebAssemnly単体では難しいことも容易に実現できます。ぜひGoでWebAssemblyを使ってみてください。
コメントは受け付けていません。