SSE Extension: The examples given in the documentation does not work

[elieobeid7]

The examples given in the documentation does not work

Example

Multiple events in different elements (from the same source).
<div hx-ext="sse" sse-connect="/server-url">
    <div sse-swap="event1"></div>
    <div sse-swap="event2"></div>
</div>

---

Real world code that does not work, nothing gets swapped

html

    <div
      class="container-fluid mt-5 mb-5"
      id="sse-container"
      hx-ext="sse"
      sse-connect="url"
    >
    <div class="col-md-9" id="player-section" sse-swap="player"></div>
    <div class="row" id="editor" sse-swap="editor"></div>
    </div>

Python, fastapi

     yield {
                "event": "editor",
                "data": html_data,  # HTML representation
            }
            yield {
                "event": "player",
                "data": video_player,  # HTML representation
            }

---

The following works fine

HTML

    <div
      class="container-fluid mt-5 mb-5"
      id="sse-container"
      hx-ext="sse"
      sse-connect="url"
    >
    <div class="col-md-9" id="player-section" hx-sse="swap:#player"></div>
    <div class="row" id="editor" hx-sse="swap:#editor"></div>
    </div>

Python, FastApi

    yield {
                "event": "#editor",
                "retry": 5000,  # miliseconds
                "data": html_data,  # HTML representation
            }
            yield {
                "event": "#player",
                "retry": 5000,  # miliseconds
                "data": video_player,  # HTML representation
            }

---

Note regarding FastAPI

I'm using

from sse_starlette.sse import EventSourceResponse
async def run(request: Request):
    return EventSourceResponse(
        someEvent(
            request,
        )
    )

async def someEvent(
    request: Request,
):

    while True:
        if await request.is_disconnected():
            break
        yield {
            "event": "#editor",
            "retry": 5000,  # miliseconds
            "data": html_data,  # HTML representation
        }
        yield {
            "event": "#player",
            "retry": 5000,  # miliseconds
            "data": video_player,  # HTML representation
        }

I couldn't get FastAPI built in library to work, I mean this

from fastapi.responses import StreamingResponse

HTMX would always throw errors if I use that one, about the response not being text or whatnot, forgot the error, it's been about 3 weeks when I tried it.

[Telroshan]

Hey, what version of htmx are you using ?

I'm asking as you use the legacy hx-sse as a working fallback in one of your examples above, an attribute that was completely removed in htmx 2, and the extensions of this repo work for htmx 2, not htmx 1 as we changed some internal APIs in that major release.

So the issue could simply be that you are using htmx 1 here, let me know!
Hope this helps

[XChikuX]

@Telroshan I am using htmx 2.0 extension (as well as htmx 2.0) from cloudflare CDN and facing the same issue

@elieobeid7 Try starlette's SSE library instead of returning EventSource from fastapi

[elieobeid7]

@Telroshan I'm using

  <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js"
      integrity_no="sha256-0VEHzH8ECp6DsbZhdv2SetQLXgJVgToD+Mz+7UbuQrA="
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/[email protected]/sse.js"></script>

@XChikuX I'm already using starlette's SSE library instead, yes, already done that, because as I stated the fastapi eventsource library won't work with HTMX, HTMX would complain about text encoding or something, forgot the error.

[XChikuX]

This should be version 2:

[email protected]

[elieobeid7]

Ok well noted will update but it seems that the issue still exists

[XChikuX]

Yup. Docs are wrong

[elieobeid7]

Also @Telroshan please whenever possible upload the latest HTMX on JSDeliver, this is the latest version now on there

https://www.jsdelivr.com/package/npm/htmx.org

[XChikuX]

It's there. at 2.0.4

They don't update latest for backward compatibility.

[elieobeid7]

Aha Thanks for pointing this out

[elieobeid7]

@XChikuX if hx-sse is removed as Telroshan said and if the docs are incorrect, how do you make htmx 2 work in your code? Just asking to see if I should switch to htmx 2 or keep using htmx 1 until the docs are fixed.

[Telroshan]

Hey, well it's weird because we have an exact test case for this example, see our test suite that tests the following setup:

<div hx-ext="sse" sse-connect="/event_stream">
    <div id="d1" sse-swap="e1"></div>
    <div id="d2" sse-swap="e2"></div>
</div>

Names differ but the setup looks identical, and works. There might be something wrong in your configuration, or your server might be handling SSE incorrectly.
Could you setup a reproduction repository so we can reproduce & look into the issue?