[Go] WASM 빌드하기

#Go

go는 wasm을 그럭저럭 지원하는 편이다.
성능이 특출나거나 지원 수준이 엄청 좋은건 아닌데, 브라우저에서 구현하기 난감한 것들을 대행할때 가끔은 쓸만할 것이다.

외부 종속성이 따로 필요하진 않다.

js 본드 가져오기

wasm의 한계상, 독립적으로는 사용이 불가능하고 js를 거쳐서만 사용이 가능하다.
아래와 같은 특수한 경로에 준비되어있는 wasm 본드 코드가 있다. 그걸 복사해서 가져온다.

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

내용은 이런데, 굳이 볼 필요는 없다. 고칠일도 없고

Go 코드 작성하기

이제 wasm을 생성할 코드를 작성해보겠다.
간단하게 덧셈 함수만 하나 추가해서 돌려보려 한다.

우선 syscall/js라는 기본 패키지를 import한다.
이건 특정 타겟에서만 사용할 수 있는 특수 패키지다. 빨간줄은 그래서 뜨는거다.

그리고 js에서 사용할 덧셈 함수를 하나 만들어줬다.

js에 내보낼 함수들은 기본적으로 이러한 함수 시그너처를 가져야 한다.
첫번째 인자는 함수 자체의 this 컨텍스트고, 나머지가 매개변수다.
여기서는 Int로 변환한다음에 덧셈을 수행하고, 반환해주도록 했다.

그리고 저 함수를 명시적으로 js 전역 상태에 추가해줘야 한다.

main 함수만 추가해주면 끝이다.

여기서 초기화 관련 로직들을 할당할 수도 있고, 함수 등록도 여기서 한다.
그리고 이 main 함수는 종료되지 않아야 하기 때문에 채널로 블락을 걸어준다.

main이 끝나면 여기서 구현한 함수를 사용할 수가 없더라. IPC 스타일인거같다.

전체 코드다.

// main.go
package main

import (
	"log"
	"syscall/js"
)

//export add
func add(this js.Value, args []js.Value) any {
	result := args[0].Int() + args[1].Int()
	return js.ValueOf(result)
}

func registerCallbacks() {
	js.Global().Set("add", js.FuncOf(add))
}

func main() {
	waiter := make(chan struct{}, 0)

	println("Hello, WASM!")
	log.Println("WASM Go Initialized")
	registerCallbacks()

	<-waiter
}

html과 사용해보기

우선 wasm 빌드를 한다.
이런식으로 옵션을 주면 된다.

GOOS=js GOARCH=wasm go build -o static/main.wasm cmd/main.go

결과물들을 한곳에 몰아넣고

간단한 정적서버 하나 만들고

const express = require("express");
const path = require("path");

const app = express();
const port = 8000;
const root = path.join(__dirname, "static");

app.get("*", (req, res) => {
  const filePath = path.join(root, req.url);
  res.sendFile(filePath, (err) => {
    if (err) {
      res.status(404).send("Not Found");
    }
  });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

브라우저 코드는 이래 짰다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Go+Wasm</title>

  <script src="wasm_exec.js"></script>
  <script>
    const go = new Go();
    WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject)
            .then((wasmModule) => {
              // 웹 어셈블리 로딩
              go.run(wasmModule.instance);

              // 웹 어셈블리에서 제공하는 add 함수 호출
              console.log(wasmModule.instance.exports);
            });
  </script>
</head>
<body></body>
</html>

js 본드 import한 다음에 저런 식으로 초기화를 해주면 된다.

그리고 실행해보면

이런식으로 갖다쓸 수 있을 것이다.

참조
https://golangbot.com/webassembly-using-go/