软件研发

如何使用Web Assembly在浏览器中运行Go？

2020-08-13 16:23:09　|　来源：中培企业IT培训网

如果熟悉Go Playground，那么就会知道在浏览器中安装Go暂存器有多方便。想给别人看一段代码片段吗？是否想快速测试一些语法？基于浏览器的代码垫很有帮助。关于这一点，我创建了一个新的游乐场。关于这个新游乐场的妙处在于，它不使用远程服务器来运行代码，而只是用于对其进行编译。该代码在您的浏览器中使用Web Assembly运行。

　　它是如何工作的？

当用户单击“运行”时，代码将发送回我们的服务器。服务器是用Go语言编写的。因此，API的处理程序如下所示：

func compileCodeHandler(w http.ResponseWriter, r *http.Request) {

defer r.Body.Close()

// Get code from params

type parameters struct {

Code string

}

decoder := json.NewDecoder(r.Body)

params := parameters{}

err := decoder.Decode(¶ms)

if err != nil {

respondWithError(w, 500, "Couldn't decode parameters")

return

}

// create file system location for compilation path

usr, err := user.Current()

if err != nil {

respondWithError(w, 500, "Couldn't get system user")

return

}

workingDir := filepath.Join(usr.HomeDir, ".wasm", uuid.New().String())

err = os.MkdirAll(workingDir, os.ModePerm)

if err != nil {

respondWithError(w, 500, "Couldn't create directory for compilation")

return

}

defer func() {

err = os.RemoveAll(workingDir)

if err != nil {

respondWithError(w, 500, "Couldn't clean up code from compilation")

return

}

}()

f, err := os.Create(filepath.Join(workingDir, "main.go"))

if err != nil {

respondWithError(w, 500, "Couldn't create code file for compilation")

return

}

defer f.Close()

dat := []byte(params.Code)

_, err = f.Write(dat)

if err != nil {

respondWithError(w, 500, "Couldn't write code to file for compilation")

return

}

// compile the wasm

const outputBinary = "main.wasm"

os.Setenv("GOOS", "js")

os.Setenv("GOARCH", "wasm")

cmd := exec.Command("go", "build", "-o", outputBinary)

cmd.Dir = workingDir

stderr, err := cmd.StderrPipe()

if err != nil {

respondWithError(w, 500, err.Error())

return

}

if err := cmd.Start(); err != nil {

respondWithError(w, 500, err.Error())

return

}

stdErr, err := ioutil.ReadAll(stderr)

if err != nil {

respondWithError(w, 500, err.Error())

return

}

stdErrString := string(stdErr)

if stdErrString != "" {

parts := strings.Split(stdErrString, workingDir)

if len(parts) < 2 {

respondWithError(w, 500, stdErrString)

return

}

respondWithError(w, 400, parts[1])

return

}

if err := cmd.Wait(); err != nil {

respondWithError(w, 500, err.Error())

return

}

// write wasm binary to response

dat, err = ioutil.ReadFile(filepath.Join(workingDir, outputBinary))

if err != nil {

respondWithError(w, 500, err.Error())

return

}

w.Write(dat)

}

如您所见，处理程序仅将代码作为输入，并以WASM字节片作为响应。

　　前端呢？

前端非常简单。首先，我们需要在页面中包括Go WASM的官方执行者。假设您的计算机上已安装Go，可以在以下位置找到此JavaScript文件：

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

然后在您的html正文中包含脚本：　　

　　<!DOCTYPE html>
　　<html>
　　<head>
　　 <title>Qvault Classroom - Learn Coding</title>
　　</head>
　　<body>
　　<script src="wasm_exec.js"></script>
　　</body>
　　</html>