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 で取れますので、この値も使います。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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を経由したデータ授受です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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を使ってみてください。
hifive開発者ブログ 
コメントは受け付けていません。