Synchronize Front End Event Across Multiple Clients/Browsers

[melbournemarsden]

I am looking for ideas on how best to execute this.

We are doing a live lottery system for a client. There will be a YouTube Live stream, a chat box, etc, and an estimated 200 or so people watching.

When a name is drawn, I want everyone’s client to update at more or less the same time, with a flashy and satisfying animation (courtesy of Lottie). I also want it to be as light as possible (on the server) because again, there will possibly be 200 or so people on at the same time. We’ve had about 200 people on a Bubble site at the same time in the past but never doing something as interactive as this.

The method I’m considering:

“Do when condition is true” that looks for a new item being appended to the end of a list, relative to either when the page was first loaded or when the previous item was drawn.

When it detects this, it will temporarily hide the last item of the “winners” RG so as not to spoil the winner before the animation plays, then play the animation, then reveal the winner and unhide the last item of the RG.

Any ideas to make this better?

Thanks!

[atomicfusion]

That seems to be the way to go.
I would optimize it by making sure the condition is simple and refers to easily accessible ‘things’ on the page.

In my experience having a complex ‘Do When’ action can be a little iffy, but in case I keep it simple and refer to something like the Current User or Current Page’s thing, it’s way more effective.

[melbournemarsden]

It worked rather nicely as I described it in the original post. We had about 100-200 people watching and were able to keep it operating smoothly with I believe 7 server units?

One amusing (read: sad and terrifying) thing is that with Bubble’s upcoming pricing changes, the event would have cost close to $600 as it resulted in 5 million work units more than usual for that day.