How to trigger animation across all users

Would it be possible to have a database change, triggered by a user button click, that would initiate an animation for each connected user to see? I’m thinking of an applause button for a live stream video player, that could not only track applause clicks, but kick on a short animation on each user’s UI. Think FB or Periscope style.

This could potentially put a load on the server if you had enough people applauding I suppose.

Perhaps the question isn’t, Is it possible, but rather, Should it be attempted.

This should be really easy with a subscription. Each user subscribes to the number of applause clicks and watches that value (using an autorun, observer, Vue watcher or whatever React provides) to trigger the animation. Since many users will be subscribing to the same source, on the server each publication can share an observer so it should be efficient.

How many users across how many videos are you expecting at once? I doubt this subscription would put significant load on the server, compared to all the other user interactions.

Yes, it should be attempted. This type of interactivity is what makes Meteor awesome! Give it a go and report back…

Max viewing at once would be 50ish. We’re not looking at hundreds or thousands.

You will hardly notice any extra load on your server, give it a go. Ensure you are using some type of performance monitoring for some time before and after you push this update so you can see the effect it has. I recommend Monti APM, super easy to use and great value. (@zodern, I should be on commission :wink:)


Yeah this is relatively easy with Meteor. We do this a lot for connected devices at physical kiosk installs
I usually use collection.find().observeChanges() to trigger the animation

Yeah database updates will be fine for this.

If you do end up needing extra performance you can skip the database and send it directly over the websocket with a package like omega:custom-protocol

1 Like

Where exactly is the animation parked? Is it some json file animation that the db is holding and sends over? Curious.

Normally we just hard code it in the application code as a gsap timeline or as a css animation triggered with classes

Sometimes it’ll be a 3d model with animations, which get loaded as static files over http

Thanks. When I get around to starting this feature, I may bend your ear on some things, if you don’t mind.

Thanks to @wildhart too.