江端さんの技術メモ(2020-03-15)

2020-03-15 go webassembly experiments をローカルPCで動かす [長年日記]

go webassembly experiments をローカルPCで動かす

2020/03/14
背景
- ■これからは「C/C++ → Go」と「JavaScript → Webassembly」とシフトしながら色々やっていこうと思っている
  
  ■正直、どっちも難しい。そういう時は、サンプルをパクって勉強するのが正解 ―― と思っている
目的
- ■取り敢えず、https://github.com/stdiopt/gowasm-experiments にある、 https://stdiopt.github.io/gowasm-experiments/bouncy/ をローカルで動かせるようになろう、と考えた
  - ~ https://github.com/stdiopt/gowasm-experiments
  - ~ https://stdiopt.github.io/gowasm-experiments/bouncy/
環境
- ■Windows7 or 10
- ■Go と python3 をインストールしてある
やってみたこと
- ■サンプルプログラムをダウンロードして、コンパイルしてみた
  - ~ https://github.com/stdiopt/gowasm-experiments/tree/master/bouncy
  - コマンドプロンプトからこんな感じでコンパイルできた
    - $ set GOOS=js
    - $ set GOARCH=wasm
    - $ go build -o main.wasm main.go
    - ちなみに、bashの環境があれば、build.shでコンパイルできる
  - 実際には、コンパイルしなくても、バイナリコード(main.wasm)も、ダウンロードの中に入っているので、コンパイルは不要だったが
- ■ローカルサーバとしては、色々試してみた
  - python3 -m http.server 8080
  - Goでサーバも作ってみた
  - Perlでもやってみた
- ■動画がどうしても出てこない
- ■ここから丸2日間の格闘のスタート
  - もう、色々探しまくった
確認していた問題点
- ■Google Chromoから、→ 「その他のツール」 → 「ディベロッパーツール」 →
  - Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
    この「Expected 'application/wasm'.」がどうにも、不味いらしい ―― が、解決方法が、どうにも見つからない
- ■kobore.netのサーバに上げても、改善が見られず

ローカルサーバを作ってみた

■httpsrv.pyを作った

#!/usr/bin/env python3
  import http.server
  import socketserver
  
  PORT = 8080
  
  Handler = http.server.SimpleHTTPRequestHandler
  Handler.extensions_map.update({
  '.wasm': 'application/wasm',
  })
  
  socketserver.TCPServer.allow_reuse_address = True
  with socketserver.TCPServer(("", PORT), Handler) as httpd:
  httpd.allow_reuse_address = True
  print("serving at port", PORT)
  httpd.serve_forever()

■httpsrv.pyを起動した
- $ python3 httpsrv.py
http://localhost:8080 で起動
- ■動いた
  
  ■動かなかったら、chromo → 「設定」 → 「閲覧履歴データの削除」でキャッシュをクリアてみること
  
  ■Windows10の環境では、独自につくったmain.wasmを動かすと、Uncaught (in promise) LinkError: WebAssembly Instantiation: Import #1 module="go" function="runtime.scheduleCallback" error: function import requires a callable というエラーが出てくることがある。この場合は、Windows10のGoの環境にあるwasm_exec.jsをパクってくる。私の場合は、C:\Go\misc\wasm にあったので、そこから取ってきた。

以上

[ツッコミを入れる]