feat: improves examples

This commit is contained in:
Nicolas Lepage 2024-10-16 13:24:03 +02:00
parent 98257b470a
commit c93d379f20
No known key found for this signature in database
GPG Key ID: B0879E35E66D8F6F
5 changed files with 54 additions and 22 deletions

View File

@ -1,32 +1,57 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>go-wasm-http-server hello demo</title> <title>go-wasm-http-server hello sse demo</title>
<script> <script>
navigator.serviceWorker.register('sw.js') navigator.serviceWorker.register('sw.js')
.then(registration => { .then(registration => {
const serviceWorker = registration.installing ?? registration.waiting ?? registration.active const serviceWorker = registration.installing ?? registration.waiting ?? registration.active
if (serviceWorker.state === 'activated') { if (serviceWorker.state === 'activated') {
startEventSource() document.querySelector('#open-button').disabled = false
} else { } else {
serviceWorker.addEventListener('statechange', e => { serviceWorker.addEventListener('statechange', e => {
if (e.target.state === 'activated') startEventSource() if (e.target.state === 'activated') {
document.querySelector('#open-button').disabled = false
}
}) })
} }
}) })
function startEventSource() { window.addEventListener('DOMContentLoaded', () => {
const es = new EventSource('/api/events') let es;
es.addEventListener('ping', (e) => {
const p = document.createElement('p') document.querySelector('#open-button').addEventListener('click', () => {
p.textContent = `ping: data=${e.data}` if (es && es.readyState === es.OPEN) return
document.body.append(p) 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)
})
}) })
document.querySelector('#close-button').addEventListener('click', () => {
if (!es) return
es.close()
})
document.querySelector('#clear-button').addEventListener('click', () => {
document.querySelector('ul').innerHTML = ''
})
window.addEventListener('unload', () => { window.addEventListener('unload', () => {
if (!es) return
es.close() es.close()
}) })
} })
</script> </script>
</head> </head>
<body></body> <body>
<p>
<button id="open-button" disabled>Open event source</button>
<button id="close-button">Close event source</button>
<button id="clear-button">Clear events</button>
</p>
<ul></ul>
</body>
</html> </html>

View File

@ -1,12 +1,14 @@
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.23.1/misc/wasm/wasm_exec.js') 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.0.2/sw.js') importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@v2.0.2/sw.js')
const wasm = 'api.wasm'
addEventListener('install', (event) => { addEventListener('install', (event) => {
event.waitUntil(skipWaiting()) event.waitUntil(caches.open('examples').then((cache) => cache.add(wasm)))
}) })
addEventListener('activate', event => { addEventListener('activate', (event) => {
event.waitUntil(clients.claim()) event.waitUntil(clients.claim())
}) })
registerWasmHTTPListener('api.wasm', { base: 'api' }) registerWasmHTTPListener(wasm, { base: 'api' })

View File

@ -1,8 +1,10 @@
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.23.1/misc/wasm/wasm_exec.js') 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.0.2/sw.js') importScripts('../sw.js')
const wasm = '../hello-state/api.wasm'
addEventListener('install', event => { addEventListener('install', event => {
event.waitUntil(caches.open('hello-state').then((cache) => cache.add('api.wasm'))) event.waitUntil(caches.open('hello-state').then((cache) => cache.add(wasm)))
}) })
addEventListener('activate', event => { addEventListener('activate', event => {
@ -11,4 +13,4 @@ addEventListener('activate', event => {
addEventListener('message', () => {}) addEventListener('message', () => {})
registerWasmHTTPListener('../hello-state/api.wasm', { base: 'api' }) registerWasmHTTPListener(wasm, { base: 'api' })

View File

@ -1,13 +1,14 @@
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.23.1/misc/wasm/wasm_exec.js') 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.0.2/sw.js') importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@v2.0.2/sw.js')
const wasm = 'api.wasm'
addEventListener('install', (event) => { addEventListener('install', (event) => {
event.waitUntil(caches.open('hello-state').then((cache) => cache.add('api.wasm'))) event.waitUntil(caches.open('examples').then((cache) => cache.add(wasm)))
event.waitUntil(skipWaiting())
}) })
addEventListener('activate', (event) => { addEventListener('activate', (event) => {
event.waitUntil(clients.claim()) event.waitUntil(clients.claim())
}) })
registerWasmHTTPListener('api.wasm', { base: 'api' }) registerWasmHTTPListener(wasm, { base: 'api' })

View File

@ -1,12 +1,14 @@
importScripts('https://cdn.jsdelivr.net/gh/golang/go@go1.23.1/misc/wasm/wasm_exec.js') 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.0.2/sw.js') importScripts('https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@v2.0.2/sw.js')
const wasm = 'api.wasm'
addEventListener('install', (event) => { addEventListener('install', (event) => {
event.waitUntil(caches.open('hello').then((cache) => cache.add('api.wasm'))) event.waitUntil(caches.open('examples').then((cache) => cache.add(wasm)))
}) })
addEventListener('activate', (event) => { addEventListener('activate', (event) => {
event.waitUntil(clients.claim()) event.waitUntil(clients.claim())
}) })
registerWasmHTTPListener('api.wasm', { base: 'api' }) registerWasmHTTPListener(wasm, { base: 'api' })