golang语言中wasm 环境搭建的过程详解

2024-08-05 03:10:58

golang 安装

通过官方地址下载。MacOS 也可通过 brew 快速安装：

$ brew install golang

$ go version
go version go1.17.2 darwin/arm64

golang 环境测试

新建文件 main.go ，写入：

package main

import "fmt"

func main() {
  fmt.Println("Hello World!")
}

执行 go run main.go ，将输出：

$ go run main.go
Hello World!

如果启用了 GO MODULES ，则需要使用 go mode init 初始化模块，或设置 GO111MODULE=auto 。

将 golang 打包为 WASM

通常有两种打包方式，一种是 golang 自带的，另外是使用 tinygo 。推荐使用 tinygo ，因为编译出的 wasm 模块更小。

使用 golang 原生编译

在编译 wasm 模块前，需要设置 golang 交叉编译参数，目标系统 GOOS=js 和目标架构 GOARCH=wasm ，编译 wasm 模块：

// macos
$ GOOS=js GOARCH=wasm go build -o main.wasm

// windows 临时设置 golang 环境参数（仅作用于当前CMD）
$ set GOOS=js
$ set GOARCH=wasm
$ go build -o main.wasm

使用 tinygo 编译

直接按照官方文档安装即可，MacOS 如下：

$ brew tap tinygo-org/tools
$ brew install tinygo

$ tinygo version
tinygo version 0.20.0 darwin/amd64 (using go version go1.17.2 and LLVM version 11.0.0)

使用以下命令对 main.go 再次进行打包：

$ tinygo build -o main-tiny.wasm

打包文件大小对比

$ du -sh ./*.wasm
228K    ./main-tiny.wasm
1.9M    ./main.wasm

在浏览器中跑起来

要想在浏览器中跑 main.wasm ，首先需要 JS 胶水代码，golang 已经为我们提供了，直接复制过来。需要注意的是，使用 tinygo 和原生编译的胶水代码是有差异的，根据具体情况拷贝对应的：

// 原生编译
$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

// tinygo编译
$ cp "$(tinygo env TINYGOROOT)/targets/wasm_exec.js" ./wasm_exec_tiny.js

其次，需要一个 HTML 入口文件，创建 index.html 文件，并写入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./wasm_exec_tiny.js"></script>
</head>
<body>
  <script>
    const go = new Go(); // wasm_exec.js 中的定义
    WebAssembly.instantiateStreaming(fetch('./main-tiny.wasm'), go.importObject)
      .then(res => {
        go.run(res.instance); // 执行 go main 方法
      });
  </script>
</body>
</html>

最后，起一个 http server 让它跑起来吧～

// python
$ python3 -m http.server
$ python2 -m SimpleHTTPServer

// node
$ npm i -g http-server
$ hs

// gp
$ go get -u github.com/shurcooL/goexec
$ goexec 'http.ListenAndServe(`:8080`, http.FileServer(http.Dir(`.`)))'

异常记录

通过 node 的 http-server 起的服务，加载会报错:

> TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

原因是 wasm 文件响应头的 content-type 为 application/wasm; charset=utf-8 ，应该为 application/wasm 。已知的解决方法为修改 HTML 中 wasm 的初始化方式为：

fetch('./main-tiny.wasm')
  .then(res => res.arrayBuffer())
  .then(buffer => {
    WebAssembly.instantiate(buffer, go.importObject)
      .then(res => {
        go.run(res.instance);
      })
  })

到此这篇关于golang语言中wasm 环境搭建的文章就介绍到这了,更多相关golang wasm 环境搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

ubuntu下搭建Go语言（golang）环境

Go语言是谷歌2009发布的第二款开源编程语言.Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程. 还是我自己的电脑,我自己安装的是ubuntu 12.04版本的,直接介绍安装吧!其实搭建环境很简单! 复制代码代码如下: sudo apt-get install python-setuptools python-dev build-essential //安装mercurial依赖 sudo easy_insta
MacOS下本地golang环境搭建详细教程

安装golang 使用homebrew安装golang.homebrew是MacOS 平台下的软件包管理工具,拥有安装.卸载.更新.查看.搜索等功能.开发者不需要关心依赖和文件路径.如果系统没有安装homebrew,终端内执行以下命令安装homebrew. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" 安装完homebrew后执行以下命令
Centos下搭建golang环境及vim高亮Go关键字设置的方法

一.Centos搭建go环境 1:下载 https://golang.org/dl/ 下载 go1.4.1.Linux-amd64.tar.gz ArchiveLinux64-bit 2:切换sudo权限解压到/usr/local/目录下 tar xzvf go1.4.1.linux-amd64.tar.gz -C /usr/local/ 3:返回普通用户权限 4:设置PATH vi ~/.bash_profile export GOROOT=/usr/lo
Golang搭建开发环境的图文教程

Golang开发环境搭建 Go 语言开发包国外:https://golang.org/dl/ 国内(推荐): https://golang.google.cn/dl/ 编辑器 Golang:https://www.jetbrains.com/go/ Visual Studio Code: https://code.visualstudio.com/ 搭建 Go 语言开发环境,需要先下载 Go 语言开发包. 查看操作系统及版本 Windows: Mac: Linux: 终端输入uname -a
golang语言中wasm 环境搭建的过程详解

golang 安装通过官方地址下载.MacOS 也可通过 brew 快速安装: $ brew install golang $ go version go version go1.17.2 darwin/arm64 golang 环境测试新建文件 main.go ,写入: package main import "fmt" func main() { fmt.Println("Hello World!") } 执行 go run main.go ,将输出: $
Java 语言中Object 类和System 类详解

Object是java所有类的基类,是整个类继承结构的顶端,也是最抽象的一个类.大家天天都在使用toString().equals().hashCode().waite().notify().getClass()等方法,或许都没有意识到是Object的方法,也没有去看Object还有哪些方法以及思考为什么这些方法要放到Object中. 一.Java Object类简介-所有类的超类 Object 是 Java 类库中的一个特殊类,也是所有类的父类.也就是说,J ava 允许把任何类型的对象赋给
C语言中的const和free用法详解

注意:C语言中的const和C++中的const是有区别的,而且在使用VS编译测试的时候.如果是C的话,请一定要建立一个后缀为C的文件,不要是CPP的文件.因为,两个编译器会有差别的. 一.C语言中的const比较常见的用法,const做常量 #include<stdio.h> #include<malloc.h> #include<string.h> /* C中的const用法(使用VS测试的时候,要注意建立一个C后缀的文件,因为C的编译器和C++的编译器还是有区别的
C语言中qsort函数的用法实例详解

C语言中qsort函数的用法实例详解快速排序是一种用的最多的排序算法,在C语言的标准库中也有快速排序的函数,下面说一下详细用法. qsort函数包含在<stdlib.h>中 qsort函数声明如下: void qsort(void * base,size_t nmemb,size_t size ,int(*compar)(const void *,const void *)); 参数说明: base,要排序的数组 nmemb,数组中元素的数目 size,每个数组元素占用的内存空间,可使用si
Python3+Pycharm+PyQt5环境搭建步骤图文详解

搭建环境: 操作系统:Win10 64bit Python版本:3.7 Pycharm:社区免费版一.Python3.7安装下载链接:官网https://www.python.org/downloads/windows/或腾讯软件中心下载https://pc.qq.com/detail/5/detail_24685.html或其他站点下载.我下载的是python-3.7.0-amd64. 下载到安装包后打开,如果想安装到默认路径(C盘)的话一直点下一步就可以了,或者自定义安装到其他分区,我的
在C#和Java语言中for和foreach的区别详解

for循环和foreach循环的区别首先在这里声明一点,C#和Java这两种语言很相似,尤其是初学的数据类型那一部分,所以这里写的for和foreach的区别在C#和Java中都适用. 我会在下面分别列出两种语言的for和foreach分别循环打印一个数组,大家可以看看区别话不多说,直接上代码: //c# //先创建一个数组 int[] arr = new int[3] {99, 11, 22}; //利用for循环打印(可以创建一个变量 i;判断这个i是否小于数组的长度;每次循环i自增1)
Docker Consul概述以及集群环境搭建步骤(图文详解)

目录一.Docker consul概述二.基于 nginx 与 consul 构建自动发现即高可用的 Docker 服务架构一.Docker consul概述容器服务更新与发现:先发现再更新,发现的是后端节点上容器的变化(registrator),更新的是nginx配置文件(agent) registrator:是consul安插在docker容器里的眼线,用于监听监控节点上容器的变化(增加或减少,或者宕机),一旦有变化会把这些信息告诉并注册在consul server端(使用回调和协程
WEEX环境搭建与入门详解

Weex简介 Weex 是阿里前端技术团队开源额一套跨平台开发方案,能以web的开发体验构建高性能.可扩展的 native 应用,Weex 的页面表示层使用 Vue ,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,Weex和React Native一样是当前流行的跨平台开发框架.Weex的官方地址为:https://weex.apache.org/.Weex最简单的方法是使用 Playground App和在 dotWe 编写一个 Hello World 的例子,你甚至
Go语言中io包核心接口示例详解

目录前言 Reader Writer Closer Seeker 组合接口总结前言 IO 操作是我们在编程中不可避免会遇到的,例如读写文件,Go语言的 io 包中提供了相关的接口,定义了相应的规范,不同的数据类型可以根据规范去实现相应的方法,提供更加丰富的功能. Go 语言提倡小接口 + 接口组合的方式,来扩展程序的行为以及增加程序的灵活性.io代码包恰恰就可以作为这样的一个标杆,它可以成为我们运用这种技巧时的一个参考标准.io包中包含了大量接口,本篇文章我们就先来学习四个核心接口以及对应
Go语言中map使用和并发安全详解

目录 1 map使用 1.1 map定义 1.2 map的使用和概念 1.3 map的容量 1.4 map的使用 1.4.1 map的遍历 1.4.2 map的删除和断言 1.5 map的坑 2 并发安全 2.1 不安全原因 2.2 解决方案总结 1 map使用 1.1 map定义 map是一种无序的集合,对应的key (索引)会对应一个value(值),所以这个结构也称为关联数组或字典. map在其他语言中hash.hash table等 var mapname map[keytype]va