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.