This is a rapid post about webassembly. Its goal is to act as a reminder for me more than a tutorial on how to use it.
The upcoming version of go 1.11 will have support for Wasm. @neelance has done most of the work of implementation. The support for wasm can already be tested by extracting his working branch from GitHub.
See this article for more information.
Setup of the toolchain
To generate a wasm file from a go source, you need to get and patch the go toolset from the sources:
~ mkdir ~/gowasm ~ git clone https://go.googlesource.com/go ~/gowasm ~ cd ~/gowasm ~ git remote add neelance https://github.com/neelance/go ~ git fetch --all ~ git checkout wasm-wip ~ cd src ~ ./make.bash
Then to use this version of go, point the
~/gowasm and use the binaries present in
As usual, the first sample is a “hello world”. Let’s write this:
and compile it into a file called
GOROOT=~/gowasm GOARCH=wasm GOOS=js ~/gowasm/bin/go build -o example.wasm main.go
Running the sample
Here is an extract from The official documentation:
- Get the .wasm bytes into a typed array or ArrayBuffer
- Compile the bytes into a WebAssembly.Module
- Instantiate the WebAssembly.Module with imports to get the callable exports
~/gowasm/misc/wasm/wasm_exec.js. It comes with an HTML file that takes care of gluing everything in the browser.
To actually run our file, let’s copy the following files in a directory and serve them by a webserver:
~ mkdir ~/wasmtest ~ cp ~/gowasm/misc/wasm/wasm_exec.js ~/wasmtest ~ cp ~/gowasm/misc/wasm/wasm_exec.html ~/wasmtest/index.html ~ cp example.wasm ~/wasmtest
Then edit the file
index.html to run the correct sample:
In theory, any web server could do the job, but I had faced an issue when I tried to run it with
Here is a quick hack to run our test: to write a go server with a particular handler for our wasm file.
Note Setting up a special router to handle all the wasm files is no big deal, but as I said, this is a POC and this post are side notes about it.
Then run the server with
go run server.go and point your browser to http://localhost:3000.
Open the console, and voilà !
Interacting with the browser.
Let’s interact with the world.
Addressing the DOM
To get the documentation about this package, just run:
GOROOT=~/gowasm godoc -http=:6060
and point your browser to http://localhost:6060/pkg/syscall/js/.
Let’s write a simple HTML file that displays an input field. Then, from the webassembly, let’s place an event on this element and trigger an action when this event fires.
index.html and place this code just below the
Then modify the Go file:
Compile the file as you did before and refresh your browser… Open the console and type a number in the input field…. voilà
Exposing a function
What we need to do is to create a
Here is the new Go code:
Now compile and run the code. Open back your browser and open the console.
If you type
output it should return a
Object not found. Now type
add(2,3) and type
output… You should get
This is not the most elegant way to interact, but it is working as expected.
The wasm support in Go is just starting but is in massive development. Many things that are working by now. I am even able to run a complete recurrent neural network coded thanks to Gorgonia directly in the browser. I will explain all of this later.