WebAssembly - 使用 Go 進行開發

你好，未來的編程超新星們！今天，我們將踏上一段令人興奮的旅程，透過 Go 語言來探索 WebAssembly 的世界。別擔心，如果這些術語現在聽起來像外星語言 - 到了這個教學結束時，你將能夠流暢地使用它們！

WebAssembly - Working with Go

WebAssembly 是什麼？

在我們深入研究代碼之前，讓我們先了解一下 WebAssembly 是什麼。想像你有一輛超級快速的賽車（那就是 WebAssembly），它能在任何賽道（網頁瀏覽器）上以驚人的速度奔跑。這是一種可以直接在網頁瀏覽器中運行像 Go、C++ 或 Rust 這樣的語言編寫的程式，讓網頁應用程序變得更快、更強大。

為什麼選擇 WebAssembly？

Go，我們今天選擇的語言，就像是編程世界中的瑞士軍刀。它簡單、高效，而且現在可以透過 WebAssembly 在網頁瀏覽器中運行。這就像是給你的網頁應用程序賦予超能力！

設置我們的 Go 開發環境

首先，我們需要設置我們的 Go 開發環境。這就像是在開始烹飪美味佳肴之前準備我們的廚房。

從官方網站安裝 Go（https://golang.org/）
設置你的 GOPATH（Go 將在安裝過程中指導你）
安裝代碼編輯器（我推薦 Visual Studio Code，但你可以使用你熟悉的任何編輯器）

我們的第一個 Go WebAssembly 程式

讓我們從一個簡單的 "Hello, WebAssembly!" 程式開始。別擔心如果你現在還不太理解 - 我們會一步步解析。

package main

import (
"fmt"
"syscall/js"
)

func main() {
fmt.Println("Hello, WebAssembly!")
js.Global().Set("greet", js.FuncOf(greet))
<-make(chan bool)
}

func greet(this js.Value, args []js.Value) interface{} {
name := args[0].String()
message := fmt.Sprintf("Hello, %s! Welcome to WebAssembly.", name)
js.Global().Get("document").Call("getElementById", "greeting").Set("innerText", message)
return nil
}

讓我們來解析一下：

package main：這告訴 Go 這是我們程序的主包。
import：我們導入了兩個包 - fmt 用於打印，syscall/js 用於與 JavaScript 交互。
func main()：這是我們程序的入口點。
js.Global().Set("greet", js.FuncOf(greet))：這使我们的 greet 函數對 JavaScript 可用。
<-make(chan bool)：這讓我們的程序持續運行，等待 JavaScript 的調用。
func greet：這個函數接受一個名稱，並更新一個 HTML 元素以顯示問候。

將我們的 Go 程式編譯為 WebAssembly

現在，讓我們將我們的 Go 代碼轉換為 WebAssembly。打開你的終端並運行以下命令：

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

這個命令告訴 Go 為 JavaScript（GOOS=js）和 WebAssembly（GOARCH=wasm）編譯我們的程序。

創建一個 HTML 頁面來運行我們的 WebAssembly

我們需要一個 HTML 頁面來加載和運行我們的 WebAssembly。這裡有一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Go WebAssembly</title>
</head>
<body>
<h1>Go WebAssembly Demo</h1>
<input id="name" type="text" placeholder="Enter your name">
<button onclick="greet(document.getElementById('name').value)">Greet</button>
<p id="greeting"></p>
<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>
</body>
</html>

這個 HTML 文件：

創建一個用於輸入名字的文本字段。
有一个按钮，当点击时会调用我们的 greet 函数。
加载 WebAssembly 运行时（wasm_exec.js）。
加载并运行我们的 WebAssembly 文件（main.wasm）。

運行我們的 WebAssembly 應用程序

為了運行這個應用程序，我們需要一個網頁服務器。這裡有一個簡單的 Python 命令來啟動一個：

python -m http.server

現在，打開你的瀏覽器並訪問 http://localhost:8000。你應該會看到我們的頁面！

理解輸出

當你輸入你的名字並點擊 "Greet" 按鈕時，你會看到一個個性化的問候出現。這是我們的 Go 函數在瀏覽器中運行，歸功於 WebAssembly！

結論

恭喜你！你剛剛創建了你的第一個 Go WebAssembly 應用程序。我們這裡只是略為探討了一下，但我希望這激發了你的好奇心，讓你想要進一步探索。

記住，學習編程就像學習一種新語言或樂器。它需要練習、耐心和毅力。但隨著每一步的進展，你都在解鎖新的可能性，並擴展你的創造潛力。

持續編程，持續探索，最重要的是，享受樂趣！

方法	描述
`js.Global()`	讓我們訪問全局 JavaScript 對象
`js.FuncOf()`	將 Go 函數轉換為 JavaScript 函數
`js.Value`	代表一個 JavaScript 值
`Call()`	調用 JavaScript 方法
`Set()`	設置 JavaScript 屬性
`Get()`	獲取 JavaScript 屬性
`String()`	將 JavaScript 值轉換為 Go 字符串

這個表格總結了我們用來在 Go 和 JavaScript 之間交互的關鍵方法。隨著你繼續你的 WebAssembly 之旅，你會發現這些方法非常有用！

Credits: Image by storyset

上一教程:

WebAssembly - 與Rust一起工作

下一教程:

WebAssembly - 與Node.js合作