feat: allows registering multiple wasm instances

This commit is contained in:
Nicolas Lepage
2025-11-21 00:57:18 +01:00
parent 9ff6ec615a
commit 9ae9f3c443
23 changed files with 300 additions and 145 deletions

View File

@@ -0,0 +1,27 @@
package main
import (
"encoding/json"
"fmt"
"net/http"
"os"
wasmhttp "github.com/nlepage/go-wasm-http-server/v2"
)
var binaryName = ""
func main() {
http.HandleFunc("/hello", func(res http.ResponseWriter, req *http.Request) {
res.Header().Add("Content-Type", "application/json")
if err := json.NewEncoder(res).Encode(map[string]string{
"message": fmt.Sprintf("Hello from %s at path %s", binaryName, os.Getenv("WASM_HTTP_PATH")),
}); err != nil {
panic(err)
}
})
wasmhttp.Serve(nil)
select {}
}

BIN
docs/hello-multiple/api1.wasm Executable file

Binary file not shown.

BIN
docs/hello-multiple/api2.wasm Executable file

Binary file not shown.

3
docs/hello-multiple/build.sh Executable file
View File

@@ -0,0 +1,3 @@
#!/bin/sh
GOOS=js GOARCH=wasm go build -o api1.wasm --ldflags="-X 'main.binaryName=api1.wasm'" .
GOOS=js GOARCH=wasm go build -o api2.wasm --ldflags="-X 'main.binaryName=api2.wasm'" .

View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>go-wasm-http-server hello demo</title>
<script>
navigator.serviceWorker.register('sw.js');
async function hello() {
const api = document.querySelector('#api').value;
const res = await fetch(`${api}/hello`);
const { message } = await res.json();
alert(message);
}
</script>
</head>
<body>
<label for="api">API: </label
><select id="api">
<option value="api1/1">api1.wasm first instance</option>
<option value="api1/2">api1.wasm second instance</option>
<option value="api2/1">api2.wasm first instance</option>
<option value="api2/2">api2.wasm second instance</option>
</select>
<button onclick="hello()">Hello</button>
</body>
</html>

15
docs/hello-multiple/sw.js Normal file
View File

@@ -0,0 +1,15 @@
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.25.1/lib/wasm/wasm_exec.js');
importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@master/sw.js');
addEventListener('install', (event) => {
event.waitUntil(caches.open('examples').then((cache) => cache.addAll(['api1.wasm', 'api2.wasm'])));
});
addEventListener('activate', (event) => {
event.waitUntil(clients.claim());
});
registerWasmHTTPListener('api1.wasm', { base: 'api1/1/' });
registerWasmHTTPListener('api1.wasm', { base: 'api1/2/' });
registerWasmHTTPListener('api2.wasm', { base: 'api2/1/' });
registerWasmHTTPListener('api2.wasm', { base: 'api2/2/' });

Binary file not shown.

View File

@@ -3,47 +3,46 @@
<head>
<title>go-wasm-http-server hello sse demo</title>
<script>
navigator.serviceWorker.register('sw.js')
.then(registration => {
const serviceWorker = registration.installing ?? registration.waiting ?? registration.active
if (serviceWorker.state === 'activated') {
document.querySelector('#open-button').disabled = false
} else {
serviceWorker.addEventListener('statechange', e => {
if (e.target.state === 'activated') {
document.querySelector('#open-button').disabled = false
}
})
}
})
navigator.serviceWorker.register('sw.js').then((registration) => {
const serviceWorker = registration.installing ?? registration.waiting ?? registration.active;
if (serviceWorker.state === 'activated') {
document.querySelector('#open-button').disabled = false;
} else {
serviceWorker.addEventListener('statechange', (e) => {
if (e.target.state === 'activated') {
document.querySelector('#open-button').disabled = false;
}
});
}
});
window.addEventListener('DOMContentLoaded', () => {
let es;
document.querySelector('#open-button').addEventListener('click', () => {
if (es && es.readyState === es.OPEN) return
es = new EventSource('api/events')
if (es && es.readyState === es.OPEN) return;
es = new EventSource('api/events');
es.addEventListener('ping', (e) => {
const li = document.createElement('li')
li.textContent = `ping: data=${e.data}`
document.querySelector('ul').append(li)
})
})
const li = document.createElement('li');
li.textContent = `ping: data=${e.data}`;
document.querySelector('ul').append(li);
});
});
document.querySelector('#close-button').addEventListener('click', () => {
if (!es) return
es.close()
})
if (!es) return;
es.close();
});
document.querySelector('#clear-button').addEventListener('click', () => {
document.querySelector('ul').innerHTML = ''
})
document.querySelector('ul').innerHTML = '';
});
window.addEventListener('unload', () => {
if (!es) return
es.close()
})
})
if (!es) return;
es.close();
});
});
</script>
</head>
<body>

View File

@@ -1,14 +1,14 @@
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.23.1/misc/wasm/wasm_exec.js')
importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@v2.2.1/sw.js')
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.25.1/lib/wasm/wasm_exec.js');
importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@master/sw.js');
const wasm = 'api.wasm'
const wasm = 'api.wasm';
addEventListener('install', (event) => {
event.waitUntil(caches.open('examples').then((cache) => cache.add(wasm)))
})
event.waitUntil(caches.open('examples').then((cache) => cache.add(wasm)));
});
addEventListener('activate', (event) => {
event.waitUntil(clients.claim())
})
event.waitUntil(clients.claim());
});
registerWasmHTTPListener(wasm, { base: 'api' })
registerWasmHTTPListener(wasm, { base: 'api' });

View File

@@ -3,30 +3,30 @@
<head>
<title>go-wasm-http-server hello with state and keepalive demo</title>
<script>
navigator.serviceWorker.register('sw.js').then(registration => {
const sw = registration.active ?? registration.installing ?? registration.waiting
setInterval(() => sw.postMessage(null), 15000)
})
navigator.serviceWorker.register('sw.js').then((registration) => {
const sw = registration.active ?? registration.installing ?? registration.waiting;
setInterval(() => sw.postMessage(null), 15000);
});
async function hello() {
const name = document.querySelector("#name").value
const name = document.querySelector('#name').value;
const res = await fetch('api/hello', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
},
body: JSON.stringify({ name })
})
body: JSON.stringify({ name }),
});
const { message } = await res.json()
const { message } = await res.json();
alert(message)
alert(message);
}
</script>
</head>
<body>
<label for="name">Name: </label><input id="name" value="World">
<label for="name">Name: </label><input id="name" value="World" />
<button onclick="hello()">Hello</button>
</body>
</html>

View File

@@ -1,16 +1,16 @@
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.23.1/misc/wasm/wasm_exec.js')
importScripts('../sw.js')
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.25.1/lib/wasm/wasm_exec.js');
importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@master/sw.js');
const wasm = '../hello-state/api.wasm'
const wasm = '../hello-state/api.wasm';
addEventListener('install', event => {
event.waitUntil(caches.open('hello-state').then((cache) => cache.add(wasm)))
})
addEventListener('activate', event => {
event.waitUntil(clients.claim())
})
addEventListener('install', (event) => {
event.waitUntil(caches.open('examples').then((cache) => cache.add(wasm)));
});
addEventListener('message', () => {})
addEventListener('activate', (event) => {
event.waitUntil(clients.claim());
});
registerWasmHTTPListener(wasm, { base: 'api' })
addEventListener('message', () => {});
registerWasmHTTPListener(wasm, { base: 'api' });

Binary file not shown.

View File

@@ -3,27 +3,27 @@
<head>
<title>go-wasm-http-server hello with state demo</title>
<script>
navigator.serviceWorker.register('sw.js')
navigator.serviceWorker.register('sw.js');
async function hello() {
const name = document.querySelector("#name").value
const name = document.querySelector('#name').value;
const res = await fetch('api/hello', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
},
body: JSON.stringify({ name })
})
body: JSON.stringify({ name }),
});
const { message } = await res.json()
const { message } = await res.json();
alert(message)
alert(message);
}
</script>
</head>
<body>
<label for="name">Name: </label><input id="name" value="World">
<label for="name">Name: </label><input id="name" value="World" />
<button onclick="hello()">Hello</button>
</body>
</html>

View File

@@ -1,14 +1,14 @@
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.23.1/misc/wasm/wasm_exec.js')
importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@v2.2.1/sw.js')
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.25.1/lib/wasm/wasm_exec.js');
importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@master/sw.js');
const wasm = 'api.wasm'
const wasm = 'api.wasm';
addEventListener('install', (event) => {
event.waitUntil(caches.open('examples').then((cache) => cache.add(wasm)))
})
addEventListener('activate', (event) => {
event.waitUntil(clients.claim())
})
event.waitUntil(caches.open('examples').then((cache) => cache.add(wasm)));
});
registerWasmHTTPListener(wasm, { base: 'api' })
addEventListener('activate', (event) => {
event.waitUntil(clients.claim());
});
registerWasmHTTPListener(wasm, { base: 'api' });

Binary file not shown.

View File

@@ -3,27 +3,27 @@
<head>
<title>go-wasm-http-server hello demo</title>
<script>
navigator.serviceWorker.register('sw.js')
navigator.serviceWorker.register('sw.js');
async function hello() {
const name = document.querySelector("#name").value
const name = document.querySelector('#name').value;
const res = await fetch('api/hello', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
},
body: JSON.stringify({ name })
})
body: JSON.stringify({ name }),
});
const { message } = await res.json()
const { message } = await res.json();
alert(message)
alert(message);
}
</script>
</head>
<body>
<label for="name">Name: </label><input id="name" value="World">
<label for="name">Name: </label><input id="name" value="World" />
<button onclick="hello()">Hello</button>
</body>
</html>

View File

@@ -1,14 +1,14 @@
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.23.1/misc/wasm/wasm_exec.js')
importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@v2.2.1/sw.js')
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.25.1/lib/wasm/wasm_exec.js');
importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@master/sw.js');
const wasm = 'api.wasm'
const wasm = 'api.wasm';
addEventListener('install', (event) => {
event.waitUntil(caches.open('examples').then((cache) => cache.add(wasm)))
})
event.waitUntil(caches.open('examples').then((cache) => cache.add(wasm)));
});
addEventListener('activate', (event) => {
event.waitUntil(clients.claim())
})
event.waitUntil(clients.claim());
});
registerWasmHTTPListener(wasm, { base: 'api' })
registerWasmHTTPListener(wasm, { base: 'api' });

View File

@@ -6,11 +6,40 @@
<body>
<h1>go-wasm-http-server examples</h1>
<ul>
<li><a href="hello/">Hello example</a> (<a href="https://github.com/nlepage/go-wasm-http-server/tree/master/docs/hello">Sources</a>)</li>
<li><a href="hello-state/">Hello example with state</a> (<a href="https://github.com/nlepage/go-wasm-http-server/tree/master/docs/hello-state">Sources</a>)</li>
<li><a href="hello-state-keepalive/">Hello example with state and keepalive</a> (<a href="https://github.com/nlepage/go-wasm-http-server/tree/master/docs/hello-state-keepalive">Sources</a>)</li>
<li><a href="hello-sse/">Hello example with Server Sent Events</a> (<a href="https://github.com/nlepage/go-wasm-http-server/tree/master/docs/hello-sse">Sources</a>)</li>
<li>
<a href="hello/">Hello example</a> (<a
href="https://github.com/nlepage/go-wasm-http-server/tree/master/docs/hello"
>Sources</a
>)
</li>
<li>
<a href="hello-multiple/">Hello example with multiple wasm instances</a> (<a
href="https://github.com/nlepage/go-wasm-http-server/tree/master/docs/hello-multiple"
>Sources</a
>)
</li>
<li>
<a href="hello-state/">Hello example with state</a> (<a
href="https://github.com/nlepage/go-wasm-http-server/tree/master/docs/hello-state"
>Sources</a
>)
</li>
<li>
<a href="hello-state-keepalive/">Hello example with state and keepalive</a> (<a
href="https://github.com/nlepage/go-wasm-http-server/tree/master/docs/hello-state-keepalive"
>Sources</a
>)
</li>
<li>
<a href="hello-sse/">Hello example with Server Sent Events</a> (<a
href="https://github.com/nlepage/go-wasm-http-server/tree/master/docs/hello-sse"
>Sources</a
>)
</li>
</ul>
<p>See <a href="https://github.com/nlepage/go-wasm-http-server?tab=readme-ov-file#readme">README</a> for more information.</p>
<p>
See <a href="https://github.com/nlepage/go-wasm-http-server?tab=readme-ov-file#readme">README</a> for more
information.
</p>
</body>
</html>