Server-Sent Events

MiniWork uses SSE to push real-time updates from the server to connected clients.

How It Works

1. Client connects to the SSE endpoint
2. Server holds the connection open
3. When data changes, server sends HTML fragments
4. HTMX swaps the fragments into the DOM

Subscribing to Updates

<div hx-sse="connect:/sse">
  <ul id="messages" hx-sse="swap:message">
    <!-- Messages will be swapped here -->
  </ul>
</div>

Component Subscriptions

export async function loader(ctx) {
  // This query subscribes the component to the 'messages' table
  const messages = ctx.db.query('SELECT * FROM messages ORDER BY created_at DESC');
  return { messages };
}

export default function MessagesPage({ data }) {
  return (
    <div hx-sse="connect:/sse">
      <ul id="message-list" hx-sse="swap:messages">
        {data.messages.map(msg => <li key={msg.id}>{msg.content}</li>)}
      </ul>
    </div>
  );
}

Configuration

export default defineConfig({
  sse: {
    enabled: true,
    heartbeat: 30000,  // Send heartbeat every 30 seconds
    reconnect: 3000,   // Client reconnects after 3 seconds
  },
});