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

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

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

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

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.

Practice

1. What is a common alternative to Server-Sent Events (SSE) for real-time communication in Flask applications?

easy

A. Static HTML pages

B. Regular HTTP GET requests

C. WebSockets using Flask-SocketIO

D. Email notifications

Solution

1. Step 1: Understand SSE purpose

   Server-Sent Events send updates one-way from server to browser for real-time data.

2. Step 2: Identify alternative for two-way communication

   WebSockets allow two-way real-time communication and Flask-SocketIO simplifies their use in Flask.

3. Final Answer:

   WebSockets using Flask-SocketIO -> Option C

4. Quick Check:

   Real-time two-way communication = WebSockets [OK]

Hint: WebSockets enable two-way real-time updates, unlike SSE [OK]

Common Mistakes:

• Confusing SSE with regular HTTP requests
• Thinking static pages can update in real-time
• Assuming email is real-time communication

2. Which of the following is the correct way to import Flask-SocketIO in a Flask app?

easy

A. from flask_socketio import SocketIO

B. import flask_socketio.SocketIO

C. from flask import SocketIO

D. import SocketIO from flask_socketio

Solution

1. Step 1: Recall correct import syntax in Python

   Python uses 'from module import class' to import specific classes.

2. Step 2: Match Flask-SocketIO import pattern

   The correct import is 'from flask_socketio import SocketIO' to get the SocketIO class.

3. Final Answer:

   from flask_socketio import SocketIO -> Option A

4. Quick Check:

   Correct Python import syntax = from flask_socketio import SocketIO [OK]

Hint: Use 'from module import class' for specific imports in Python [OK]

Common Mistakes:

• Using JavaScript import syntax in Python
• Importing SocketIO from flask instead of flask_socketio
• Incorrect module or class names

3. Given this Flask-SocketIO code snippet, what will the client receive when the server emits 'message' event?

from flask_socketio import SocketIO, emit

socketio = SocketIO(app)

@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Welcome!'})

medium

A. No message is sent on connect

B. A plain text message 'Welcome!'

C. An error because emit needs a string message

D. A JSON object with {'data': 'Welcome!'}

Solution

1. Step 1: Understand the emit function usage

   emit sends an event with a dictionary payload as JSON to the client.

2. Step 2: Analyze the event and data sent on connect

   On 'connect', the server emits 'message' event with {'data': 'Welcome!'} dictionary.

3. Final Answer:

   A JSON object with {'data': 'Welcome!'} -> Option D

4. Quick Check:

   emit sends JSON data = A JSON object with {'data': 'Welcome!'} [OK]

Hint: emit sends JSON-like dict, not plain text [OK]

Common Mistakes:

• Thinking emit sends plain text only
• Assuming emit requires string, not dict
• Believing no message is sent on connect

4. Identify the error in this Flask-SocketIO server code:

from flask_socketio import SocketIO

socketio = SocketIO(app)

@socketio.on('message')
def handle_message(data):
    print('Received:', data)

socketio.run(app)

medium

A. Function handle_message missing return statement

B. Missing import of Flask app

C. No event handler for 'connect'

D. Using socketio.run instead of app.run

Solution

1. Step 1: Check imports and app definition

   The code uses 'app' but does not import or define it anywhere.

2. Step 2: Confirm socketio.run usage

   socketio.run(app) is correct to run the app with SocketIO support.

3. Final Answer:

   Missing import of Flask app -> Option B

4. Quick Check:

   Undefined app variable = Missing import of Flask app [OK]

Hint: Always define or import Flask app before using it [OK]

Common Mistakes:

• Confusing socketio.run with app.run
• Thinking event handlers must return values
• Assuming 'connect' event handler is mandatory

5. You want to replace Server-Sent Events with Flask-SocketIO for a chat app. Which approach correctly handles broadcasting a message to all connected clients?

hard

A. Use socketio.emit('chat', message, broadcast=True) inside an event handler

B. Use emit('chat', message) without broadcast inside the handler

C. Use socketio.send(message) without event name

D. Use app.run() with broadcast=True parameter

Solution

1. Step 1: Understand broadcasting in Flask-SocketIO

   To send a message to all clients, use socketio.emit with broadcast=True.

2. Step 2: Evaluate options for broadcasting

   Use socketio.emit('chat', message, broadcast=True) inside an event handler correctly uses socketio.emit with event name and broadcast flag.

3. Final Answer:

   Use socketio.emit('chat', message, broadcast=True) inside an event handler -> Option A

4. Quick Check:

   Broadcast all clients = socketio.emit with broadcast=True [OK]

Hint: Broadcast with socketio.emit and broadcast=True [OK]

Common Mistakes:

• Omitting broadcast=True to send to all clients
• Using emit without socketio object for broadcast
• Trying to broadcast via app.run parameters