到目前为止,我们只生成了一个 WebAssembly 二进制文件。所以,你仍然需要采取一些步骤,才能使用该 WebAssembly 二进制文件并在 Web 浏览器的窗口中查看其结果。
如果你使用Google Chrome 浏览器,则有一个标志可让你启用 Liftoff,Liftoff 是 WebAssembly 的编译器,从理论上讲,它可以提高 WebAssembly 代码的运行效率。尝试以下没什么副作用,你可以访问 chrome:// flags/#enable-webassembly-baseline 来开启它。
第一步是将main.wasm
复制到 Web 服务器的目录中。接下来,你将需要执行以下命令:
$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .
这会将 Go 安装的wasm_exec.js
复制到当前目录中。你应该将该文件放在与main.wasm
相同的 Web 服务器目录中。
这里用到的index.html
的代码:
<html>
<head>
<meta charset="utf-8" />
<title>Go and WebAssembly</title>
</head>
<body>
<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()
let mod, inst
WebAssembly.instantiateStreaming(fetch('main.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)
}
</script>
<button onClick="run();" id="runButton" disabled>Run</button>
</body>
</html>
请注意,由 HTML 代码创建的Run
按钮只有在 WebAssembly 代码加载完成的情况下点击有效。
下图显示了 WebAssembly 代码的输出,如 Google Chrome Web 浏览器的 JavaScript 控制台中所示。其他 Web 浏览器将显示类似的输出。
Tip: 在第 12 章“Go 中的网络编程基础”中,你将学习如何在 Go 中开发自己的 Web 服务器。
但其实有一种测试 WebAssembly 应用程序的简便得多的方法,那就是使用Node.js。不需要 Web 服务器,因为 Node.js 是基于 Chrome V8 的 JavaScript 引擎构建的JavaScript运行时。
如果你已经在本地计算机上安装了Node.js,则可以执行以下命令:
$ export PATH="$PATH:$(go env GOROOT)/misc/wasm"
$ GOOS=js GOARCH=wasm go run .
Creating WebAssembly code from Go!
第二个命令的输出将验证WebAssembly代码是否正确并生成所需的消息。请注意,第一个命令并不是必须的,因为它只是更改PATH环境变量的当前值,以便包括当前Go安装程序存储与WebAssembly相关的文件的目录。