mirror of
https://github.com/bigskysoftware/htmx.git
synced 2026-01-19 23:26:10 +00:00
84 lines
3.5 KiB
HTML
84 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="htmx-config" content='{"logAll":true}'>
|
|
<script src="/htmx.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.reconnectAttempts:3 sse.reconnectDelay:0 sse.reconnectMaxDelay:10s sse.pauseInBackground: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>
|