Problem/Motivation

Because we are already storing the data state in server side only (browser side is stateless) and our State Maanger ahs already proved its robustness when we edit same data from multiple users, we will be able to activate real-time collaboration once those 2 issues are done:

Proposed resolution

Everytime an user is updating the data state, a SSE event is sent to other users editing the same display.

It would be nice to show in the toolbar the ID of other connected users.

Out of scope

We don't show the cursor of the other users on the screen like Figma is doing. Let's keep it simple and light, leveraging what HTMX is providing and not much more.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

pdureau created an issue. See original summary.

pdureau’s picture

pdureau’s picture

It would be nice to show in the toolbar the ID of other connected users.

Will be done in #3535989: Add an ActiveUsers island

pdureau’s picture

Issue summary: View changes
pdureau’s picture

Assigned: Unassigned » pdureau
Issue tags: -display_builder-1.0.0-beta +display_builder-1.0.0-alpha4

HTMX seems ready:

afaik the PR was actually not needed, I did some more testing and hx-swap-oob seems to work properly with hx-sse (using htmx 2.0.2 and htmx-ext-sse 2.2.2)

https://github.com/bigskysoftware/htmx-extensions/pull/94

Symfony has a nice API for this: https://symfony.com/blog/new-in-symfony-7-3-simpler-server-event-streaming

Le's do it

pdureau’s picture

Assigned: pdureau » Unassigned
Status: Active » Needs work

started by Pierre. Who want to continue?

grimreaper’s picture

Assigned: Unassigned » grimreaper
pdureau’s picture

Careful:

One thing to note about the HTMX SSE extension that I spent a full day troubleshooting is it doesn't handle multiline strings very well. This becomes a problem when the fragment you want to swap in has multiline hyperscript. I usually have to move it to the parent or convert to single line.

https://www.reddit.com/r/htmx/comments/1mjhzl1/gohtmx_server_sent_events...

grimreaper’s picture

Title: Add real-time collaboration » Add real-time collaboration
grimreaper’s picture

I am checking why the lib is loaded twice on pages.

In the meantime there are questions in the MR.

grimreaper’s picture

Assigned: grimreaper » Unassigned
Status: Needs work » Needs review

I found how to update to latest SSE extension version. But still 2 calls to the SSE endpoint.

Maybe a bug in the extension. I have not found related stuff in https://github.com/bigskysoftware/htmx-extensions/issues

grimreaper’s picture

Assigned: Unassigned » grimreaper
Status: Needs review » Needs work
grimreaper’s picture

The MR also fix 2 bugs: one in history panel and the other in active users panels.

grimreaper’s picture

Assigned: grimreaper » Unassigned
Status: Needs work » Needs review
pdureau’s picture

Assigned: Unassigned » mogtofu33
pdureau’s picture

For information, we have some moment where drag and/or drops from and/or to the root dropzone are not synched properly. After investigation, it seems this may not be related to this change.

However, by pushing the limit of the display builder events management, this change may help us to find already existing issues.

pdureau’s picture

pdureau’s picture

Assigned: mogtofu33 » pdureau
Status: Needs review » Needs work

Something else to check before review

pdureau’s picture

Assigned: pdureau » Unassigned

I need to talk with Grimreaper about 2 subjects:

  • on my tests, sync works only from one user to the other one. Even when the second one init the builder.
  • also, the HTTP endpoitn is disconnected and the request is resent at every cycle, instead of keeping a loooong connection. We may lose events because of that. It may be because of the return statemenst
grimreaper’s picture

Assigned: Unassigned » grimreaper

As discussed, point 1 is OK.

I will check point 2 tomorrow.

grimreaper’s picture

Assigned: grimreaper » Unassigned
Status: Needs work » Needs review
pdureau’s picture

Assigned: Unassigned » mogtofu33
pdureau’s picture

Assigned: mogtofu33 » pdureau
Status: Needs review » Needs work

I do some of the threads

pdureau’s picture

Assigned: pdureau » mogtofu33
Status: Needs work » Needs review

Resolved some MR threads.

Only 2 left: https://git.drupalcode.org/project/display_builder/-/merge_requests/46/d...

  • htmx_sse_local VS htmx_sse_cdn
  • dependencies must be in /libraries for tests, so should be in .gitlab-ci.yml playwright test script.
pdureau’s picture

mogtofu33 made their first commit to this issue’s fork.

mogtofu33’s picture

Assigned: mogtofu33 » Unassigned
Status: Needs review » Fixed

Nice work, looking great.
There is the follow up with 2 sse connection to fix.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.