SSE

Frontend half of SSE (there is also backend part)

Properties: SSE Frontend Pieces

HTMX SSE extension in base.html: <script src="{% static 'js/htmx.sse.js' %}" defer></script>

Template:

<div hx-ext="sse" sse-connect="{% url 'my_app:book_updates' %}">
  <div>
    <span sse-swap="message">Waiting for server...</span>
  </div>
</div>

Properties: SSE Use Cases

Real-time table (hx-trigger="sse:<message-name>")
Status indicator (sse-swap)

Definition: `sse-swap`

Put the sse result text into the tag.

Definition: `hx-trigger="sse:<message-name>"`

Trigger tag’s request whenever new sse result appears.

Workflow: How to add SSE to UI?

Determine if type of sse is sse-swap or hx-trigger="sse:<>".
- sse-swap
  1. Make sure view returns correct text.
  2. Put it on element and have it swapped
- hx-trigger="sse:<>"
  1. Make sure you got hx-get or similar on that tag
  2. Add the trigger to the element: hx-trigger=”sse:your-message-name”.
  3. Ensure the backend sends an event with the matching name.