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を使ってみてください。
コメントは受け付けていません。