DEV Community

Allison Seboldt
Allison Seboldt

Posted on

Sports draft app: How to consistently broadcast timer to multiple clients?

When creating my fantasy sports spinoff, Fantasy Congress, I thought it was important to offer a live draft. I implemented this, but it needs to be improved upon.

One of the biggest problems I am having is broadcasting a consistent count down timer to all of the clients. Each person has one minute during their turn of the draft to make a pick. All of the connected clients need to know how much time is remaining for each turn.

The current app uses websockets (via socket.io). Every second an update to the timer is broadcasted to all the connected clients. However, sometimes the timer might pause and then suddenly jump 10 seconds ahead of where it was. My assumption is that this happens when someone has a slow connection.

I was considering running individual timers in each browser to avoid this jumping around. But turn changes will still have to be communicated somehow. Assuming the best way to do this would still be via websocket, some might receive the turn change before others. This means they might think it's still their turn when it's not, or that it was someone else's turn when in reality it is 5 seconds into their turn.

How would you tackle something like this?

Top comments (6)

Collapse
 
bgadrian profile image
Adrian B.G.

Welcome to the distributed systems and time hell!

You may want to check how real-time multiplayer games solve these problems, there are more approaches. You already have a start (the server is the source of truth) now you just need to sync the clients.

One issue may be if you use JS timers/timeouts, if the tab doesn't have the focus the ticks will be in slow mode. You can use workers (I think) and read the local time to improve the accuracy.

One way would be a mix between server signals, server time and user local time.

If you know in advance at what time a specific players turn can begin (even 1 minute should work) you can send it beforehand, and his client can begin its phase based on its local timer.

Even if the connection is slow its PC time should work ok and the player should see that is his turn. If the command arrives at the server and is not its actual turn ofc the server will reject it.

Bottom line 1 minute could be a too small time window if the users/game is casual, or 1 second sync times too big.

Collapse
 
allison_seboldt profile image
Allison Seboldt

Interesting idea using the PC time. I was thinking I need to adopt some multiplayer game techniques but I don't know the first thing about video game development. Will look into it.

Collapse
 
bgadrian profile image
Adrian B.G.

I stumbled upon a video that treat all 3 subjects and I remembered this topic:

youtu.be/GX4595KeZyc

Collapse
 
cjbrooks12 profile image
Casey Brooks

Maybe Firebase Realtime Database would be of use here. I haven't used it a ton, but in my experience the realtime updates are really quick. This thread says its updates are around 100ms latency, which should be more than enough to broadcast time changes every second.

Collapse
 
allison_seboldt profile image
Allison Seboldt

Omg if that is true this would be perfect. Will look into it ๐Ÿ‘

Collapse
 
bgadrian profile image
Adrian B.G.

Firebase will do the trick, just a reminder to calculate your payment prediction for a year or so, I heard some horror stories about it.