Server-Sent Events alternative in Flask - Mini Project: Build & Apply

Server-Sent Events Alternative with Flask and Polling

📖 Scenario: You are building a simple web app that shows live updates from the server. Instead of using Server-Sent Events (SSE), you will use a polling method where the client asks the server for new data every few seconds.

🎯 Goal: Create a Flask app that stores messages in a list. The client will poll the server every 5 seconds to get the latest messages and display them on the page.

📋 What You'll Learn

Create a Flask app with a list called messages containing three initial messages.

Add a variable called poll_interval set to 5 seconds.

Write a Flask route /get_messages that returns the messages list as JSON.

Add a simple HTML page served at / that uses JavaScript to poll /get_messages every poll_interval seconds and display the messages.

💡 Why This Matters

🌍 Real World

Polling is a simple alternative to Server-Sent Events for live updates in web apps when SSE is not available or supported.

💼 Career

Understanding how to implement server-client communication with polling helps in building real-time features in web applications, a common task for web developers.

1

Create initial messages list

Create a list called messages with these exact strings: 'Hello', 'Welcome', and 'This is a polling demo'.

Flask

# Create the messages list with the specified strings
# Your code here

Need a hint?

Use square brackets to create a list and include the exact strings inside quotes.

2

Add polling interval variable

Add a variable called poll_interval and set it to 5 (seconds).

Flask

from flask import Flask, jsonify, render_template_string

messages = ['Hello', 'Welcome', 'This is a polling demo']
# Add poll_interval variable here
# Your code here

Need a hint?

Just create a variable named poll_interval and assign the number 5 to it.

3

Create Flask route to return messages as JSON

Create a Flask app instance called app. Then write a route @app.route('/get_messages') with a function get_messages() that returns the messages list as JSON using jsonify(messages=messages).

Flask

from flask import Flask, jsonify, render_template_string

messages = ['Hello', 'Welcome', 'This is a polling demo']
poll_interval = 5

# Create Flask app and /get_messages route
# Your code here

Need a hint?

Remember to import Flask and jsonify. Create the app with Flask(__name__). Use the decorator @app.route('/get_messages') and return the messages as JSON.

4

Add HTML page with polling JavaScript

Add a route @app.route('/') with a function index() that returns an HTML page using render_template_string. The page should have a <div id="messages"></div> to show messages. Add JavaScript that fetches /get_messages every poll_interval seconds, parses the JSON, and updates the messages div with each message inside a <p> tag.

Flask

from flask import Flask, jsonify, render_template_string

messages = ['Hello', 'Welcome', 'This is a polling demo']
poll_interval = 5

app = Flask(__name__)

@app.route('/get_messages')
def get_messages():
    return jsonify(messages=messages)

# Add the index route with HTML and polling JavaScript
# Your code here

Need a hint?

Use render_template_string to return the HTML. Use JavaScript fetch to get messages and setInterval to poll every poll_interval seconds. Update the messages div with paragraphs for each message.