Feature Request: Allow SSE extension to use a user-defined EventSource object

[adonespitogo]

This will allow more control over the behavior of the SSE connection. For instance, I want to implement the fix for this firefox bug where I need to have access to the EventSource object for this to be implemented. This will also fix several issues:

• SSE extension: Add the ability to send data to the endpoint before the connecction is being made similar to htmx:configRequest or htmx:wsConfigSend #132
• feature request: trigger an SSE start with the hx-trigger #27

Another advantage is to be able to add event listeners outside of htmx context.

Also, the number of connections is limited to only 6 when not used in HTTP2, so it would be beneficial to reused an existing connection across multiple independent elements.

Warning: When not used over HTTP/2, SSE suffers from a limitation to the maximum number of open connections, which can be especially painful when opening multiple tabs, as the limit is per browser and is set to a very low number (6). The issue has been marked as "Won't fix" in Chrome and Firefox. This limit is per browser + domain, which means that you can open 6 SSE connections across all of the tabs to www.example1.com and another 6 SSE connections to www.example2.com (per Stack Overflow). When using HTTP/2, the maximum number of simultaneous HTTP streams is negotiated between the server and the client (defaults to 100).

[Telroshan]

Hey, it's not documented (documentation improvement PRs are always welcome btw!), but you should already be able to do it ;

• The extension creates an EventSource with a basic constructor call:
  

  htmx-extensions/src/sse/sse.js

  Lines 76 to 78 in 1b89491

  	function createEventSource(url) {
  	return new EventSource(url, { withCredentials: true })
  	}

• Though, it calls it through a public API here:
  

  htmx-extensions/src/sse/sse.js

  Lines 24 to 27 in 1b89491

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

So, you could already override htmx.createEventSource with a function of your own, you simply need to make sure that your code executes before the SSE extension initializes

Hope this helps!

[adonespitogo]

Hi, @Telroshan thank you for this. Although this works, I'd like to make a PR for this as this looks like a hack. I'd like to have something like:

function createEventSource() {
  return Promise.resolve(new EventSource("/sse-events"));
}

<div hx-ext="sse" sse-create="createEventSource" sse-swap="message">

Let me know if this is something that may get accepted.