I am looking for ideas on how to synchronize clients during animation. I am trying to create a browser based teleprompter using a meteorite. I have basic functionality, I can set the font size and scroll speed, but I did not find a reliable way to keep all clients in sync after scrolling.
So far I have tried two ways, both work, but none are perfect.
My first idea was to start an interval on a server that updates the collection with a position. This works decently on the local network, but as soon as I move to the Internet, the delay time between updates and updates observed on the client made the scroll stutter. Here's what this code looked like:
Server:
if(Meteor.isServer){ Meteor.methods({ start_scroll: function(){ interval = Meteor.setInterval(function() { var _speed = Prompter.findOne({_var:"prompter_speed"})._val; Prompter.update({_var:"prompter_y"}, {$inc:{_val:(-1*_speed/4)}}); }, 30); }, ... }
Customer:
if(Meteor.isClient){ Prompter.find({_var: "prompter_y"}).observe({ changed: function(pos){ $("#inner_scroll").css({top: pos._val}); } }); }
The main problem with the above version is that any latency when watching the update causes the animation to fade. So, I decided to do client-side animation. Here is what I came up with for this:
Server:
if(Meteor.isServer){ Meteor.methods({ start_move: function(){ Prompter.update({_var:"prompter_move"},{$set:{_val:1}}); }, ... }
Customer:
if(Meteor.isClient){ Prompter.find({_var: "prompter_move"}).observe({ changed: function(obj){ if(obj._val == 1){ interval = Meteor.setInterval(function(){ var cp = parseFloat($("#inner_scroll").css("top")); var sp = parseInt(Session.get("_speed")); var mv = cp + (-1 * sp)/4; $("#inner_scroll").css("top", mv); }, 30); } else{ Meteor.clearInterval(interval); } } }); }
The animation is very smooth on the client with this version, but (due to the delay in observing the "start" update), clients may not start at the same time and, therefore, are not synchronized. Another problem I noticed is that some slower clients (in terms of CPU performance) scroll slower with this version.
I scratch my head at this, any suggestions?