关于golang:WebAssembly-Go-系列1什么是-WebAssembly-和-Go-语言示例

当 JavaScript 这种动静语言在某些场景下性能很难再压迫时，WebAssembly 缓缓走向人们的视线，并成为一个突破口。那么，什么是 WebAssembly？

WebAssembly（Wasm）是基于堆栈式虚拟机的二进制指令集，它被设计为编程语言的可移植编译指标，从而能够部署于客户端和服务端的 Web 应用程序。

具体一点地说，WebAssembly 是一种能够在古代 Web 浏览器（Web 环境）中运行的相似于汇编的低级语言（编译为二进制格局），能够以靠近本机的性能运行，并提供为诸如 C/C++，C# 和 Rust 等高级语言的可移植编译指标，以便它们能够在 Web 上运行。

其实，对于 WebAssembly 是否会代替 JavaScript 的探讨还蛮多的。实际上，Wasm 还被设计为与 JavaScript 一起运行，从而容许两者一起工作，Wasm 能够被 JavaScript 调用，进入 JavaScript 上下文，也能够像 Web API 一样调用浏览器的性能。在 Web 环境中，WebAssembly 将会严格遵守同源策略以及浏览器安全策略。说了这么多，咱们能够发现，WebAssembly 的次要目标之一以及它的初衷是在 Web 环境上运行，不然也不会叫 WebAssembly 了。

Docker 的创始人 Solomon Hykes 曾说：

If WASM+WASI existed in 2008, we wouldn’t have needed to created Docker. That’s how important it is. Webassembly on the server is the future of computing. A standardized system interface was the missing link. Let’s hope WASI is up to the task!

什么哦？咋 WebAssembly 跟 Docker 还能扯上关系？Docker 不是容器技术么？如果你不是很相熟 WebAssembly，可能会有这样的疑难，实际上 WASM + WASI 是挺底层的技术了，咱们不能仅仅想着 WebAssembly 就是用后端语言写前端。“小了嚯，格局小了”。WebAssembly 将是将来十分重要的一门技术，目前仍在倒退。

WebAssembly 不仅能够运行在浏览器上，它也能够运行在非 Web 环境下，即使 WebAssembly 一开始就是面向 Web 设计的。非 Web 环境，即服务端、物联网（IoT）设施、挪动端程序、桌面应用程序等，甚至嵌入到一个大型程序中。Wasm 能够运行在 JavaScript 虚拟机（比方 Node.js）中的，当然也能够不运行在 JavaScript 虚拟机中（一些 WASI 的 Runtime 实现，当前介绍）。总的来说，Wasm 运行在一个沙箱化的执行环境中（是不是开始听起来跟 Docker 有点相似了？）。

目前，除了 Wasm 的外围标准，Wasm 的嵌入接口标准有这 3 种：

JavaScript API：定义用于从 JavaScript 中拜访 WebAssembly 的 JavaScript 类和对象
Web API：定义了 JavaScript API 的扩大，专门用于浏览器的 Web API 调用
WASI API：定义了一个模块化的零碎接口，以在 Web 内部运行 WebAssembly

这里 WASI 即是用于非 Web 环境的规范，WASI 就是 WebAssembly System Interface，不走浏览器，而间接走零碎调用，这也是为什么 WebAssembly 如此弱小的起因。

之前说了，WebAssembly（Wasm）是基于堆栈式虚拟机的二进制指令集。Wasm 在应用时，编译为二进制，蕴含的是指令集，因为基于沙盒式的虚拟环境，所以它是一种虚构指令集架构（V-ISA），个别 V-ISA 都会基于堆栈机模型，Wasm 也抉择了基于堆栈式虚拟机的模型设计。

编写 Wasm 指令集，就好比你写汇编一样，会有对应的助记符，在 Wasm 咱们有 wat 可读文本格式；这些指令助记符文本最终被编译到 Wasm 二进制模块中，对应 wasm 二进制字节码格局的文件。

WABT 是一个 WebAssembly 二进制工具集，外面有很多工具能够应用，咱们借助 wat2wasm 这个工具来举例看看。

上面是一个 WAT 格局的文件：

(module
  (func (export "addTwo") (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add))

咱们通过这个代码，猜也能猜出来实现了什么性能吧？这里定义了一个模块，暴漏了一个 addTwo 办法，它接管了两个整型参数，而后把这两个数加起来，而后返回。就这么简略。

接下来，咱们会把它编译成 wasm 二进制格局。编译过程日志如下：

0000000: 0061 736d                                 ; WASM_BINARY_MAGIC
0000004: 0100 0000                                 ; WASM_BINARY_VERSION
; section "Type" (1)
0000008: 01                                        ; section code
0000009: 00                                        ; section size (guess)
000000a: 01                                        ; num types
; func type 0
000000b: 60                                        ; func
000000c: 02                                        ; num params
000000d: 7f                                        ; i32
000000e: 7f                                        ; i32
000000f: 01                                        ; num results
0000010: 7f                                        ; i32
0000009: 07                                        ; FIXUP section size
; section "Function" (3)
0000011: 03                                        ; section code
0000012: 00                                        ; section size (guess)
0000013: 01                                        ; num functions
0000014: 00                                        ; function 0 signature index
0000012: 02                                        ; FIXUP section size
; section "Export" (7)
0000015: 07                                        ; section code
0000016: 00                                        ; section size (guess)
0000017: 01                                        ; num exports
0000018: 06                                        ; string length
0000019: 6164 6454 776f                           addTwo  ; export name
000001f: 00                                        ; export kind
0000020: 00                                        ; export func index
0000016: 0a                                        ; FIXUP section size
; section "Code" (10)
0000021: 0a                                        ; section code
0000022: 00                                        ; section size (guess)
0000023: 01                                        ; num functions
; function body 0
0000024: 00                                        ; func body size (guess)
0000025: 00                                        ; local decl count
0000026: 20                                        ; local.get
0000027: 00                                        ; local index
0000028: 20                                        ; local.get
0000029: 01                                        ; local index
000002a: 6a                                        ; i32.add
000002b: 0b                                        ; end
0000024: 07                                        ; FIXUP func body size
0000022: 09                                        ; FIXUP section size
; section "name"
000002c: 00                                        ; section code
000002d: 00                                        ; section size (guess)
000002e: 04                                        ; string length
000002f: 6e61 6d65                                name  ; custom section name
0000033: 02                                        ; local name type
0000034: 00                                        ; subsection size (guess)
0000035: 01                                        ; num functions
0000036: 00                                        ; function index
0000037: 02                                        ; num locals
0000038: 00                                        ; local index
0000039: 00                                        ; string length
000003a: 01                                        ; local index
000003b: 00                                        ; string length
0000034: 07                                        ; FIXUP subsection size
000002d: 0e                                        ; FIXUP section size

哦豁？头大哦，为什么要来看相似汇编的这种货色哦，不如先粗略瞄一眼，咱们先来看看，编译后的二进制，咱们怎么用的？

咱们看看这段 JS 代码：

const wasmInstance = new WebAssembly.Instance(wasmModule, {});
const {addTwo} = wasmInstance.exports;

for (let i = 0; i < 10; i++) {console.log(addTwo(i, i));
}

首先第一行，咱们从 Wasm 中获取模块实例，第二行咱们获取到之前编写的 addTwo 办法。而后上面的 for 循环间接就用上这个办法了，简略易懂。这段代码会输入：

这就是一个简略的循环输入。

好了，咱们大略晓得 Wasm 指令集是怎么在 Web 环境下交互应用的了。那么，咱们应用 Wasm 还得编写下面的 WAT 么？（别吧，学不动了。）跟编写汇编语言不同的是，咱们在应用 Wasm 时，通常只须要编写 C/C++，Rust，Go 等这类高级编程语言的代码就能够了，最终编译器会帮你主动转换为 wasm 二进制指令。

我猜你大略明确了，WebAssembly 实践上不是一种新的语言，它是一种编译指标格局，是一种标准规范，而 WAT（WebAssembly Text Format）是一种用来在文本编辑器、浏览器开发者工具等工具中显示的 两头模式，意思是 WAT 只是为了可能让人类浏览和编辑 WebAssembly 而产生的，因为 WebAssembly 最终是二进制格局。比方，如果我当初想写一个 Go 编译器，将 Go 代码编译为 Wasm 格局，那么 WAT 这种两头格局对于你一个底层开发人员来说，就很有帮忙。所以，WebAssembly 不是语言，没有 WebAssembly 本人的编译器，你不须要装一个 Wasm 本身的编译器之类的。

例如，C/C++ 程序通过 Emscripten（基于 LLVM）工具编译为 .wasm 模块，在应用 wasm 模块时，咱们须要一个 HTML 文件，一个 JS 胶水文件把 wasm 模块引入。同理，咱们用 Go 开发 Wasm 模块，也是通过 Go 编译器（官网已反对）转化为 wasm 模块，而后一个 HTML 文件，一个 JS 胶水文件，读取 wasm 模块，这种模式来实现。WebAssembly 目前不能直接存取 DOM。所以为了应用 Web API，WebAssembly 须要调用 JavaScript，而后由 JavaScript 调用 Web API。

目前只有 Wasm 外围标准是公布了 1.0 版本，其它的标准还都是在草案状态中，Wasm 还是比拟年老，还有很长的路要走，咱们能够继续关注当前的变动。

当初咱们尝试用 Go 语言来编写一个简略的 WebAssembly 利用，咱们能够看 Go 官网 Wiki 的指引，实际上在 Go 中编写 Wasm 非常简单。

首先咱们编写 wasm/main.go 文件：

package main

import "fmt"

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

一个简略的打印内容，接下来编译为 .wasm 文件，通过上面的命令：

GOOS=js GOARCH=wasm go build -o main.wasm

Copy go 官网给咱们筹备好的胶水 JS 文件：

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

创立一个 HTML 文件：

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

在 HTML 文件中咱们引入了编译的 .wasm 文件和固定的 wasm_exec.js 文件。

接下来编写一个简略 HTTP 服务来给咱们的动态文件提供反对：

// A basic HTTP server.
package main

import (
    "flag"
    "log"
    "net/http"
)

var (listen = flag.String("listen", ":2345", "listen address")
    dir    = flag.String("dir", "../../assets", "directory to serve")
)

// go run cmd/server/main.go -dir assets/
func main() {flag.Parse()
    log.Printf("listening on %q...", *listen)
    err := http.ListenAndServe(*listen, http.FileServer(http.Dir(*dir)))
    log.Fatalln(err)
}

我将动态文件放到 assets 中，main 文件放到了 cmd 目录中，具体的门路依据你的具体情况批改就能够。

运行：

$ go run cmd/server/main.go -dir assets/ 
2021/03/08 23:46:36 listening on ":2345"...

浏览器关上 127.0.0.1:2345 能够看到 HTML 失常，关上控制台，能够看输入 Hello, WebAssembly!。

好了，一个简略的 Demo 展现实现，代码我放到了 go-language-plus/code-example。通过这个例子，你大略能晓得 WebAssembly 是如何工作的，以及咱们如何来编写 WebAssembly 利用了。下一篇，筹备介绍 WASI，WebAssembly out of Web！

关于golang:WebAssembly-Go-系列1什么是-WebAssembly-和-Go-语言示例

WebAssembly 简介

WebAssembly 指令集

Go 语言编写 WebAssembly 利用

Just My Socks（注册教程内含优惠码）

关于golang:WebAssembly-Go-系列1什么是-WebAssembly-和-Go-语言示例

WebAssembly 简介

WebAssembly 指令集

Go 语言编写 WebAssembly 利用

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）