search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
38.24k stars 1.3k forks source link

SSE Event type always "message"? #2351

Closed pintomau closed 8 months ago

pintomau commented 8 months ago

Hey.

Following the guide in https://htmx.org/extensions/server-sent-events/#receiving-named-events, I'm trying to send named events:


val eventBody = "event: Wololo\ndata: <div>Swapped</div>\n\n"

sseSubscriberRegistrar.sendMessage(userId, eventBody)

Tried multiple variants such as "\n\n" at the end and so on...

In the frontend part I have:

<div hx-ext="sse" sse-connect="/subscribe/123" sse-swap="Wololo"></div>

However, I always get the message type instead of the one properly defined and documented.

Can you please clarify what exactly is the expected format for specific message types?

Thank you.

Telroshan commented 8 months ago

Hey, looks like it should indeed work as you expect... Could you inspect the SSE request's event stream in your browser's developer tools (network tab)? Is everything normal in there, do you see events and data as they should look like?

pintomau commented 8 months ago

Hey @Telroshan , the following is captured:

image

And the captured object: image

using:


    <script>
        document.body.addEventListener('htmx:sseMessage', (evt) => {
            console.log(evt)
        })
    </script>

Here, I have to change swap="message" so that the sseMessage event is triggered.

Renerick commented 8 months ago

Please provide version information about htmx and sse.js, I'll take a look at it

This is how the test server constructs SSE message

https://github.com/bigskysoftware/htmx/blob/21cdfcf17c9e4e170a5843480548b79dc08d647e/test/ws-sse/server.mjs#L161

pintomau commented 8 months ago

Hi @Renerick . Using the latest (?) versions:


<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.min.js"></script>
    <script src="https://unpkg.com/htmx.org@1.9.10/dist/ext/sse.js"></script>
</head>
<body>
    <div hx-ext="sse" sse-connect="/sales/subscribe/ad728360-a21d-4e8d-ab59-703446c0d356" sse-swap="message"></div>
    <script>
        document.body.addEventListener('htmx:sseMessage', (evt) => {
            console.log(evt)
        })
    </script>
</body>
</html>
Renerick commented 8 months ago

Ok versions seem fine

I modified the test server to use your example

      const event = "event: Wololo\ndata: <div>Swapped</div>\n\n"

It works. Looking at the screenshot, it appears that you were debugging with Firefox. This is what I saw when trying the test server with code above in Firefox

image

Comparing to your screenshot, it looks like the data in your case is not processed correctly, your "Raw Data" view shows event: and data:, whereas in my case I only see HTML content from data.

I think the issue is on the backend. What library do you have for SSE? My suspicion is that the function you use encodes the string you provided as data instead of writing it to response as is. I also expect there to be a method (or method overload) that accepts event name as argument so you don't need to manually construct SSE string.

Probably looks something like 

sseSubscriberRegistrar.sendEvent(userId, "Wololo", eventBody)
pintomau commented 8 months ago

Indeed. I dug deeper, and it seems like it's how Spring's SSE Emitter works.

It forces data instead of treating as plain.

For those hitting the same issue, use SseEventBuilder as such:


emitter.send(SseEmitter.event().name("Wololo").data("<div>Swapped</div>"))

Thanks for the support.