Skip to content
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

There's no way to send data after the client starts polling #3146

Open
elieobeid7 opened this issue Jan 24, 2025 · 1 comment
Open

There's no way to send data after the client starts polling #3146

elieobeid7 opened this issue Jan 24, 2025 · 1 comment

Comments

@elieobeid7
Copy link

elieobeid7 commented Jan 24, 2025

      <div
        hx-get="/messages"
        id="messages"
        hx-trigger="every 10s"
        hx-swap="innerHTML"
      >
        <div id="message"></div>
      </div>

Assume that you want to check the status of the file via polling, you're processing a file and it takes an hour to complete, so you want to know what's the current processing state. For that you need to send the filename to the backend and maybe the username and some other data.

You can only do

evt.detail.headers["file_name"] = file_name;

but the problem is, you can only manipulate the headers inside

document.body.addEventListener("htmx:configRequest")

And you don't have the file_name then, the file_name is only defined in

htmx.on("#uploadForm", "htmx:xhr:progress"..)

and maybe some other upload-related event.

The problem with the polling, is that it gets the initial configRequest details and keeps going, so the file_name is always undefined. As such there's no way to send data to a polling endpoint, and that's a very common usecase.

I'm using FastAPI for the backend. on local development machine, sometimes HTMX is able to resend the file_name via configRequest, but not on production behind Nginx, when behind NGINX reverse proxy, for some reason the header is always empty.

I propose, allowing changing the request header on HTMX:afterRequest and have any endpoint polling anything read that event listener before triggering a request to the backend.

Or giving us access to do polling via a javascript API and we'd implement some logic or do some event like TriggerPollingAfterSomeEvent that way we could do polling to hx-get="/messages/{file_name}" but we can't predict the name of the file_name on page load

File processing is just an example, any polling scenario requires some data sent from the frontend to the backend

@Telroshan
Copy link
Collaborator

Hey,

Disclaimer: I'm not super familiar with the polling feature, so I might be off the mark

The htmx:configRequest event documentation event lets you configure more than just the headers:

Details
detail.parameters - the parameters that will be submitted in the request
detail.unfilteredParameters - the parameters that were found before filtering by hx-params
detail.headers - the request headers
detail.elt - the element that triggered the request
detail.target - the target of the request
detail.verb - the HTTP verb in use

So, you should already be able to do something like what you describe at the end of your message where your want to change the URL ; htmx:configRequest lets you do that.
In my understanding, the every 10s trigger is simply going to fire a new htmx request every 10s, a new entirely separate request. So you can listen for htmx:configRequest for any of those and override its URL, params, headers.
If you want to handle the polling manually in JS btw, you should already be able to do so with for example a setInterval routine using the htmx's API's htmx.ajax method

when behind NGINX reverse proxy, for some reason the header is always empty

Now this looks like the real underlying issue you want to solve here imho. I don't know much about that specific case, but for example there is this nginx config property that by default will ignore any header with an underscore in its name, just like you have here with file_name.
Maybe you should try with a more standard syntax such as X-File-Name or whatever, or update your nginx configuration, and see how it goes?

Hope this helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants