Dmitri Shuralyov | bb850ad | 2018-08-23 14:53:11 -0400 | [diff] [blame] | 1 | Go 1.11 adds an experimental port to WebAssembly. |
| 2 | |
| 3 | WebAssembly is described on its [home page](https://webassembly.org) as: |
| 4 | |
| 5 | > WebAssembly (abbreviated _Wasm_) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications. |
| 6 | |
Brad Fitzpatrick | 1b2abf2 | 2018-08-24 08:46:59 -0700 | [diff] [blame] | 7 | This page will be updated over time with more information relevant to Go's support for WebAssembly. |
| 8 | |
Go101 | fa3e0c9 | 2018-08-27 08:22:57 -0400 | [diff] [blame] | 9 | # Prerequisite |
| 10 | |
Go101 | e640528 | 2018-08-27 08:26:36 -0400 | [diff] [blame] | 11 | Note, if you ever set the `GOROOT` environment variable to an old Go SDK path, please remove this environment variable. This environment variable is not needed any more. Otherwise, the `go build` command below will report error: |
| 12 | |
| 13 | ``` |
Go101 | fa3e0c9 | 2018-08-27 08:22:57 -0400 | [diff] [blame] | 14 | go tool compile: exit status 2 |
| 15 | compile: unknown architecture "wasm" |
| 16 | ``` |
| 17 | |
Brad Fitzpatrick | 1b2abf2 | 2018-08-24 08:46:59 -0700 | [diff] [blame] | 18 | # Example |
| 19 | |
| 20 | To compile the basic Go program for the web: |
| 21 | |
| 22 | ```go |
| 23 | package main |
| 24 | |
| 25 | func main() { |
| 26 | println("Hello, WebAssembly!") |
| 27 | } |
| 28 | ``` |
| 29 | |
| 30 | Run: |
| 31 | |
| 32 | ```sh |
| 33 | $ GOARCH=wasm GOOS=js go build -o test.wasm main.go |
| 34 | ``` |
| 35 | |
| 36 | And copy over the HTML & JS support files: |
| 37 | |
| 38 | ```sh |
| 39 | $ cp $(go env GOROOT)/misc/wasm/wasm_exec.{html,js} . |
| 40 | ``` |
| 41 | |
| 42 | Then serve those three files (`wasm_exec.html`, `wasm_exec.js`, and `test.wasm`) to a web browser. |
| 43 | |
| 44 | For a basic HTTP server: |
| 45 | |
| 46 | ```go |
| 47 | package main |
| 48 | |
| 49 | import ( |
| 50 | "flag" |
| 51 | "log" |
| 52 | "net/http" |
Johan Brandhorst | 28eca6e | 2018-08-27 08:56:00 +0100 | [diff] [blame] | 53 | "strings" |
Brad Fitzpatrick | 1b2abf2 | 2018-08-24 08:46:59 -0700 | [diff] [blame] | 54 | ) |
| 55 | |
| 56 | var ( |
Brad Fitzpatrick | 3c560b9 | 2018-08-24 09:30:49 -0700 | [diff] [blame] | 57 | listen = flag.String("listen", ":8080", "listen address") |
| 58 | dir = flag.String("dir", ".", "directory to serve") |
Brad Fitzpatrick | 1b2abf2 | 2018-08-24 08:46:59 -0700 | [diff] [blame] | 59 | ) |
| 60 | |
| 61 | func main() { |
| 62 | flag.Parse() |
| 63 | log.Printf("listening on %q...", *listen) |
Johan Brandhorst | 28eca6e | 2018-08-27 08:56:00 +0100 | [diff] [blame] | 64 | log.Fatal(http.ListenAndServe(*listen, http.HandlerFunc(func(resp http.ResponseWriter, req *http.Request) { |
| 65 | if strings.HasSuffix(req.URL.Path, ".wasm") { |
| 66 | resp.Header().Set("content-type", "application/wasm") |
| 67 | } |
| 68 | |
| 69 | http.FileServer(http.Dir(*dir)).ServeHTTP(resp, req) |
| 70 | }))) |
Brad Fitzpatrick | 1b2abf2 | 2018-08-24 08:46:59 -0700 | [diff] [blame] | 71 | } |
| 72 | ``` |
| 73 | |
Peterson Domingos | 94ea75b | 2018-08-27 11:25:41 -0300 | [diff] [blame] | 74 | Now navigate to http://localhost:8080/wasm_exec.html, click "Run", and you should see the output in the JavaScript debug console. |
Brad Fitzpatrick | 7ff1c19 | 2018-08-24 08:49:05 -0700 | [diff] [blame] | 75 | |
| 76 | # Interacting with the DOM |
| 77 | |
| 78 | See https://tip.golang.org/pkg/syscall/js/ |
| 79 | |
Elliot Forbes | faab9de | 2018-08-26 14:55:46 +0100 | [diff] [blame] | 80 | # Tutorials + Articles |
| 81 | |
Justin Clift | b2b432d | 2018-08-31 14:35:27 +0100 | [diff] [blame] | 82 | * [Building a Calculator with Go and WebAssembly](https://youtu.be/4kBvvk2Bzis) |
Larry Clapp | 9bfee2a | 2018-08-30 15:33:47 -0600 | [diff] [blame] | 83 | ([Source code](https://blog.owulveryck.info/2018/06/08/some-notes-about-the-upcoming-webassembly-support-in-go.html)) |
Justin Clift | b2b432d | 2018-08-31 14:35:27 +0100 | [diff] [blame] | 84 | * [Get Going with WebAssembly](https://www.youtube.com/watch?v=iTrx0BbUXI4) |
Justin Clift | 028c201 | 2018-08-30 17:47:30 +0100 | [diff] [blame] | 85 | |
| 86 | # Further reference examples |
| 87 | |
Justin Clift | b2b432d | 2018-08-31 14:35:27 +0100 | [diff] [blame] | 88 | * [GoWasm Experiments](https://github.com/stdiopt/gowasm-experiments) - Demonstrates working code for several common call types |
Justin Clift | af0bf55 | 2018-08-31 16:35:50 +0100 | [diff] [blame] | 89 | * [Drawing simple 3D objects on the 2D canvas](https://justinclift.github.io/wasmGraph1/) ([source code](https://github.com/justinclift/wasmGraph1/)) |
Justin Clift | 8b8da33 | 2018-08-31 14:37:02 +0100 | [diff] [blame] | 90 | * Displays wireframe solids on the 2d canvas, using basic matrix maths. Use wasd/keypad keys to rotate. |