为了理解 wasm in go，所以我写了下面的内容:
- 操作DOM
- 调用JS函数
- 定义一个可以被JS调用的函数
前两步没问题，但最后一步没有按预期工作，因为我收到 JavaScript 错误 function undefined，我的代码在下面，我遇到的问题是函数 子
package main
import (
"syscall/js"
)
// func sub(a, b float64) float64
func sub(this js.Value, inputs []js.Value) interface{} {
return inputs[0].Float() - inputs[1].Float()
}
func main() {
c := make(chan int) // channel to keep the wasm running, it is not a library as in rust/c/c++, so we need to keep the binary running
js.Global().Set("sub", js.FuncOf(sub))
alert := js.Global().Get("alert")
alert.Invoke("Hi")
println("Hello wasm")
num := js.Global().Call("add", 3, 4)
println(num.Int())
document := js.Global().Get("document")
h1 := document.Call("createElement", "h1")
h1.Set("innerText", "This is H1")
document.Get("body").Call("appendChild", h1)
<-c // pause the execution so that the resources we create for JS keep available
}
将其编译为 wasm 为:
GOOS=js GOARCH=wasm go build -o main.wasm wasm.go
将 wasm_exec.js 文件复制到与以下文件相同的工作文件夹中:
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .
我的 HTML 文件是:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WASM</title>
<script src="http://localhost:8080/www/lib.js"></script>
<!-- WASM -->
<script src="http://localhost:8080/www/wasm_exec.js"></script>
<script src="http://localhost:8080/www/loadWasm.js"></script>
</head>
<body>
</body>
<script>
console.log(sub(5,3));
</script>
</html>
lib.js 是:
function add(a, b){
return a + b;
}
loadWasm.js 是:
async function init(){
const go = new Go();
const result = await WebAssembly.instantiateStreaming(
fetch("http://localhost:8080/www/main.wasm"),
go.importObject
);
go.run(result.instance);
}
init();
服务器代码是:
package main
import (
"fmt"
"html/template"
"net/http"
)
func wasmHandler() http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
tmpl := template.Must(template.ParseFiles("www/home.html"))
w.Header().Set("Content-Type", "text/html; charset=utf-8")
w.Header().Set("Access-Control-Allow-Origin", "*")
err := tmpl.Execute(w, nil)
if err != nil {
fmt.Println(err)
}
})
}
func main() {
fs := http.StripPrefix("/www/", http.FileServer(http.Dir("./www")))
http.Handle("/www/", fs)
http.Handle("/home", wasmHandler())
http.ListenAndServe(":8080", nil)
}
我得到的输出是:
更新
我尝试使用下面的 TinyGO 示例，但遇到了几乎相同的问题:
//wasm.go
package main
// This calls a JS function from Go.
func main() {
println("adding two numbers:", add(2, 3)) // expecting 5
}
// module from JavaScript.
func add(x, y int) int
//export multiply
func multiply(x, y int) int {
return x * y
}
编译为:
tinygo build -o main2.wasm -target wasm -no-debug
cp "$(tinygo env TINYGOROOT)/targets/wasm_exec.js" .
和 server.go 为:
package main
import (
"log"
"net/http"
"strings"
)
const dir = "./www"
func main() {
fs := http.FileServer(http.Dir(dir))
log.Print("Serving " + dir + " on http://localhost:8080")
http.ListenAndServe(":8080", http.HandlerFunc(func(resp http.ResponseWriter, req *http.Request) {
resp.Header().Add("Cache-Control", "no-cache")
if strings.HasSuffix(req.URL.Path, ".wasm") {
resp.Header().Set("content-type", "application/wasm")
}
fs.ServeHTTP(resp, req)
}))
}
JS代码为:
const go = new Go(); // Defined in wasm_exec.js
go.importObject.env = {
'main.add': function(x, y) {
return x + y
}
// ... other functions
}
const WASM_URL = 'main.wasm';
var wasm;
if ('instantiateStreaming' in WebAssembly) {
WebAssembly.instantiateStreaming(fetch(WASM_URL), go.importObject).then(function (obj) {
wasm = obj.instance;
go.run(wasm);
})
} else {
fetch(WASM_URL).then(resp =>
resp.arrayBuffer()
).then(bytes =>
WebAssembly.instantiate(bytes, go.importObject).then(function (obj) {
wasm = obj.instance;
go.run(wasm);
})
)
}
// Calling the multiply function:
console.log('multiplied two numbers:', exports.multiply(5, 3));
我得到的输出是:
最佳答案
我找到了解决方案，我需要一些东西来检测并确认 wasm 已经加载并准备好进行处理，与 JS 中用来检查文档是否准备就绪的方法相同:
if (document.readyState === 'complete') {
// The page is fully loaded
}
// or
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
// document ready
}
};
因此，由于我代码中的 wasm 启动函数是 async 我在 JS 中使用了以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WASM</title>
<!-- WASM -->
<script src="http://localhost:8080/www/wasm_exec.js"></script>
<script src="http://localhost:8080/www/loadWasm.js"></script>
</head>
<body>
</body>
<script>
(async () => {
try {
await init();
alert("Wasm had been loaded")
console.log(multiply(5, 3));
} catch (e) {
console.log(e);
}
})();
/***** OR ****/
(async () => {
await init();
alert("Wasm had been loaded")
console.log(multiply(5, 3));
})().catch(e => {
console.log(e);
});
/*************/
</script>
</html>
这帮助我确定文档已准备好处理并调用 wasm 函数。
wasm 加载函数简单地变成了:
async function init(){
const go = new Go();
const result = await WebAssembly.instantiateStreaming(
fetch("http://localhost:8080/www/main.wasm"),
go.importObject
);
go.run(result.instance);
}
关于javascript - 从 JavaScript 调用函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69915566/