search

使用创建好的 WebAssembly 代码

到目前为止，我们只生成了一个 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 浏览器将显示类似的输出。

02.13.5-1

Tip: 在第 12 章“Go 中的网络编程基础”中，你将学习如何在 Go 中开发自己的 Web 服务器。

但其实有一种测试 WebAssembly 应用程序的简便得多的方法，那就是使用Node.js。不需要 Web 服务器，因为 Node.js 是基于 Chrome V8 的 JavaScript 引擎构建的JavaScript运行时。

如果你已经在本地计算机上安装了Node.js，则可以执行以下命令：

第二个命令的输出将验证WebAssembly代码是否正确并生成所需的消息。请注意，第一个命令并不是必须的，因为它只是更改PATH环境变量的当前值，以便包括当前Go安装程序存储与WebAssembly相关的文件的目录。

Previous示例NextGo 编码风格建议

Last updated