2024-10-16 14:01:11 +02:00

58 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html>
<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
}
})
}
})
window.addEventListener('DOMContentLoaded', () => {
let es;
document.querySelector('#open-button').addEventListener('click', () => {
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)
})
})
document.querySelector('#close-button').addEventListener('click', () => {
if (!es) return
es.close()
})
document.querySelector('#clear-button').addEventListener('click', () => {
document.querySelector('ul').innerHTML = ''
})
window.addEventListener('unload', () => {
if (!es) return
es.close()
})
})
</script>
</head>
<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>