github/7days-golang
4
0
Fork 0
mirror of https://github.com/geektutu/7days-golang.git synced 2024-04-21 12:32:11 +00:00
Code Issues Releases Wiki Activity

add go webassembly demo

Browse Source
This commit is contained in:
gzdaijie
2020-01-23 23:18:02 +08:00
parent 06acaa50f3
commit 874b544e0e
14 changed files with 218 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+10 -1
View File
@@ -16,4 +16,13 @@ Gee 的设计与实现参考了Gin，[Go Gin简明教程](https://geektutu.com/p
- [第四天：分组控制(Group)](https://geektutu.com/post/gee-day4.html)，[Code - Github](gee-web/day4-group)
- [第五天：中间件(Middleware)](https://geektutu.com/post/gee-day5.html)，[Code - Github](gee-web/day5-middleware)
- [第六天：HTML模板(Template)](https://geektutu.com/post/gee-day6.html)，[Code - Github](gee-web/day6-template)
- [第七天：错误恢复(Panic Recover)](https://geektutu.com/post/gee-day7.html)，[Code - Github](gee-web/day7-panic-recover)
- [第七天：错误恢复(Panic Recover)](https://geektutu.com/post/gee-day7.html)，[Code - Github](gee-web/day7-panic-recover)
## WebAssembly Demo
#### [教程地址](https://geektutu.com/post/quick-go-wasm.html)
- [1. Hello World](demo-wasm/hello-world)
- [2. 注册函数](demo-wasm/hello-world)
- [3. 操作 DOM](demo-wasm/hello-world)
- [4. 回调函数](demo-wasm/hello-world)
demo-wasm/.gitignore
+2
View File
@@ -0,0 +1,2 @@
*.wasm
static
demo-wasm/callback/Makefile
+11
View File
@@ -0,0 +1,11 @@
all: static/main.wasm static/wasm_exec.js
ifeq (, $(shell which goexec))
go get -u github.com/shurcooL/goexec
endif
goexec 'http.ListenAndServe(`:9999`, http.FileServer(http.Dir(`.`)))'
static/wasm_exec.js:
cp "$(shell go env GOROOT)/misc/wasm/wasm_exec.js" static
static/main.wasm: main.go
GO111MODULE=auto GOOS=js GOARCH=wasm go build -o static/main.wasm .
demo-wasm/callback/index.html
+18
View File
@@ -0,0 +1,18 @@
<html>
<head>
<script src="static/wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("static/main.wasm"), go.importObject)
.then((result) => go.run(result.instance));
</script>
</head>
<body>
<input id="num" type="number" />
<button id="btn" onclick="fibFunc(num.value * 1, (v)=> ans.innerHTML=v)">Click</button>
<p id="ans"></p>
</body>
</html>
demo-wasm/callback/main.go
+32
View File
@@ -0,0 +1,32 @@
// main.go
package main
import (
"syscall/js"
"time"
)
func fib(i int) int {
if i == 0 || i == 1 {
return 1
}
return fib(i-1) + fib(i-2)
}
func fibFunc(this js.Value, args []js.Value) interface{} {
callback := args[len(args)-1]
go func() {
time.Sleep(3 * time.Second)
v := fib(args[0].Int())
callback.Invoke(v)
}()
js.Global().Get("ans").Set("innerHTML", "Waiting 3s...")
return nil
}
func main() {
done := make(chan int, 0)
js.Global().Set("fibFunc", js.FuncOf(fibFunc))
<-done
}
demo-wasm/hello-world/Makefile
+11
View File
@@ -0,0 +1,11 @@
all: static/main.wasm static/wasm_exec.js
ifeq (, $(shell which goexec))
go get -u github.com/shurcooL/goexec
endif
goexec 'http.ListenAndServe(`:9999`, http.FileServer(http.Dir(`.`)))'
static/wasm_exec.js:
cp "$(shell go env GOROOT)/misc/wasm/wasm_exec.js" static
static/main.wasm: main.go
GO111MODULE=auto GOOS=js GOARCH=wasm go build -o static/main.wasm .
demo-wasm/hello-world/index.html
+12
View File
@@ -0,0 +1,12 @@
<html>
<head>
<script src="static/wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("static/main.wasm"), go.importObject)
.then((result) => go.run(result.instance));
</script>
</head>
</html>
demo-wasm/hello-world/main.go
+9
View File
@@ -0,0 +1,9 @@
// main.go
package main
import "syscall/js"
func main() {
alert := js.Global().Get("alert")
alert.Invoke("Hello World!")
}
demo-wasm/manipulate-dom/Makefile
+11
View File
@@ -0,0 +1,11 @@
all: static/main.wasm static/wasm_exec.js
ifeq (, $(shell which goexec))
go get -u github.com/shurcooL/goexec
endif
goexec 'http.ListenAndServe(`:9999`, http.FileServer(http.Dir(`.`)))'
static/wasm_exec.js:
cp "$(shell go env GOROOT)/misc/wasm/wasm_exec.js" static
static/main.wasm: main.go
GO111MODULE=auto GOOS=js GOARCH=wasm go build -o static/main.wasm .
demo-wasm/manipulate-dom/index.html
+18
View File
@@ -0,0 +1,18 @@
<html>
<head>
<script src="static/wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("static/main.wasm"), go.importObject)
.then((result) => go.run(result.instance));
</script>
</head>
<body>
<input id="num" type="number" />
<button id="btn">Click</button>
<p id="ans">1</p>
</body>
</html>
demo-wasm/manipulate-dom/main.go
+34
View File
@@ -0,0 +1,34 @@
package main
import (
"strconv"
"syscall/js"
)
func fib(i int) int {
if i == 0 || i == 1 {
return 1
}
return fib(i-1) + fib(i-2)
}
var (
document = js.Global().Get("document")
numEle = document.Call("getElementById", "num")
ansEle = document.Call("getElementById", "ans")
btnEle = js.Global().Get("btn")
)
func fibFunc(this js.Value, args []js.Value) interface{} {
v := numEle.Get("value")
if num, err := strconv.Atoi(v.String()); err == nil {
ansEle.Set("innerHTML", js.ValueOf(fib(num)))
}
return nil
}
func main() {
done := make(chan int, 0)
btnEle.Call("addEventListener", "click", js.FuncOf(fibFunc))
<-done
}
demo-wasm/register-functions/Makefile
+11
View File
@@ -0,0 +1,11 @@
all: static/main.wasm static/wasm_exec.js
ifeq (, $(shell which goexec))
go get -u github.com/shurcooL/goexec
endif
goexec 'http.ListenAndServe(`:9999`, http.FileServer(http.Dir(`.`)))'
static/wasm_exec.js:
cp "$(shell go env GOROOT)/misc/wasm/wasm_exec.js" static
static/main.wasm: main.go
GO111MODULE=auto GOOS=js GOARCH=wasm go build -o static/main.wasm .
demo-wasm/register-functions/index.html
+18
View File
@@ -0,0 +1,18 @@
<html>
<head>
<script src="static/wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("static/main.wasm"), go.importObject)
.then((result) => go.run(result.instance));
</script>
</head>
<body>
<input id="num" type="number" />
<button id="btn" onclick="ans.innerHTML=fibFunc(num.value * 1)">Click</button>
<p id="ans">1</p>
</body>
</html>
demo-wasm/register-functions/main.go
+21
View File
@@ -0,0 +1,21 @@
// main.go
package main
import "syscall/js"
func fib(i int) int {
if i == 0 || i == 1 {
return 1
}
return fib(i-1) + fib(i-2)
}
func fibFunc(this js.Value, args []js.Value) interface{} {
return js.ValueOf(fib(args[0].Int()))
}
func main() {
done := make(chan int, 0)
js.Global().Set("fibFunc", js.FuncOf(fibFunc))
<-done
}