Skip to content

SSE Ext #2225: reinstantiate EventSource listeners upon reconnection logic #2272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Telroshan merged 2 commits into from
Feb 25, 2024
+24 −14
Merged

SSE Ext #2225: reinstantiate EventSource listeners upon reconnection logic #2272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
adac7a8
fix(sse): reinstantiate EventSource listeners
vlad-tkachenko Feb 2, 2024
5792d3f
improve initialization logic of SSE on nested elements
Renerick Feb 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 22 additions & 13 deletions src/ext/sse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
// Try to create EventSources when elements are processed
case "htmx:afterProcessNode":
ensureEventSourceOnElement(evt.target);
registerSSE(evt.target);
}
}
});
Expand Down Expand Up @@ -112,19 +111,18 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
* @param {HTMLElement} elt
*/
function registerSSE(elt) {
// Find closest existing event source
var sourceElement = api.getClosestMatch(elt, hasEventSource);
if (sourceElement == null) {
// api.triggerErrorEvent(elt, "htmx:noSSESourceError")
return null; // no eventsource in parentage, orphaned element
}

// Set internalData and source
var internalData = api.getInternalData(sourceElement);
var source = internalData.sseEventSource;

// Add message handlers for every `sse-swap` attribute
queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function(child) {
queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function (child) {
// Find closest existing event source
var sourceElement = api.getClosestMatch(child, hasEventSource);
if (sourceElement == null) {
// api.triggerErrorEvent(elt, "htmx:noSSESourceError")
return null; // no eventsource in parentage, orphaned element
}

// Set internalData and source
var internalData = api.getInternalData(sourceElement);
var source = internalData.sseEventSource;

var sseSwapAttr = api.getAttributeValue(child, "sse-swap");
if (sseSwapAttr) {
Expand Down Expand Up @@ -163,6 +161,16 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions

// Add message handlers for every `hx-trigger="sse:*"` attribute
queryAttributeOnThisOrChildren(elt, "hx-trigger").forEach(function(child) {
// Find closest existing event source
var sourceElement = api.getClosestMatch(child, hasEventSource);
if (sourceElement == null) {
// api.triggerErrorEvent(elt, "htmx:noSSESourceError")
return null; // no eventsource in parentage, orphaned element
}

// Set internalData and source
var internalData = api.getInternalData(sourceElement);
var source = internalData.sseEventSource;

var sseEventName = api.getAttributeValue(child, "hx-trigger");
if (sseEventName == null) {
Expand Down Expand Up @@ -223,6 +231,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
ensureEventSource(child, sseURL, retryCount);
});

registerSSE(elt);
}

function ensureEventSource(elt, url, retryCount) {
Expand Down
3 changes: 2 additions & 1 deletion test/ext/sse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,8 @@ describe("sse extension", function() {
'<div id="d1" sse-connect="/event_stream" sse-swap="e1">div1</div>\n' +
'</div>\n'
)
this.eventSource.url = "/event_stream"
this.eventSource.sendEvent("e1", "Event 1")
byId("d1").innerText.should.equal("Event 1")
})

it('only adds sseEventSource to elements with sse-connect', function() {
Expand Down