wasmhttp

README

Welcome to go-wasm-http-server 👋

Embed your Go HTTP handlers in a ServiceWorker (using WebAssembly) and emulate an HTTP server!

Examples

• Hello example (sources)
• Hello example with state (sources)
• Hello example with state and keepalive (sources)
• 😺 Catption generator example (sources)
• Random password generator web server (sources forked from jbarham/random-password-please)

How?

Talk given at the Go devroom of FOSDEM 2021 explaining how go-wasm-http-server works:

The slides are available here.

Why?

go-wasm-http-server can help you put up a demonstration for a project without actually running a Go HTTP server.

Requirements

go-wasm-http-server requires you to build your Go application to WebAssembly, so you need to make sure your code is compatible:

• no C bindings
• no System dependencies such as file system or network (database server for example)

Usage

Step 1: Build to js/wasm

In your Go code, replace http.ListenAndServe() (or net.Listen() + http.Serve()) by wasmhttp.Serve():

📄 server.go

// +build !js,!wasm

package main

import (
    "net/http"
)

func main() {
    // Define handlers...

    http.ListenAndServe(":8080", nil)
}

becomes:

📄 server_js_wasm.go

// +build js,wasm

package main

import (
    wasmhttp "github.com/nlepage/go-wasm-http-server"
)

func main() {
    // Define handlers...

    wasmhttp.Serve(nil)
}

You may want to use build tags as shown above (or file name suffixes) in order to be able to build both to WebAssembly and other targets.

Then build your WebAssembly binary:

GOOS=js GOARCH=wasm go build -o server.wasm .

Step 2: Create ServiceWorker file

Create a ServiceWorker file with the following code:

📄 sw.js

importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.18.4/misc/wasm/wasm_exec.js')
importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@v1.1.0/sw.js')

registerWasmHTTPListener('path/to/server.wasm')

By default the server will deploy at the ServiceWorker's scope root, check registerWasmHTTPListener()'s API for more information.

You may want to add these additional event listeners in your ServiceWorker:

// Skip installed stage and jump to activating stage
addEventListener('install', (event) => {
  event.waitUntil(skipWaiting())
})

// Start controlling clients as soon as the SW is activated
addEventListener('activate', event => {
  event.waitUntil(clients.claim())
})

Step 3: Register the ServiceWorker

In your web page(s), register the ServiceWorker:

<script>
  // By default the ServiceWorker's scope will be "server/"
  navigator.serviceWorker.register('server/sw.js')
</script>

Now your web page(s) may start fetching from the server:

// The server will receive a request for "/path/to/resource"
fetch('server/path/to/resource').then(res => {
  // use response...
})

API

For Go API see pkg.go.dev/github.com/nlepage/go-wasm-http-server

JavaScript API

registerWasmHTTPListener(wasmUrl, options)

Instantiates and runs the WebAssembly module at wasmUrl, and registers a fetch listener forwarding requests to the WebAssembly module's server.

⚠ This function must be called only once in a ServiceWorker, if you want to register several servers you must use several ServiceWorkers.

The server will be "deployed" at the root of the ServiceWorker's scope by default, base may be used to deploy the server at a subpath of the scope.

See ServiceWorkerContainer.register() for more information about the scope of a ServiceWorker.

wasmUrl

URL string of the WebAssembly module, example: "path/to/my-module.wasm".

options

An optional object containing:

• base (string): Base path of the server, relative to the ServiceWorker's scope.
• args (string[]): Arguments for the WebAssembly module.

Author

👤 Nicolas Lepage

• Website: https://nicolas.lepage.dev/
• Twitter: @njblepage
• Github: @nlepage

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 Nicolas Lepage.
This project is Apache 2.0 licensed.

---

This README was generated with ❤️ by readme-md-generator

Documentation

Overview

Package wasmhttp (github.com/nlepage/go-wasm-http-server) allows to create a WebAssembly Go HTTP Server embedded in a ServiceWorker.

It is a subset of the full solution, a full usage is available on the github repository: https://github.com/nlepage/go-wasm-http-server

Example (Json)

Demonstrates a simple hello JSON service.

package main

import (
	"encoding/json"
	"fmt"
	"net/http"

	wasmhttp "github.com/nlepage/go-wasm-http-server"
)

func main() {
	http.HandleFunc("/hello", func(res http.ResponseWriter, req *http.Request) {
		params := make(map[string]string)
		if err := json.NewDecoder(req.Body).Decode(&params); err != nil {
			panic(err)
		}

		if err := json.NewEncoder(res).Encode(map[string]string{
			"message": fmt.Sprintf("Hello %s!", params["name"]),
		}); err != nil {
			panic(err)
		}
	})

	defer wasmhttp.Serve(nil)()

	// Wait for webpage event or use empty select{}
}

Index

• func Request(r js.Value) *http.Request
• func Serve(handler http.Handler) func()
• type ResponseRecorder
  • func NewResponseRecorder() ResponseRecorder
  • func (rr ResponseRecorder) JSResponse() js.Value

Examples

• Package (Json)

Functions

func Request

func Request(r js.Value) *http.Request

Request builds and returns the equivalent http.Request

func Serve

func Serve(handler http.Handler) func()

Serve serves HTTP requests using handler or http.DefaultServeMux if handler is nil.

Types

type ResponseRecorder

type ResponseRecorder struct {
	*httptest.ResponseRecorder
}

ResponseRecorder uses httptest.ResponseRecorder to build a JS Response

func NewResponseRecorder

func NewResponseRecorder() ResponseRecorder

NewResponseRecorder returns a new ResponseRecorder

func (ResponseRecorder) JSResponse

func (rr ResponseRecorder) JSResponse() js.Value

JSResponse builds and returns the equivalent JS Response