41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
export default () => (
|
|
<section>
|
|
<h1>SSE Demo</h1>
|
|
|
|
<div id="status">Connecting...</div>
|
|
<div id="time" style="font-size: 2em; font-family: monospace;"></div>
|
|
<div id="count">Events received: 0</div>
|
|
|
|
<p style="margin-top: 2em;">
|
|
<a href="/">Back to Home</a>
|
|
</p>
|
|
|
|
<script dangerouslySetInnerHTML={{
|
|
__html: `
|
|
const statusEl = document.getElementById('status')
|
|
const timeEl = document.getElementById('time')
|
|
const countEl = document.getElementById('count')
|
|
let count = 0
|
|
|
|
const events = new EventSource('/api/time')
|
|
|
|
events.onopen = () => {
|
|
statusEl.textContent = 'Connected'
|
|
statusEl.style.color = 'green'
|
|
}
|
|
|
|
events.onmessage = (e) => {
|
|
const data = JSON.parse(e.data)
|
|
timeEl.textContent = new Date(data.time).toLocaleTimeString()
|
|
count++
|
|
countEl.textContent = 'Events received: ' + count
|
|
}
|
|
|
|
events.onerror = () => {
|
|
statusEl.textContent = 'Disconnected'
|
|
statusEl.style.color = 'red'
|
|
}
|
|
`}} />
|
|
</section>
|
|
)
|