2024-10-14 09:14:50 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2024-10-16 13:24:03 +02:00
|
|
|
<title>go-wasm-http-server hello sse demo</title>
|
2024-10-14 09:14:50 +02:00
|
|
|
<script>
|
2025-11-21 00:57:18 +01:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2024-10-16 13:24:03 +02:00
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
|
|
|
let es;
|
|
|
|
|
|
|
|
|
|
document.querySelector('#open-button').addEventListener('click', () => {
|
2025-11-21 00:57:18 +01:00
|
|
|
if (es && es.readyState === es.OPEN) return;
|
|
|
|
|
es = new EventSource('api/events');
|
2024-10-16 13:24:03 +02:00
|
|
|
es.addEventListener('ping', (e) => {
|
2025-11-21 00:57:18 +01:00
|
|
|
const li = document.createElement('li');
|
|
|
|
|
li.textContent = `ping: data=${e.data}`;
|
|
|
|
|
document.querySelector('ul').append(li);
|
|
|
|
|
});
|
|
|
|
|
});
|
2024-10-16 13:24:03 +02:00
|
|
|
|
|
|
|
|
document.querySelector('#close-button').addEventListener('click', () => {
|
2025-11-21 00:57:18 +01:00
|
|
|
if (!es) return;
|
|
|
|
|
es.close();
|
|
|
|
|
});
|
2024-10-16 13:24:03 +02:00
|
|
|
|
|
|
|
|
document.querySelector('#clear-button').addEventListener('click', () => {
|
2025-11-21 00:57:18 +01:00
|
|
|
document.querySelector('ul').innerHTML = '';
|
|
|
|
|
});
|
2024-10-16 13:24:03 +02:00
|
|
|
|
2024-10-14 09:14:50 +02:00
|
|
|
window.addEventListener('unload', () => {
|
2025-11-21 00:57:18 +01:00
|
|
|
if (!es) return;
|
|
|
|
|
es.close();
|
|
|
|
|
});
|
|
|
|
|
});
|
2024-10-14 09:14:50 +02:00
|
|
|
</script>
|
|
|
|
|
</head>
|
2024-10-16 13:24:03 +02:00
|
|
|
<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>
|
2024-10-14 09:14:50 +02:00
|
|
|
</html>
|
