WebAssembly + Go 系列（1）什麼是 WebAssembly 和 Go 語言示例

時間 2021-03-11

標籤 html 前端 git github golang 編程後端瀏覽器安全 bash 欄目 HTML 简体版

原文原文鏈接

WebAssembly 簡介

當 JavaScript 這種動態語言在某些場景下性能很難再壓榨時，WebAssembly 慢慢走向人們的視野，併成爲一個突破口。那麼，什麼是 WebAssembly？html

WebAssembly（Wasm）是基於堆棧式虛擬機的二進制指令集，它被設計爲編程語言的可移植編譯目標，從而能夠部署於客戶端和服務端的 Web 應用程序。前端

具體一點地說，WebAssembly 是一種能夠在現代 Web 瀏覽器（Web 環境）中運行的相似於彙編的低級語言（編譯爲二進制格式），能夠以接近本機的性能運行，並提供爲諸如 C/C++，C# 和 Rust 等高級語言的可移植編譯目標，以便它們能夠在 Web 上運行。git

其實，關於 WebAssembly 是否會替代 JavaScript 的討論還蠻多的。實際上，Wasm 還被設計爲與 JavaScript 一塊兒運行，從而容許二者一塊兒工做，Wasm 能夠被 JavaScript 調用，進入 JavaScript 上下文，也能夠像 Web API 同樣調用瀏覽器的功能。在 Web 環境中，WebAssembly 將會嚴格遵照同源策略以及瀏覽器安全策略。說了這麼多，咱們能夠發現，WebAssembly 的主要目的之一以及它的初衷是在 Web 環境上運行，否則也不會叫 WebAssembly 了。github

Docker 的創始人 Solomon Hykes 曾說：golang

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 指令集

以前說了，WebAssembly（Wasm）是基於堆棧式虛擬機的二進制指令集。Wasm 在使用時，編譯爲二進制，包含的是指令集，由於基於沙盒式的虛擬環境，因此它是一種虛擬指令集架構（V-ISA），通常 V-ISA 都會基於堆棧機模型， Wasm 也選擇了基於堆棧式虛擬機的模型設計。bash

編寫 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 語言來編寫一個簡單的 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！