The Problem

So I had a project recently in which there were two components: the "app", and the "big screen". Users take their photo with the app, apply some fun effects, and then send it to the big screen for the world to see! These "big screens" are always on.

The "app" was being developed by another developer externally. They would be passing data to me to display on the big screen via a custom API. The screen itself was a super simple microsite which rotated through several images until it was interrupted by some user generated content passed to me from the app.

The catch however was that there were multiple locations where these apps and screens could be installed. Wherever a photo was uploaded, it should appear on every screen. So if someone in Singapore took a photo, it would appear on the big screen in London and Singapore.

Basic user journey

1. User takes photo using app.
2. User adds some fun effects.
3. User sends the photo to the big screen.
4. Big screens all around the world display the photo.
5. Photo then gets scheduled for deletion.

My Solution

Initially I used just an AJAX call to get the next photograph stored in the database, then set it to "used" so it didn't appear again. However this meant that if Screen A grabbed it before Screen B, Screen B would never see it. Not ideal if the user is waiting in front of Screen B to see themselves!

So I went down a server-side CRON route. Every 10 seconds, my CRON would run and set the status of any current image from 2, to 1; and set any unused image to 2. Below is the CRON script I used to run a command every 10 seconds.

for i in {1..5}; do curl --silent "https://***/api/prep" &>/dev/null; sleep 10; done

My table in my database looked like this:

0 represents an image which hasn't been used yet, and is in essence queued.
1 represents an image which has been used / shown on the big screen.
2 represents the current image to be shown on the screen.

My AJAX call would get the next image where status = 2 and display it.

This works mostly; however there is a tiny chance of the image not appearing on a screen. My CRON runs every 10 seconds. My Javascript AJAX call runs every 10.15 seconds. There's the tiny possibility that an image a user takes does not appear on the screen they're looking at.

How would you have solved this problem?

Very interested to hear how other developers may have tackled this problem! The solution I've presented above is a PHP based solution, with some AJAX/JS thrown in.

I should add this project launched successfully. I'm just looking to open a discussion to discover what other technologies/methods could be used to complete this job.