SSE close connection in window.beforeunload

[jonfriesen]

👋 hello,

I'm in the process of integrating htmx into a traditional SSR site (go templates). I have a number of endpoints /process/{id} on which an SSE connection is made by htmx.

When navigating away from these pages, the SSE connection is not closed so if the user navigates to more than 6 pages that start an SSE in quick succession they get a long load time while waiting for one of the abandoned SSE connections to timeout.

Is there a way to use the beforeunload window event to close the connection?

Thanks!

[jonfriesen]

I managed to resolve this myself with an addition to sse.js.

I added this function near the helpers.

function closeAllSSEConnections() {
  document.querySelectorAll('[sse-connect], [hx-sse]').forEach(function(elt) {
      var internalData = api.getInternalData(elt);
      if (internalData && internalData.sseEventSource) {
          internalData.sseEventSource.close();
      }
  });
}

And then attach it to the window on init

init: function(apiRef) {
	// store a reference to the internal API.
	api = apiRef;

	// set a function in the public API for creating new EventSource objects
	if (htmx.createEventSource == undefined) {
		htmx.createEventSource = createEventSource;
	}

	// (NEW) register the beforeunload event
	window.addEventListener('beforeunload', closeAllSSEConnections);
},

This correctly iterates over the SSE connections and closes them when navigating away from the window. IMO this should probably be a default with an argument to disable closing on beforeunload events.

Hope this helps anyone else out there!

[srid]

I confirm that this fixes it for me as well. I opened a draft PR with a similar change: bigskysoftware/htmx-extensions#147

[Hamzali]

I had the exact same issue using SSE with HTMX however there is even simpler solution just enable hx-boost for the body and the hx-sse connections will be managed automatically.

[SellJamHere]

Adding in another solution. I need to do cleanup on the server side when the user leaves the page, and I want to recognize it by the connection closing. Chrome holds the connection open when navigating (but not when refreshing, oddly). I keep track of the SSE connections and close them on beforeunload.

<script type="text/javascript">
  // Store event sources so they can be closed when the page is unloaded
  var eventSources = [];
  
  htmx.onLoad(function() {
	  document.body.addEventListener('htmx:sseError', function (e) {
		  console.log('sse error', e);
	  });
  
	  document.body.addEventListener('htmx:sseOpen', function (e) {
		  for (var eventSource of eventSources) {
			  if (eventSource === e.detail.source) {
				  return;
			  }
		  }
		  
		  console.log('sse open', e.detail.source.readyState, e.detail.source.url);
		  eventSources.push(e.detail.source);
	  });
  });
  
  window.addEventListener('beforeunload', function(event) {
	  for (var eventSource of eventSources) {
		  console.log('closing event source', eventSource.readyState, eventSource.url);
		  eventSource.close();
	  }
  });
</script>