一分鐘搞明白！快速掌握 Go WebAssembly

作者：陳煎魚 2023-03-27 09:40:01

今天我們快速的對(duì) WebAssembly 進(jìn)行了背景了解、Go 快速上手、擴(kuò)展場(chǎng)景了解等。雖然 WebAssembly 是一個(gè)新輪子，也號(hào)稱可以借助 WASI 集成和被集成。

大家好，我是煎魚。

最近因?yàn)楦鞣N奇怪的原因，更多的接觸到了 WebAssembly。雖然之前很多博客也翻過寫過各種文章，但總感覺欠些味道。于是今天梳理了一版，和大家一起展開學(xué)習(xí)。

先來一張經(jīng)典圖：

WebAssembly 是什么

以下是 Mozilla 在 MDN 上給出的定義：

WebAssembly（縮寫：Wasm）是一種新的編碼方式，可以在現(xiàn)代的網(wǎng)絡(luò)瀏覽器中運(yùn)行－它是一種低級(jí)的類匯編語言，具有緊湊的二進(jìn)制格式，可以接近原生的性能運(yùn)行，并為諸如 C/C++ 等語言提供一個(gè)編譯目標(biāo)，以便它們可以在 Web 上運(yùn)行。它也被設(shè)計(jì)為可以與 JavaScript 共存，允許兩者一起工作。

Wasm 官網(wǎng)自己挑出的重點(diǎn)是：

是一種基于堆棧的虛擬機(jī)的二進(jìn)制指令格式。
被設(shè)計(jì)為編程語言的可移植編譯目標(biāo)。
能夠在網(wǎng)絡(luò)上部署客戶端和服務(wù)器應(yīng)用程序。

新編碼方式，可以在瀏覽器中運(yùn)行?？梢砸越咏男阅苓\(yùn)行?？梢钥缯Z言，例如：C/C++；可以與 JavaScript 共存。

看著是一個(gè)不錯(cuò)的可跨平臺(tái)運(yùn)行的新玩具。

由哪家研發(fā)

最早 WebAssembly1.0 基于 asm.js（Javascript 的嚴(yán)格子集，靜態(tài)類型，取消垃圾回收機(jī)制等）的特性集實(shí)現(xiàn)。隨后的 WebAssembly2.0 又根據(jù)新的標(biāo)準(zhǔn)進(jìn)行了進(jìn)一步的延伸和開發(fā)。

WebAssembly 的開發(fā)團(tuán)隊(duì)分別來自 Mozilla、Google、Microsoft、Apple，代表著四大網(wǎng)絡(luò)瀏覽器 Firefox、Chrome、Microsoft Edge、Safari。

一些重要的時(shí)間線：

2015 年 WebAssembly 首次發(fā)布，在上述四大瀏覽器中進(jìn)行了 Unity 的 Angry Bots（憤怒的機(jī)器人）的演示。
2017 年 3 月，首次發(fā)布 WebAssembly MVP 版本，預(yù)覽版本結(jié)束，正式進(jìn)行發(fā)布，可以理解為 1.0。
2018 年 2 月，WebAssembly 工作組（WebAssembly Working Group）發(fā)布了核心規(guī)范、JavaScript 接口和 Web API 的三個(gè)公開工作草案。
2019 年，Chrome 75 發(fā)布，默認(rèn)啟用 WebAssembly 線程。
2022 年 6 月，開始發(fā)布 WebAssembly 2.0。

幾家大廠派人一起做的，比較新，近幾年才開始更多的被支持。當(dāng)前還在 WebAssembly 2.0 的階段，還在發(fā)展階段。

1.0 和 2.0 區(qū)別之一

直觀上來看，1.0 和 2.0 最大的區(qū)別在于：

1.0 主要目標(biāo)是在所有主要瀏覽器中能運(yùn)行 WebAssembly。根據(jù)統(tǒng)一截至 2022 年 10 月，96% 的已安裝瀏覽器支持 WebAssembly（1.0 版），基本實(shí)現(xiàn)了全覆蓋。
讓 WebAssembly 煥發(fā)第二春（2.0）的：可以借助 WASI（WebAssembly System Interfac）的模塊化系統(tǒng)接口，能夠借此中間產(chǎn)物 .wasm 實(shí)現(xiàn)各語言的集合和互相集成。

WebAssembly 2.0 起，邊界更大了，目標(biāo)完全就是可移植、安全的高級(jí)語言。期望應(yīng)用于瀏覽器、各編程語言、各系統(tǒng)中。

大有一個(gè) JVM 的感覺：

Go 快速上手

在我們快速了解了 WebAssembly 的背景后。我們落到實(shí)處，看看 Go 語言的 WebAssembly 情況如何，又是如何使用。

Go 目前有兩種使用 WebAssembly 的方式，第一種是使用 syscall/js 標(biāo)準(zhǔn)庫，四舍五入算勉強(qiáng)支持了 WebAssembly 1.0。

代碼如下：

package main

import "syscall/js"

func main() {
 alert := js.Global().Get("alert")
 alert.Invoke("腦子進(jìn)煎魚了！")
}

編譯命令：

$ GOOS=js GOARCH=wasm go build -o jianyu.wasm

再使用 JS 中對(duì)應(yīng) WebAssembly 的調(diào)用就可以了。

第二種使用方式，是使用開源庫 tinygo-org/tinygo[1]，其基于 LLM，支持了 WebAssembly1.0/2.0 (WASM/WASI)。

tinygo brew 安裝方式：

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

如果安裝成功，執(zhí)行 tinygo version 就可以看到版本信息。

Go wasm 代碼如下：

import (
 figure "github.com/common-nighthawk/go-figure"
)

//export HelloWorld
func HelloWorld() {
 myFigure := figure.NewFigure("Hello World", "", true)
 myFigure.Print()
}

func main() {}

編譯命令：

tinygo build -o module.wasm -target wasi .

運(yùn)行成功后，將會(huì)在對(duì)應(yīng)目錄編譯出 module.wasm 二進(jìn)制文件，可以由其他的平臺(tái)、語言進(jìn)行使用。

如果你希望在 Go 或其他語言中調(diào)用所生成的 .wasm，需要找到對(duì)應(yīng)符合 WASI 的庫和規(guī)則。

下面是 Go wasmer-go 調(diào)用 .wasm 的代碼：

import (
 "fmt"
 "io/ioutil"

 wasmer "github.com/wasmerio/wasmer-go/wasmer"
)

func main() {
 wasmBytes, _ := ioutil.ReadFile("module.wasm")

 store := wasmer.NewStore(wasmer.NewEngine())
 module, _ := wasmer.NewModule(store, wasmBytes)

 wasiEnv, _ := wasmer.NewWasiStateBuilder("wasi-program").
  // Choose according to your actual situation
  // Argument("--foo").
  // Environment("ABC", "DEF").
  // MapDirectory("./", ".").
  Finalize()
 importObject, err := wasiEnv.GenerateImportObject(store, module)
 check(err)

 instance, err := wasmer.NewInstance(module, importObject)
 check(err)

 start, err := instance.Exports.GetWasiStartFunction()
 check(err)
 start()

 HelloWorld, err := instance.Exports.GetFunction("HelloWorld")
 check(err)
 result, _ := HelloWorld()
 fmt.Println(result)
}

func check(e error) {
 if e != nil {
  panic(e)
 }
}