What am I trying to accomplish? On the client side I have a variety of divs that display a progress bar. Each of these progress bars are showing a different status/level. They are all updating dynamically. I need them to continue to dynamically update without any performance issues.
What performance issues are you talking about? My serverside is running some logic that is able to check the status of each of the progress bars running on the client side. Currently I have a setInterval set for a tenth of a second to continue to update the progress bars status level. First I did this by persisting the data directly to a mongo collection that I then had the client side use to update the templates by returning the status via template helpers. This is fine and worked (for the most part). However, when I added a modal box (also a reactive modal box) that would open ontop of the already running main body template with the dynamic progresses, it would begin to slow down dramatically. The modal box would also display a specific progress bar for the div that the user had clicked on.
Long story short the performance impact was dramatic and it would crawl. I figured this was due to the server needing to perform so many progress bar updates by persisting to the mongo database. It was just too much.
What did I try to resolve this?
I decided to try completely bypassing the persistance to the mongo database to store the status/levels of each of the progressbars. This was accomplished by implementing a package name rocketchat:streamer
This package provides "2 way communication over DDP". By doing this I was able to store the progress bar levels to local cached array on the server and then via the rocketchat:streamer would push the data over DDP directly to the client. This actually resulted in a performance increase.
Ok, so what is your issue now and why are you submitting this question?
Regardless, of both strategies I am still experencing performance issues and sometimes the syncing from the different connected devices logged into my development server are not getting the exact progress bar synced statuses. I need all of the progress bars to always show the same exact status for all connected users in the browser. I need the ability to show for example 9 different unique progress bars on the template and also when the user clicks on one of the unique divs that contians a progress bar to show another single progress bar within the modal.
Guys, what is the best way with Meteor to accomplish syncing multiple different progress bars on the client side by getting the data from the logic being performed on the server?
I am looking for a simple and easy way to implement this. I know there must be a simple way to have both performance and syncing with Meteor for this type of use-case.
Any help would be greatly appreciated.
Thank you to everyone in the community who offers to chime in.
This was solved by not including all of the old expired data from persisting thru the Meteor.publish....
The moral of the story, make sure you are not publishing extra data to your client that you don't need. By filtering the results using for example a find with a $nin and not including specific types of data you will see dramatic performance increases in your Meteor app. This can be also reviewed in more depth with other examples here: