WebSocket events handling in Flask - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a WebSocket in Flask?

A WebSocket in Flask is a way to open a two-way communication channel between the client and server. It allows sending and receiving messages instantly without reloading the page.

beginner

Which Flask extension is commonly used for WebSocket support?

Flask-SocketIO is the extension that adds WebSocket support to Flask applications. It helps handle events like connect, disconnect, and message easily.

intermediate

What does the @socketio.on('event_name') decorator do?

It tells Flask-SocketIO to listen for a specific event from the client named 'event_name'. When that event happens, the decorated function runs to handle it.

intermediate

How do you send a message back to the client in Flask-SocketIO?

Use the emit() function inside an event handler. For example, emit('response_event', {'data': 'Hello'}) sends a message named 'response_event' with data to the client.

beginner

What is the purpose of the 'connect' and 'disconnect' events in WebSocket handling?

The 'connect' event runs when a client opens a WebSocket connection. The 'disconnect' event runs when the client closes it. They help manage user sessions and resources.

Which Flask extension is used to handle WebSocket events?

A Flask-SocketIO

B Flask-RESTful

C Flask-WTF

D Flask-Migrate

Flask-SocketIO is designed to handle WebSocket events and real-time communication.

What decorator do you use to listen for a WebSocket event named 'chat_message'?

A @app.route('/chat_message')

B @socketio.on('chat_message')

C @socketio.emit('chat_message')

D @app.websocket('chat_message')

The @socketio.on('event_name') decorator listens for WebSocket events with that name.

How do you send a message back to the client in Flask-SocketIO?

A return data

B send('event', data)

C emit('event', data)

D response(data)

The emit() function sends a named event with data back to the client.

What event runs when a client closes the WebSocket connection?

A disconnect

B close

C end

D stop

The 'disconnect' event triggers when the client closes the connection.

Which of these is NOT a WebSocket event in Flask-SocketIO?

A connect

B disconnect

C message

D submit

'submit' is not a standard WebSocket event; 'connect', 'disconnect', and 'message' are.

Explain how Flask-SocketIO handles WebSocket events from client connection to message sending.

Think about the lifecycle of a WebSocket connection and how events are handled.

Describe the role of the @socketio.on decorator and the emit function in WebSocket communication.

Focus on how Flask-SocketIO listens and responds to events.

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