GoでHello WebAssembly

golangでwasmの hello world

ここ「golang WebAssembly」を参考にやっていきます。

環境をDockerで

そのまま、Go オフィシャルイメージでもOK。参考サイトがgoexec使っていたので、ついでに入れておく

DockerFile

from golang:1.12rc1-alpine3.9
RUN apk add git
RUN go get -u github.com/shurcooL/goexec

ビルド

適当なタグ名つけてビルド

docker build -t eg-golang .

コンテナ起動

docker run --rm -it -p 8080:8080 -v "$PWD":/usr/src/myapp -w /usr/src/myapp eg-golang ash

実装

今回は、main.go と index.htmlの２ファイル。dockerの中の /usr/src/myappフォルダに作る。

main.go

package main

import "fmt"

func main() {
	fmt.Println("Hello, WebAssembly!")
}

index.html

<html>
<head>
    <meta charset="utf-8">
    <script src="wasm_exec.js"></script>
    <script>
        const go = new Go();
        WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
            go.run(result.instance);
        });
    </script>
	</head>
	<body></body>
</html>

wasm_exec.jsをコピー

wasm_exec.jsが必要なので、GOROOTから同じディレクトリにCopyする。

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

ビルド

main.go を main.wasmにビルドする

GOOS=js GOARCH=wasm go build -o main.wasm

動作確認

goexec 'http.ListenAndServe(":8080", http.FileServer(http.Dir(".")))'

これで、ブラウザからアクセスして、コンソールに Hello が出ればOK