If you are familiar with the , then you know how convenient it is to be able to have a Go scratchpad in the browser. Want to show someone a code snippet? Want to quickly test some syntax? Browser-based code pads a helpful. On that note, I . The cool thing about this new playground that it doesn't use a remote server to run code, just to compile it. The code runs in your browser using . Go Playground created a new playground web assembly (WASM) Try out the Qvault Playground here: https://classroom.qvault.io/#/playground/go How Does It Work? When a user clicks "run", the code (as text) is sent back to our servers. The server is written in Go. As such the handler for the API looks something like this: { r.Body.Close() parameters {
		Code }
	decoder := json.NewDecoder(r.Body)
	params := parameters{}
	err := decoder.Decode(&params) err != {
		respondWithError(w, , ) } usr, err := user.Current() err != {
		respondWithError(w, , ) }
	workingDir := filepath.Join(usr.HomeDir, , uuid.New().String())
	err = os.MkdirAll(workingDir, os.ModePerm) err != {
		respondWithError(w, , ) } {
		err = os.RemoveAll(workingDir) err != {
			respondWithError(w, , ) }
	}()
	f, err := os.Create(filepath.Join(workingDir, )) err != {
		respondWithError(w, , ) } f.Close()
	dat := [] (params.Code)
	_, err = f.Write(dat) err != {
		respondWithError(w, , ) } outputBinary = os.Setenv( , )
	os.Setenv( , )
	cmd := exec.Command( , , , outputBinary)
	cmd.Dir = workingDir
	stderr, err := cmd.StderrPipe() err != {
		respondWithError(w, , err.Error()) } err := cmd.Start(); err != {
		respondWithError(w, , err.Error()) }
	stdErr, err := ioutil.ReadAll(stderr) err != {
		respondWithError(w, , err.Error()) }
	stdErrString := (stdErr) stdErrString != {
		parts := strings.Split(stdErrString, workingDir) (parts) < {
			respondWithError(w, , stdErrString) }
		respondWithError(w, , parts[ ]) } err := cmd.Wait(); err != {
		respondWithError(w, , err.Error()) } dat, err = ioutil.ReadFile(filepath.Join(workingDir, outputBinary)) err != {
		respondWithError(w, , err.Error()) }
	w.Write(dat)
} func compileCodeHandler (w http.ResponseWriter, r *http.Request) defer // Get code from params type struct string if nil 500 "Couldn't decode parameters" return // create file system location for compilation path if nil 500 "Couldn't get system user" return ".wasm" if nil 500 "Couldn't create directory for compilation" return defer func () if nil 500 "Couldn't clean up code from compilation" return "main.go" if nil 500 "Couldn't create code file for compilation" return defer byte if nil 500 "Couldn't write code to file for compilation" return // compile the wasm const "main.wasm" "GOOS" "js" "GOARCH" "wasm" "go" "build" "-o" if nil 500 return if nil 500 return if nil 500 return string if "" if len 2 500 return 400 1 return if nil 500 return // write wasm binary to response if nil 500 return As you can see, the handler simply takes code as input and responds with a slice of WASM bytes. What About the Front-End? The front end is quite simple. First, we need to include the official Go WASM executor in our page. Assuming you have a go installation on your machine, this JavaScript file can be found at: /misc/wasm/wasm_exec.js $( GOROOT) go env Then, include the script in the body of your html: Qvault Classroom - Learn Coding <!DOCTYPE html> < = > html lang "en" < > head < > title </ > title </ > head < > body < = > script src "wasm_exec.js" </ > script </ > body </ > html Because Qvault Classroom's front-end is written as a single page app, I've created a small es6 module that runs a WASM byte array and returns the output as an array of lines: Vue.js go = .Go(); { result = WebAssembly.instantiate(rawData, go.importObject); oldLog = .log; stdOut = []; .log = {stdOut.push(line);}; go.run(result.instance); .log = oldLog; stdOut;
} const new window export default async ( ) function runGoWasm rawData const await let console let console ( ) => line await console return That's it! As you can see, running Go in the browser is pretty easy :) If you want to try our Go Mastery course that uses the WASM playground as its backbone, Or try the course! sign up here! free (Very) Basic Intro to Coding Thanks For Reading Follow us on Twitter if you have any questions or comments @q_vault Take game-like coding courses on Qvault Classroom to our Newsletter for more educational articles Subscribe

Assembly

Twitter

How To Set Up Vue Linting in VS Code

Data Integrity In Cryptography

Learn to code on Boot.dev

Nominated for 2022 - HackerNoon Contributor of the Year - Algorithms

Nominated for 2022 - HackerNoon Contributor of the Year - Mathematics

Nominated for 2022 - HackerNoon Contributor of the Year - Cryptography

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Online Education

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for Super Career Strategist of 2022

Too Long; Didn't Read

Make resilience your competitive advantage

How to Run Go in Your Browser With Web Assembly [ Tutorial ] 

How to Run Go in Your Browser With Web Assembly [ Tutorial ]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Complete Overview of Cryptography

Using 7Zip to View Archive in Browser with JavaScript

Follow These Steps To Replay Browser’s Network Offline

Google's Best Semi-Secret Experiment: Chrome Flags

How to Avoid Online Phishing Scams this Holiday Season

A Complete Overview of Cryptography

Using 7Zip to View Archive in Browser with JavaScript

Follow These Steps To Replay Browser’s Network Offline

Google's Best Semi-Secret Experiment: Chrome Flags

How to Avoid Online Phishing Scams this Holiday Season

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps