WebSocket events handling in Flask - Step-by-Step Execution

Concept Flow - WebSocket events handling

Client connects

↓

Server accepts connection

↓

Client sends message

↓

Server receives message event

↓

Server processes message

↓

Server sends response event

↓

Client receives response

↓

Client or Server disconnects

↓

Connection closed

This flow shows how a WebSocket connection is established, messages are sent and received as events, and how the connection closes.

Execution Sample

Flask

from flask import Flask
from flask_socketio import SocketIO, send

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

@socketio.on('message')
def handle_message(msg):
    send(f'Received: {msg}')

This code sets up a Flask app with SocketIO to handle incoming 'message' events and send back a response.

Execution Table

Step	Event Trigger	Server State Before	Action Taken	Server State After	Client Receives
1	Client connects	No connection	Accept connection	Connection open	Connection acknowledged
2	Client sends 'Hello'	Connection open	handle_message called with 'Hello'	Processed message 'Hello'	Received: Hello
3	Client sends 'How are you?'	Connection open	handle_message called with 'How are you?'	Processed message 'How are you?'	Received: How are you?
4	Client disconnects	Connection open	Close connection	Connection closed	Connection closed
5	No more events	Connection closed	No action	No connection	No message

💡 Connection closed by client, no further events processed

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
connection_status	No connection	Open	Open	Open	Closed	Closed
last_message	None	None	'Hello'	'How are you?'	'How are you?'	'How are you?'
response_sent	None	None	'Received: Hello'	'Received: How are you?'	None	None

Key Moments - 2 Insights

Why does the server respond only after receiving a 'message' event?

Because the server's handler is set to listen for 'message' events specifically, as shown in execution_table rows 2 and 3 where 'handle_message' runs only when a message arrives.

What happens if the client disconnects unexpectedly?

The server detects the disconnect event (row 4), closes the connection, and stops processing further events, as shown by the 'Connection closed' state.

Visual Quiz - 3 Questions

Look at the execution table, what is the 'connection_status' after step 2?

A No connection

B Open

C Closed

D Unknown

💡 Hint

Check variable_tracker row for 'connection_status' after Step 2

At which step does the server send the response 'Received: How are you?'?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at execution_table 'Client Receives' column for the message 'Received: How are you?'

If the client never disconnects, which step would be missing from the execution table?

A Step 4

B Step 3

C Step 1

D Step 5

💡 Hint

Step 4 shows client disconnecting, check execution_table rows

Concept Snapshot

WebSocket events handling in Flask:
- Use @socketio.on('event') to listen for events
- Functions receive event data as arguments
- Use send() to reply to clients
- Connection opens on client connect
- Connection closes on disconnect event
- Events trigger server functions asynchronously

Full Transcript

This visual execution trace shows how Flask with Flask-SocketIO handles WebSocket events. When a client connects, the server accepts the connection. When the client sends a message event, the server runs the handler function, processes the message, and sends a response back. The connection stays open until the client disconnects, at which point the server closes the connection and stops processing events. Variables like connection status and last message update step-by-step. This helps beginners see how event-driven WebSocket communication flows in Flask.

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