Python Forum - API auto-refresh on HTML page using Flask

I have been working on an app for a simple radio station app includes real-time updates for show and song information retrieved via API, and have been really stuck on getting the information to automatically update on the HTML page.

What I would like is for the HTML page to update song and show information when they change, according to data retrieved from the spinitron.com API.

I’ve been looking into websockets, which seems to provide the ability for my app to automatically send updates to the HTML page, but I guess I don’t fully understand how the app will know when to send updated information. Like what ‘event’ could trigger it?

How does the app ‘know’ when a song or show has been updated? Do I have to set it up to hit up the API every minute or so, or is there a better way to do it?

Here’s my application.py code:

app = Flask(__name__)

@app.route("/")
def index():


    #Get current show
    show-data = requests.get("https://spinitron.com/api/shows?access-token=my-api-key”)
    show = show-data.json()
    current = show[ "items" ]
    now = (current[0]["title"])
    
    #Get current song playing
    spins = requests.get("https://spinitron.com/api/spins?access-token=my-api-key")
    spin = spins.json()
    spinz = spin[ "items"]
    artist = spinz[0]["artist"]
    song = spinz[0]["song"]
    release = spinz[0]["release"]

    return render_template("index.html", now=now, spinz=spinz, artist=artist, song=song, release=release)

Here's the HTML:

Output:    <head>
        <title> Radio Station </title>
    </head>
    <body>
       <b>On-Air: </b>{{ now}}
       <br>
       <b>Now Playing:</b>{{song}} by {{artist}} from {{release}}
       <br>
    </body>
</html>

Any help would be greatly appreciated, thanks!

(Dec-21-2020, 03:06 PM)toc Wrote: [ -> ]How does the app ‘know’ when a song or show has been updated? Do I have to set it up to hit up the API every minute or so, or is there a better way to do it?

Websockets may be overkill for this,as a API dos not usually update so much that need a real time communication.
Here a couple of post you can look at.
So in link1 use APScheduler then just a tricks to reload page from client side.
link2 use Ajax from client side to get vaule from server in a schedule way.

(Dec-22-2020, 12:53 AM)snippsat Wrote: [ -> ]
(Dec-21-2020, 03:06 PM)toc Wrote: [ -> ]How does the app ‘know’ when a song or show has been updated? Do I have to set it up to hit up the API every minute or so, or is there a better way to do it?
Websockets may be overkill for this,as a API dos not usually update so much that need a real time communication.
Here a couple of post you can look at.
So in link1 use APScheduler then just a tricks to reload page from client side.
link2 use Ajax from client side to get vaule from server in a schedule way.

Thanks, I'll give both a look! One thing I can't do is refresh the entire HTML page. It's going to have streaming audio, so an entire refresh would restart the audio player. I need to keep the refreshing isolated to the show/song title info.