How to Run GoLang (1.15+) Code in a Browser Using WebAssembly
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.
In this article, we will learn how to create a project with GoLang in a browser using WebAssembly.
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.
To run the binary code in a browser, we have to generate the
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:
GOARCH. We will set
GOOS, 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
$ 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
The Go function
Calling a Go Function
Implementing the Common Colors Example
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
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.
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.