Golang WebAssembly 前端开发 - 1. Hello world.md

Platanuses · · 1042 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

本文使用的环境:

  • go1.11 linux/amd64
  • chrome 70.0.3538.67

Golang 源文件 main.go 如下:

package main

func main() {
    println("Hello, world!")
}

在 Golang 源文件目录下,将 Golang 代码编译为 wasm 后缀的 WebAssembly 二进制文件,再将该文件复制到一个工作目录中:

GOOS=js GOARCH=wasm go build -o go_main.wasm
cp go_main.wasm /path/to/static

工作目录下的 HTML 源文件 go_index.html 如下:

<html>
  <head>
    <meta charset="utf-8">
    <script src="wasm_exec.js"></script>
    <script>
      const go = new Go();
      WebAssembly.instantiateStreaming(fetch("go_main.wasm"), go.importObject).then((result) => {
        go.run(result.instance);
      });
    </script>
  </head>
  <body></body>
</html>

将 Golang SDK 中的 wasm_exec.js 复制到工作目录:

cp "$GOROOT/misc/wasm/wasm_exec.js" /path/to/static

使用诸如 nginx 之类的工具,将工作目录映射到 HTTP 服务。本文使用 nginx,配置如下:

server {
    listen 8081;
    location /static/ {
        root /path/to/;
    }
}

如果使用 nginx,可能需要在 types 指令中加上 wasm 文件的 content type:

application/wasm wasm;

此时在 Chrome 中访问:

http://127.0.0.1:8081/static/go_index.html

打开调试器,可以在 console 里看到打印的 "Hello, world!"


有疑问加站长微信联系(非本文作者)

本文来自:简书

感谢作者:Platanuses

查看原文:Golang WebAssembly 前端开发 - 1. Hello world.md

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

1042 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传