Golang编译wasm

使用Go

创建main.go文件

  • main.go
1
2
3
4
5
6
7
package main

import ("fmt")

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

编译go文件，得到lib.wasm文件

1
2
3
4
5
6
set GOOS=js
echo %GOOS%
set GOARCH=wasm
echo %GOARCH%
go build -o lib.wasm main.go
pause

获取wasm_exec.js

https://github.com/golang/go/blob/master/misc/wasm/wasm_exec.js

新建一个index.html文件

  • index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<!--
Copyright 2018 The Go Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>

<head>
	<meta charset="utf-8">
	<title>Go wasm</title>
</head>

<body>
	<!--
	Add the following polyfill for Microsoft Edge 17/18 support:
	<script src="https://cdn.jsdelivr.net/npm/text-encoding@0.7.0/lib/encoding.min.js"></script>
	(see https://caniuse.com/#feat=textencoder)
	-->
	<script src="wasm_exec.js"></script>
	<script>
		if (!WebAssembly.instantiateStreaming) { // polyfill
			WebAssembly.instantiateStreaming = async (resp, importObject) =- {
				const source = await (await resp).arrayBuffer();
				return await WebAssembly.instantiate(source, importObject);
			};
		}

        const go = new Go();
        console.log(go.importObject);
		console.log(WebAssembly);
		go.importObject.env = go.importObject.env || {};
		go.importObject.env['command-line-arguments.add'] = function(x, y) {
        	return x + y
		};

		let mod, inst;
		WebAssembly.instantiateStreaming(fetch("lib.wasm"), go.importObject).then((result) =- {
			mod = result.module;
			inst = result.instance;
			document.getElementById("runButton").disabled = false;
		}).catch((err) =- {
			console.error(err);
		});

		async function run() {
			console.clear();
			await go.run(inst);
			inst = await WebAssembly.instantiate(mod, go.importObject); // reset instance
        }
        
	</script>

	<button onClick="run();" id="runButton" disabled>Run</button>
</body>

</html>

需要go服务器支持wasm的meta类型

  • server.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package main

import (
	"flag"
	"log"
	"net/http"
)

var (
	listen = flag.String("listen", ":8080", "listen address")
	dir    = flag.String("dir", ".", "directory to serve")
)

func main() {
	flag.Parse()
	log.Printf("listening on %q...", *listen)
	err := http.ListenAndServe(*listen, http.FileServer(http.Dir(*dir)))
	log.Fatalln(err)
}

启动服务器

1
go run server.go

使用Tinygo

创建main.go文件

  • main.go
1
2
3
4
5
6
7
8
9
10
11
12
package main

func main() {
    println("Hello, tinygo wsam!!!")
    println("adding two numbers:", add(2, 3)) // expecting 5
}

func add(x, y int) int

func multiply(x, y int) int {
    return x * y;
}

编译go文件，得到lib.wasm文件

1
2
tinygo build -o lib.wasm -target wasm ./main.go
pause

获取wasm_exec.js

https://github.com/tinygo-org/tinygo/blob/release/targets/wasm_exec.js

新建一个index.html文件

  • index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<!--
Copyright 2018 The Go Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>

<head>
	<meta charset="utf-8">
	<title>Go wasm</title>
</head>

<body>
	<!--
	Add the following polyfill for Microsoft Edge 17/18 support:
	<script src="https://cdn.jsdelivr.net/npm/text-encoding@0.7.0/lib/encoding.min.js"></script>
	(see https://caniuse.com/#feat=textencoder)
	-->
	<script src="wasm_exec.js"></script>
	<script>
        const go = new Go();
		const WASM_URL = 'lib.wasm';
		go.importObject.env = go.importObject.env || {};
		go.importObject.env['command-line-arguments.add'] = function(x, y) {
        	return x + y
		};
		console.log(go.importObject);
		var wasm;
		if ('instantiateStreaming' in WebAssembly) {
			WebAssembly.instantiateStreaming(fetch(WASM_URL), go.importObject).then(function (obj) {
				wasm = obj.instance;
				go.run(wasm);
				console.log('multiplied two numbers:', wasm.exports.multiply(5, 3));
			})
		} else {
			fetch(WASM_URL).then(resp =>
				resp.arrayBuffer()
			).then(bytes =>
				WebAssembly.instantiate(bytes, go.importObject).then(function (obj) {
					wasm = obj.instance;
					go.run(wasm);
					console.log('multiplied two numbers:', wasm.exports.multiply(5, 3));
				})
			)
		}
		
	</script>
</body>

</html>

需要go服务器支持wasm的meta类型

  • server.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package main

import (
	"flag"
	"log"
	"net/http"
)

var (
	listen = flag.String("listen", ":8080", "listen address")
	dir    = flag.String("dir", ".", "directory to serve")
)

func main() {
	flag.Parse()
	log.Printf("listening on %q...", *listen)
	err := http.ListenAndServe(*listen, http.FileServer(http.Dir(*dir)))
	log.Fatalln(err)
}

启动服务器

1
go run server.go
编程语言
Golang wasm

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！