Jump to content

Htmx, Sse and real time dom swap help.


3fingers
 Share

Recommended Posts

Hello all!
A client asked us to implement a landing page where some content would have to swap in real time when needed.
Basically I need to implement a way to select in the backend (via a select dropdown or whatever) which page I want to use as the "replacer", save and then immediately use its html content to swap the old content, in real-time, on the front-end.
I've read about htmx and its sse implementation, and also took a look at this simple example on how to dispach an event via php every second.
The front-end part looks way easier to implement, but the backend one it's over my knowledge at the time of this writing.

I know @netcarver did some test and also @kongondo is playing with those technology a bit lately.

This is the first time I came to such a request and I'm looking for some advice from you guys! :)

  • Like 2
Link to comment
Share on other sites

On 1/13/2022 at 9:13 PM, 3fingers said:

Basically I need to implement a way to select in the backend (via a select dropdown or whatever) which page I want to use as the "replacer", save and then immediately use its html content to swap the old content, in real-time, on the front-end.

Hi @3fingers

Right, so the demo video I posted did this using a few separate parts. An event generator wrote messages into a Redis pubsub channel, and I had a long-running ReactPHP process subscribed to the channel which would then take those events from Redis and send them via SSE to any connected listeners. A little custom JS in the website's home page would connect via SSE to the server and would be asynchronously invoked when an SSE message came in.  The JS was really simple, it parsed the incoming SSE message to grab an html id and the new content for that part of the DOM and then do the change (along with a little CSS styling to highlight the swap.)

The most difficult part was running the ReactPHP process.

In your case, you could replace the back end event generator with a hook and just publish a change when the PW admin control is changed. Anyone connected would then have their screen updated immediately. PM me if you want to discuss directly.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...