-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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.
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
Removing DOM element using SSE does not close the SSE connection #2510
Comments
Could you please explain your reasons for wanting to close the sse connection and open another? It would help us to help you achieve your goal. Also, 6 connections is only for http1.1. If you use http 2 or 3, which are supported by essentially all people's browsers, then this is a non-issue. Anyway, you should be able to use the maybeCloseEventSource function in your own function or event listener. Or, I'm pretty sure there's a way within htmx to trigger a function upon events. Line 276 in b176784
|
The page is designed so that as the user selects different inputs, the SSE div needs to be updated to use a different query parameter. There's too much incoming data to filter it only by the SSE message, so re-connecting with different parameters is used instead to filter and reduce the number of messages.
This is an application that can be run over localhost, so unfortunately only http/1.1 is used. Afaik you could technically use http/2 over localhost, but I don't think asking users to install a TLS cert for localhost is reasonable. This isn't a fault of htmx, but I'm just trying to mitigate the pain points as much as possible by trying to keep the number of SSE connections low. Initially I thought removing the existing element would be an easy way to do this. Aside from that, it may be unintuitive to developers if deleting the dom element causes the connection to stay open. Does this mean the connection stays open until the page refreshes? If this is the intended behaviour, maybe it would be helpful to document.
Thanks, I'll look into that! |
I have another (probably better) reason now for wanting to close the sse connection. I have a panel (a div) which shows details of an item that's selected by a radio input. When the user selects a different radio input, the panel's contents are swapped out with a different sse connection to provide details for the selected item. This works fine, but the panel is also used for other things, where the panel's contents are overwritten with non-htmx/sse-related content. As the user selects the radio inputs and performs other actions which replace the panel's contents, the browser builds up a large number of unnecessary sse connections and leads to a lot of unnecessary data usage for the user. |
It might be worth considering whether your backend architecture is appropriate. It seems to me that you should be able to have 1 sse connection and then the backend just sends whatever is necessary through it, depending on what ajax requests it has received. |
There's too much data to send through a single sse connection for all items. It would use too much of the user's bandwidth, especially when server frameworks like axum+tower don't support compressed sse streams. It might make sense to use just javascript instead of htmx for this use case, or just poll instead of using sse. I see that the sse extension seems to listen for Lines 31 to 50 in b176784
The documentation says:
It sounds to me like |
The following patch properly cleans up a node when diff --git a/dist/htmx.js b/dist/htmx.js
index 597c9b3b..55244a01 100644
--- a/dist/htmx.js
+++ b/dist/htmx.js
@@ -549,6 +549,7 @@ return (function () {
elt = null;
}, delay);
} else {
+ cleanUpElement(elt);
elt.parentElement.removeChild(elt);
}
} Here's the original function since the diff leaves out a lot of context: Lines 544 to 554 in b176784
Would the project be open to a PR with this change? Is there a reason it wasn't done this way originally? |
Might as well submit that as a PR and see what they say! |
Yes please I also have this issue, in my scenario I have different elements listening to uploading status through sse, and once uploading is completed, I want to remove the element and close the connection |
In the following example, I'm trying to delete
#foo
so that the SSE connection will close.If I delete the div in developer tools (Chromium 121.0.6167.184) or using
document.getElementById("panel").innerHTML=''
, the SSE connection stays open and never seems to close.I'm using htmx 1.9.12.
What I'm actually trying to do is replace
#foo
with another SSE connection. But since browsers are limited to ~6 open connections at a time, I'm trying to close the existing connection before replacing it, so something like this:In this case the contents of
#panel
are cleared, but the browser developer tools show that the SSE connection is still open. This sometimes prevents the GET request to/bar
if there are too many existing open connections, since the SSE connection hasn't closed.The text was updated successfully, but these errors were encountered: