为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Go

本文使用的环境:

  • go1.11.4 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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
链接:https://www.jianshu.com/p/52f79e687680



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消