Little question about reactivity, and introudcing myself

help
1

Hi Guys! First time on forums, i used to play witth meteor on version 1.1, but well nowadays im trying 1.4 and ReactJS and i have a little question or a trouble, and not sure how to do this…

Maybe someone of you can help me a bit, the thing is, im developing a simple Timer / Countdown clock, and all works good, but the thing is, it works only when i open the browser, when the client look at it, if i change the tab, the timmer it stops, and resumes when i click the localhost:3000 tab again.

I will like to make that timmer visible for everyone at the same time, each second, make it available in all browsers at the same time, inclusive if the brwoser is close.

How can i do this? Not sure if i explained it all, cuz well im just a bit newbie as u can notice, hope someone can help me a bit or give me an idea about how can i do this.

Thanks!

2

By timer do you mean clock, countdown clock, # of seconds since X event/date, or something else ? In these cases it’s only a matter of sending the initial date/value to the client when the page loads and then updating the state with setInterval after that.

1 Like
3

Hello manuel, or hola if u are spanish. Im spanish too. Yeah im developing a simple timer / countdown clock, and i need to figure out how to do it, when i leave the tab, make the clock still running.

Couse i notice when i leave the tab the clock just stops, and i will like to make it running for everyone.

I mean if another user opens the main page, see the timmer counting down.

I tryed to use react.state, but i think that’s just for client, not sure how can i make it global.

Can you help me a bit with this? Thanks for the reply

4

Hola a ti tambien! =)

You don’t need to make a global object (as in system-global). So, on the server you have the final date (make it UTC to make your life easier). Just send that date to the client and on the clock component use a setInterval to update the time:

When the component is loaded/created:

function updateTimeRemaining() { 
  // set state property to (finalTimeFromServer - currentTimeInUTC)
}
const interval = setInterval(updateTimeRemaining, 1000)

// Use property with time remaining

On destroyed:

clearInterval(interval);
1 Like
5

Gracias manuel!

I will try to take a look, thanks for ur time and the replys! =)

1 Like
6

I can confirm this is an issue with Meteor, you’ll need to do some research.

I’ve fixed it on my app.

7

Hello SkyRooms, what’s the issue with meteor exactly?

8

There is no issue with Meteor here. As @manuel has said, if you limit the server’s action to sending the required end time to the client, the client can then perform the countdown. The counter will run whether or not the tab is in focus.

As far as client/server interaction is concerned (like pub/sub or method calls) , there is a possibility (but no evidence yet) that Chrome will throttle websocket activity on out-of-focus tabs, which may be what @SkyRooms is referring to.

1 Like
9

Thanks for the reply @robfallows i still looking for how to do it, i found some packages on atmospehere js, maybe that can help me with this task.