1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE html>
<html>
<head>
<meta name="htmx-config" content='{"logAll":true, "extensions":"sse"}'>
<script src="/htmx.js"></script>
<script src="/ext/hx-sse.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="group max-w-5xl mx-auto p-4 my-12">
<h1 class="text-xl font-bold mb-4">
Server-Sent Events (SSE) Test
</h1>
<!-- Example 1: One-shot Stream -->
<section class="mb-12">
<h2 class="text-lg font-semibold mb-2">1. One-shot Stream</h2>
<p class="text-sm text-neutral-600 mb-4">
Server sends multiple messages, then closes. Each message replaces the content.
</p>
<button
hx-get="/matrix-stream"
hx-swap="innerHTML"
hx-target="#matrix-output"
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 mb-4 cursor-pointer">
Start Stream
</button>
<div id="matrix-output" class="fixed inset-0 bg-black font-mono font-bold text-xl text-green-500 invisible has-[.matrix-text]:visible content-center text-center transition-all"></div>
</section>
<!-- Example 2: Persistent Stream -->
<section class="mb-12">
<h2 class="text-lg font-semibold mb-2">2. Persistent Stream</h2>
<p class="text-sm text-neutral-600 mb-4">
Long-lived connection. Server sends <code><partial></code> tags to update multiple targets.
</p>
<button
hx-get="/events"
hx-target="#events-output"
hx-swap="innerHTML"
hx-config="sse.reconnect:true sse.reconnectMaxAttempts:3 sse.reconnectDelay:0 sse.reconnectMaxDelay:10s sse.pauseOnBackground:true"
class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 mb-4">
Connect
</button>
<div id="events-output" class="fixed inset-0 bg-neutral-950 text-white invisible has-[.events-active]:visible font-mono">
<div id="activity" class="absolute inset-0 flex items-center justify-center text-sm opacity-30 max-w-md mx-auto space-y-3 flex-col mask-y-from-80% mask-y-to-100%"></div>
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-3 bg-neutral-900 px-4 py-2 rounded-full border border-neutral-800">
<div id="status-indicator" class="w-2 h-2 rounded-full bg-neutral-500"></div>
<div id="system-status" class="text-sm"></div>
</div>
</div>
</section>
<!-- Example 3: Custom Events -->
<section class="mb-12">
<h2 class="text-lg font-semibold mb-2">3. Custom Events from SSE</h2>
<p class="text-sm text-neutral-600 mb-4">
SSE <code>event:</code> fields trigger custom DOM events. Listen with <code>hx-on:</code> attributes.
</p>
<button
hx-get="/progress-stream"
hx-on:progress="htmx.find('#bar').style.width = event.detail.data + '%'; htmx.find('#pct').textContent = event.detail.data + '%'"
hx-on:done="this.textContent = 'Complete!'"
class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 mb-3 cursor-pointer">
Start Progress
</button>
<div class="flex items-center gap-2 mt-4">
<div class="flex-1 bg-neutral-200 rounded-full h-4 overflow-hidden">
<div id="bar" class="bg-green-500 h-full transition-all duration-100" style="width: 0%"></div>
</div>
<span id="pct" class="text-sm font-mono w-12 text-right">0%</span>
</div>
</section>
<footer class="mt-12 pt-6 border-t border-neutral-200 text-sm text-neutral-500">
<p>Check browser console for htmx debug logs</p>
</footer>
</body>
</html>
|
