WebSocket events handling in Flask - Mini Project: Build & Apply

WebSocket Events Handling with Flask

📖 Scenario: You are building a simple chat server using Flask and WebSocket. Users will connect to the server, send messages, and receive messages from others in real-time.

🎯 Goal: Build a Flask app that handles WebSocket events: connection, message reception, and disconnection.

📋 What You'll Learn

Create a Flask app with Flask-SocketIO

Handle client connection event

Handle client message event

Handle client disconnection event

💡 Why This Matters

🌍 Real World

WebSocket event handling is essential for real-time web apps like chat apps, live notifications, and multiplayer games.

💼 Career

Understanding WebSocket events and Flask-SocketIO is valuable for backend developers working on interactive web applications.

1

Set up Flask app and SocketIO

Import Flask and SocketIO from flask_socketio. Create a Flask app called app and initialize SocketIO with app as socketio.

Flask

# Your code here

Hint

Use Flask(__name__) to create the app and pass it to SocketIO.

2

Add event handler for client connection

Use the @socketio.on('connect') decorator to create a function called handle_connect that runs when a client connects.

Flask

from flask import Flask
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)

# Your code here

Hint

Use @socketio.on('connect') above a function named handle_connect.

3

Add event handler for receiving messages

Use the @socketio.on('message') decorator to create a function called handle_message that takes a parameter msg and passes (does nothing) inside.

Flask

from flask import Flask
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)

@socketio.on('connect')
def handle_connect():
    pass

# Your code here

Hint

Use @socketio.on('message') and define handle_message(msg).

4

Add event handler for client disconnection

Use the @socketio.on('disconnect') decorator to create a function called handle_disconnect that runs when a client disconnects and passes inside.

Flask

from flask import Flask
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)

@socketio.on('connect')
def handle_connect():
    pass

@socketio.on('message')
def handle_message(msg):
    pass

# Your code here

Hint

Use @socketio.on('disconnect') and define handle_disconnect().

Practice

1. What does the decorator @socketio.on('message') do in a Flask app using WebSocket?

easy

A. It closes the WebSocket connection.

B. It sends a WebSocket message to all connected clients.

C. It listens for incoming WebSocket messages with the event name 'message'.

D. It initializes the Flask app.

Solution

1. Step 1: Understand the decorator role

   The @socketio.on('message') decorator registers a function to handle incoming WebSocket events named 'message'.

2. Step 2: Differentiate from other actions

   Sending messages or closing connections are done by other functions, not by this decorator.

3. Final Answer:

   It listens for incoming WebSocket messages with the event name 'message'. -> Option C

4. Quick Check:

   Decorator for event handling = C [OK]

Hint: Remember: @socketio.on listens, send() sends [OK]

Common Mistakes:

• Confusing event handler with sending messages
• Thinking it closes connections
• Assuming it initializes the app

2. Which of the following is the correct syntax to send a message back to the client inside a WebSocket event handler in Flask-SocketIO?

easy

A. socketio.send('Hello client!')

B. send('Hello client!')

C. emit('Hello client!')

D. socket.emit('Hello client!')

Solution

1. Step 1: Identify the correct function call

   In Flask-SocketIO, use the imported send() function inside handlers to reply to the sender client.

2. Step 2: Check syntax correctness

   A: send('Hello client!') correctly sends to sender. B: socketio.send() sends to all clients. C: emit('Hello client!') uses message as event name without data. D: socket undefined.

3. Final Answer:

   send('Hello client!') -> Option B

4. Quick Check:

   Use send() to reply to sender [OK]

Hint: send() replies to sender, socketio.send() to all [OK]

Common Mistakes:

• Using socketio.send() which sends to all clients
• Malformed emit() call without data
• Using undefined socket object

3. Given this Flask-SocketIO event handler code:

@socketio.on('chat')
def handle_chat(msg):
    print('Received:', msg)
    send('Echo: ' + msg)

What will be printed and sent if the client sends the message 'Hi'?

medium

A. Causes a runtime error because send() needs an event name.

B. Prints 'Echo: Hi' and sends 'Received: Hi' back to the client.

C. Prints nothing and sends 'Hi' back to the client.

D. Prints 'Received: Hi' and sends 'Echo: Hi' back to the client.

Solution

1. Step 1: Analyze the print statement

   The function prints 'Received: ' plus the message, so it prints 'Received: Hi'.

2. Step 2: Analyze the send() call

   The send() function sends the string 'Echo: ' plus the message back to the client, so it sends 'Echo: Hi'.

3. Final Answer:

   Prints 'Received: Hi' and sends 'Echo: Hi' back to the client. -> Option D

4. Quick Check:

   Print then send echo message = D [OK]

Hint: Print shows received, send echoes message [OK]

Common Mistakes:

• Mixing print output with sent message
• Assuming send() needs event name
• Confusing order of print and send

4. Identify the error in this Flask-SocketIO event handler:

@socketio.on('update')
def handle_update():
    data = request.json
    send(data)

medium

A. Using request.json inside WebSocket handler causes an error.

B. Missing event name in @socketio.on decorator.

C. send() cannot send JSON data.

D. Function must have a parameter to receive message data.

Solution

1. Step 1: Understand request context in WebSocket

   WebSocket handlers do not have HTTP request context, so request.json is not available and causes an error.

2. Step 2: Check other parts

   The decorator has event name, send() can send JSON, and function can have zero parameters if no message expected.

3. Final Answer:

   Using request.json inside WebSocket handler causes an error. -> Option A

4. Quick Check:

   request.json not available in WebSocket handlers [OK]

Hint: Don't use request.json in WebSocket handlers [OK]

Common Mistakes:

• Assuming HTTP request context exists in WebSocket
• Thinking send() can't send JSON
• Believing function must have parameters always

5. You want to broadcast a message to all connected clients except the sender in Flask-SocketIO. Which code snippet correctly does this inside an event handler?

hard

A. emit('broadcast', data, broadcast=true, include_self=false)

B. send(data, broadcast=true, include_self=true)

C. emit('broadcast', data, broadcast=true, include_self=true)

D. send(data, include_self=false)

Solution

1. Step 1: Understand broadcasting options

   To send to all except sender, use emit() with broadcast=true and include_self=false.

2. Step 2: Check each option

   B: send(data, broadcast=true, include_self=true) includes sender. C: emit('broadcast', data, broadcast=true, include_self=true) includes sender. D: send(data, include_self=false) lacks broadcast flag. A correctly excludes sender.

3. Final Answer:

   emit('broadcast', data, broadcast=true, include_self=false) -> Option A

4. Quick Check:

   Broadcast exclude sender = emit with include_self=false [OK]

Hint: Use emit with broadcast=true and include_self=false [OK]

Common Mistakes:

• Using send() incorrectly for targeted broadcast
• Setting include_self=true which includes sender
• Missing broadcast=true flag