软件研发

如何使用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>

因为Qvault  Classroom的前端是作为Vue.js单页应用程序编写的,所以我创建了一个小的es6模块,该模块运行WASM字节数组并将输出作为行数组返回:

const go = new window.Go();export default async function runGoWasm(rawData)  {

const result = await WebAssembly.instantiate(rawData, go.importObject);

let oldLog = console.log;

let stdOut = [];

console.log = (line) => {stdOut.push(line);};

await go.run(result.instance);

console.log = oldLog;

return stdOut;

}

关于如何使用Web Assembly在浏览器中运行Go 的内容,介绍到这里就结束了。如果还想了解更多关于Web  Assembly的信息,请继续关注中培伟业。

标签: 软件研发