How to Run GoLang (1.15+) Code in a Browser Using WebAssembly

Cesar William Alvarenga

Nov 8, 2020·4 min read

Why Do We Need WebAssembly?

Today web and mobile applications are the primary vehicles for providing software solutions to users around the world. Applications that we had only in desktop apps today are available for browsers like graphics, photo and video editors; music and video players; and so on.

To use a sophisticated tool in a web browser, sometimes you need to use a specific language, not JavaScript. We have to use a language that provides an easy way to build that type of application. For example, if you want to execute many things in parallel, Go enables a developer to make use of concurrency via goroutines and channels.

In this article, we will learn how to create a project with GoLang in a browser using WebAssembly.

Getting Started

Step 1: Create Our Go File

First, we will create a sample Go file to compile to Wasm (WebAssembly binary code). In this case, we will print “Hello, WebAssembly” in the console. After these initial steps, we will add more content to this file to make it a more useful example.

Step 2: Generate the Wasm JavaScript Loader

To run the binary code in a browser, we have to generate the wasm_exec.js file. It’s a JavaScript file provided by Go to load your .wasm file into a Web page.

The loader file is available in your standard Go installation. Just copy it into the project folder with the following command:

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

Step 3: Compile the Main.go File

To compile our main.go file for the web, we will set two environment variables: GOOS and GOARCH. We will setGOOS, which stands for Go Operating System, to js. We will set GOARCH, which stands for Go Architecture, to wasm. Then we can compile our file using the Go build command:

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

Step 4: Create the HTML File

Now that we have the Wasm loader and the .wasm file, we can create our first HTML file by importing these files.

First, we import the wasm_exec.js file in the header. Then inside a script tag (or in a .js file), we will fetch the Wasm file and run it:

Step 5: Run

Let’s run our code. To do that, we will run a simple HTTP server. We can do that in many ways. We can use the Python SimpleHTTPServer, the node package http-server, or goexec:

$ goexec 'http.ListenAndServe(`:8080`,http.FileServer(http.Dir(`.`)))'

This command will run an HTTP server on port 8080. You can type the URL http://localhost:8080 in your browser and open the developer tools to see the output “Hello, WebAssembly” in the console.

Exposing Go Functions

In this example, we will build a Go code to find common colors in an image.

The first thing we have to do is expose a Go function that will receive an image and return one array with all the image’s common colors. For that, we have to import the JS package syscall/js. This package gives access to the WebAssembly host environment. Then we will set the Go function findCommonColors into the JavaScript global context. After that, you can call the function on the JavaScript.

The Go function findCommonColors will be called with the value of JavaScript’s “this” keyword and the arguments of the invocation.

Calling a Go Function

After you set the Go function in the global JavaScript context, we can call the function using JavaScript. You can access the function via the window object after we instantiate the Go code that we just created:

Implementing the Common Colors Example

To demonstrate a real web application, we will implement the Go function that will handle the image file received from the JavaScript and return its dominant colors. We will use an external package to produce the outcome.

The package called prominentcolor uses the Kmeans++ algorithm to work this out. By default, it will return us the three most popular colors. We can install this package using the following command:

$ go get github.com/EdlinOrg/prominentcolor

First, we will convert the image from the argument to a Go Image. We use the CopyBytesToGo to copies bytes from JS to Go array of bytes. Then we decode the reader to the Go Image.

With the image, we can use the prominentcolor package to get the dominant colors in the image and create an array of an empty interface including the hex color code.

And finally, we modify the findCommonColors to return the array of colors using the js.ValueOf that converts the array of the empty interface to JavaScript Array.

And this is all our Go code:

In the HTML we will display the image chosen in the input file field and call the findCommonColors using the same image and show the image common colors.

You can access the complete code here.

Conclusion

Today WebAssembly is supported by all major browsers on desktop and mobile environments. It’s currently supported by 93.17% of all global users. And today we have some fallback strategies to support the other users.

In the next article, I’ll show you the best practices, tools, and fallbacks to build a complete project with Go, WebAssembly, and Webpack on the frontend.