WebSocket events handling in Flask - Performance & Optimization

Performance: WebSocket events handling

MEDIUM IMPACT

This affects the responsiveness and smoothness of real-time updates on the page by controlling how WebSocket events are processed and rendered.

Handling frequent WebSocket messages to update UI

Flask

from flask_socketio import SocketIO, emit
import threading

socketio = SocketIO(app)

def background_task(data):
    result = complex_calculation(data)
    socketio.emit('response', result)

@socketio.on('message')
def handle_message(data):
    threading.Thread(target=background_task, args=(data,)).start()

Offloads heavy processing to a background thread, keeping the main thread free to handle UI and other events.

📈 Performance GainNon-blocking event handling improves responsiveness and reduces input delay

Handling frequent WebSocket messages to update UI

Flask

from flask_socketio import SocketIO, emit

socketio = SocketIO(app)

@socketio.on('message')
def handle_message(data):
    # Heavy processing on main thread
    result = complex_calculation(data)
    emit('response', result)

Heavy processing inside the event handler blocks the main thread, causing UI lag and delayed responses.

📉 Performance CostBlocks main thread during processing, causing input delay and poor INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Blocking heavy processing in event handler	Multiple DOM updates per event	Multiple reflows if DOM updated repeatedly	High paint cost due to frequent layout changes	[X] Bad
Background thread processing with batched DOM updates	Batched DOM updates	Single reflow per batch	Lower paint cost due to fewer layout changes	[OK] Good

Rendering Pipeline

WebSocket events trigger JavaScript handlers that update the DOM. If event processing is slow or blocking, it delays Style Calculation, Layout, and Paint stages, hurting responsiveness.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution blocking main thread

Core Web Vital Affected

INP

This affects the responsiveness and smoothness of real-time updates on the page by controlling how WebSocket events are processed and rendered.

Optimization Tips

1Avoid heavy synchronous processing in WebSocket event handlers.

2Use background threads or async tasks for expensive computations.

3Batch DOM updates triggered by WebSocket events to minimize reflows.

Performance Quiz - 3 Questions

What is the main performance issue when handling WebSocket events with heavy processing directly in the event handler?

A It increases network latency

B It blocks the main thread causing input delay

C It reduces the number of WebSocket connections

D It causes memory leaks

DevTools: Performance

How to check: Record a session while WebSocket events occur, then analyze the Main thread activity for long tasks or blocking scripts.

What to look for: Look for long JavaScript execution blocks during event handling that delay input responsiveness.

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