SSE extension: Add the ability to send data to the endpoint before the connecction is being made similar to htmx:configRequest or htmx:wsConfigSend

[elieobeid7]

I have many users, each user has his own cookie identifier, I need to send to the SSE endpoint in order for the server to perform the right action, on the data belonging to the correct user.

In HTMX I can do this

document.body.addEventListener("htmx:configRequest", function (evt) {
    evt.detail.headers["cookie"] = cookie;
});

I can do the same via was extension via the htmx:wsConfigSend event, but in sse, there's no such events and I can't pass data via the headers, I'm forced to append the cookie to the sse URL via javascript and that's so dirty, like so

  <div
      class="container-fluid mt-5 mb-5"
      id="sse-container"
      hx-ext="sse"
      sse-connect=""
    ></div>
<script>
const sseContainer = document.getElementById("sse-container");
sseContainer.setAttribute(
  "sse-connect",
  "/progress/" + cookie
);
</script>

I would be great to be able to pass data via the headers and have more control like the standard htmx and websockets extension

[Telroshan]

Hey, about this specifix example, I'm unsure what your setup is, but your cookies should be naturally sent along the SSE connection request by your browser.

I don't see any reason to oppose to making the connection request configurable with an event though, so if you are interested, feel free to dive into that and submit a PR!

(Moved this to the extensions repo btw)

[XChikuX]

@Telroshan I'd love to help. Where do I start?

Essentially need to connect hx-vals to payload in sse.js (3rd party script) and allow POST.

Similar Issue: #139

[elieobeid7]

I read the source code, couldn't understand it because it's split into 2 repos, so I need to understand htmx first then sse, and it's not how I write js.

Didn't find any other extension that uses htmx:configRequest to follow the implementation. Will retry later

[Telroshan]

@XChikuX the EventSource is instantiated here in the extension:

htmx-extensions/src/sse/sse.js

Lines 76 to 78 in c387c0d

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

I'm thinking we could fire an event right before this call, like the extension already does at other places using htmx's triggerEvent method
This event could embed an object containing the URL + the options object parameter that gets passed to the EventSource constructor
Unfortunately not much can be configured here, but this could allow the user to modify the URL and include some additional URL parameters for example, or override the withCredentials value, which should already address this issue where OP wanted to add some dynamic data to the sse-connect URL

Hope this helps!