Add `hx-swap` support to `hx-ext="sse"`

[rajasimon]

Hi there, I've testing sse extension in my project and it's working as expected for swapping the content. However, I want to add new message below like chat message. And when I tried hx-swap with hx-target but that also seems to update the target instead of appending it.

<div hx-ext="sse" sse-connect="/search/{{ query.id }}/" sse-swap="message" hx-target="#result" hx-swap="beforeEnd">
  Hang tight we are fetching your results.
  <div id="result"></div>
</div>

I need the end result should be like append into each box.

<div hx-ext="sse" sse-connect="/search/{{ query.id }}/" sse-swap="message" hx-target="#result" hx-swap="beforeEnd">
  Hang tight we are fetching your results.
  <div id="result">
    <div class="box></div>
    <div class="box></div>
    <div class="box></div>
    <!--  As soon as new message arrives this result get appended.-->
  </div>
</div>

Let me know if this possible with sse or any alternatives thanks.

[ocharles]

I think this would also solve #784

[benpate]

Yes. Agreed. Without duplicating a whole lot of code, this would require that html publish a workable swap() method for external scripts to use. So this depends on #255

[delijati]

any progress ?

[tdb-alcorn]

+1! I have exactly the same use case. Perhaps using htmx for a chat app is not in scope, but it feels like this would be a reasonable new application of existing htmx concepts.

[benpate]

I've gotten htmx to work for for a chat app, but it takes some extra tinkering. The easiest thing for me to do is was to use the SSE as a hx-trigger to load additional items whenever they were posted to the server. It's an extra round-trip, but it made my server logic a lot easier.

To add a little more info to this issue, we specifically need access to the internal swap() function that I mentioned above. I'm still holding out hope that we can get this included in the htmx 2.0 design. This would solve outstanding issues with A LOT of extensions.

[thallada]

Also, in case it is not obvious (it was not to me!) htmx has support for appending SSE message content in the built-in SSE functionality (hx-sse attribute docs). To do that I did:

<div hx-sse="connect:/stream swap:message" hx-swap="beforeend"></div>

That will directly append the SSE message content to the inner div as messages are streamed in. No additional round-trip required.

I wasn't able to figure out a way to achieve the same functionality in the new SSE extension. Hopefully that's figured out before the 2.0 release!

[wimdeblauwe]

That is weird. I am using the SSE extension and this works fine for me using hx-swap="beforeend". I am using htmx 1.9.6.

[tawfiqkhalilieh]

using htmx2 fixed this issue for me, make sure to not use integrity for sse, it didn't work for some reason

<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js" integrity="sha384-ZBXiYtYQ6hJ2Y0ZNoYuI+Nq5MqWBr+chMrS/RkXpNzQCApHEhOt2aY8EJgqwHLkJ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx-ext-sse@2.2.2"></script>