Channels for WebSocket support in Django - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Channels layer for WebSocket support.

Django

from channels import [1]

Drag options to blanks, or click blank then click option'

Aconsumers

Blayers

Crouting

Dwebsocket

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'layers' instead of 'routing'

Trying to import 'websocket' directly

Confusing 'consumers' with routing

The routing module is imported from Channels to define WebSocket URL routes.

2fill in blank

medium

Complete the code to define a WebSocket consumer class inheriting from the correct Channels base class.

Django

from channels.generic.websocket import [1]

class ChatConsumer([1]):
    pass

Drag options to blanks, or click blank then click option'

AAsyncWebsocketConsumer

BWebsocketHandler

CWebsocketConsumer

DAsyncConsumer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'WebsocketHandler' which does not exist

Using synchronous 'WebsocketConsumer' when async is preferred

Using 'AsyncConsumer' which is more generic

AsyncWebsocketConsumer is the recommended base class for asynchronous WebSocket consumers in Channels.

3fill in blank

hard

Fix the error in the routing configuration by completing the WebSocket URL pattern.

Django

from django.urls import re_path
from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/chat/(?P<[1]>[^/]+)/$', consumers.ChatConsumer.as_asgi()),
]

Drag options to blanks, or click blank then click option'

Aroom_name

Broomname

Croom-name

Droom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'roomname' without underscore

Using hyphenated 'room-name' which is invalid in regex group names

Using 'room' which may not match consumer code

The URL pattern uses room_name as the named group to capture the chat room identifier.

4fill in blank

hard

Fill both blanks to complete the async method that accepts a WebSocket connection and adds the user to a group.

Django

async def connect(self):
    self.room_group_name = f'chat_[1]'
    await self.channel_layer.[2](
        self.room_group_name,
        self.channel_name
    )
    await self.accept()

Drag options to blanks, or click blank then click option'

Aroom_name

Bsend

Cgroup_add

Dgroup_send

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' instead of 'group_add' for channel layer method

Using 'group_send' which sends messages, not adds channels

Using wrong variable name for room identifier

The room_name variable is used to create the group name string. The group_add method adds the channel to the group.

5fill in blank

hard

Fill all three blanks to complete the async method that receives a message and sends it to the group.

Django

async def receive(self, text_data):
    text_data_json = json.loads(text_data)
    message = text_data_json['message']

    await self.channel_layer.[1](
        self.room_group_name,
        {
            'type': '[2]',
            'message': message
        }
    )

async def chat_message(self, event):
    message = event['message']

    await self.send(text_data=json.dumps([3]))

Drag options to blanks, or click blank then click option'

Agroup_send

Bchat_message

C{'message': message}

Dgroup_add

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'group_add' instead of 'group_send'

Mismatching the 'type' string with the handler method name

Sending raw message string instead of a dictionary

The group_send method sends a message to the group. The type specifies the handler method chat_message. The send method sends the JSON message back to the WebSocket client.

Practice

1. What is the main purpose of Django Channels in a web application?

easy

A. To add WebSocket support for real-time communication

B. To replace Django's ORM with a new database system

C. To provide automatic HTML templating

D. To handle static files like CSS and images

Solution

1. Step 1: Understand Django Channels role

   Django Channels extends Django to handle WebSockets and asynchronous tasks.

2. Step 2: Identify the main feature

   Its main feature is enabling real-time communication via WebSockets.

3. Final Answer:

   To add WebSocket support for real-time communication -> Option A

4. Quick Check:

   Channels = WebSocket support [OK]

Hint: Channels = real-time WebSocket support in Django [OK]

Common Mistakes:

• Confusing Channels with static file handling
• Thinking Channels replace Django ORM
• Assuming Channels only handle HTTP requests

2. Which method must you override in a Django Channels consumer to handle incoming WebSocket messages?

easy

A. connect()

B. receive()

C. send()

D. disconnect()

Solution

1. Step 1: Recall consumer methods

   In AsyncWebsocketConsumer, connect() handles connection, receive() handles incoming messages.

2. Step 2: Identify message handler

   receive() is called when a message arrives from the client.

3. Final Answer:

   receive() -> Option B

4. Quick Check:

   Message handler = receive() [OK]

Hint: receive() handles incoming WebSocket messages [OK]

Common Mistakes:

• Using connect() to handle messages
• Confusing send() with receive()
• Overriding disconnect() for message handling

3. Given this consumer code snippet, what will be sent to the client when it receives a JSON message with {"text": "hello"}?

class ChatConsumer(AsyncWebsocketConsumer):
    async def receive(self, text_data):
        data = json.loads(text_data)
        response = {"reply": data["text"].upper()}
        await self.send(text_data=json.dumps(response))

medium

A. {"reply": "HELLO"}

B. {"reply": "hello"}

C. {"text": "HELLO"}

D. An error occurs because send() is missing

Solution

1. Step 1: Analyze receive method

   The method loads JSON, extracts "text", converts it to uppercase, and sends it back as "reply".

2. Step 2: Determine output

   Input text "hello" becomes "HELLO" in the reply JSON.

3. Final Answer:

   {"reply": "HELLO"} -> Option A

4. Quick Check:

   Uppercase reply sent = {"reply": "HELLO"} [OK]

Hint: Uppercase input text sent back as reply JSON [OK]

Common Mistakes:

• Confusing keys in JSON response
• Thinking send() is missing and causes error
• Not converting text to uppercase

4. Identify the error in this Channels consumer code:

class MyConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        await self.accept

    async def receive(self, text_data):
        await self.send(text_data=text_data)

medium

A. send method cannot send text_data

B. receive method should not be async

C. Missing parentheses in await self.accept call

D. connect method must return a value

Solution

1. Step 1: Check connect method

   await self.accept is missing parentheses, should be await self.accept()

2. Step 2: Validate other methods

   receive is async correctly, send accepts text_data, connect does not require return.

3. Final Answer:

   Missing parentheses in await self.accept call -> Option C

4. Quick Check:

   Call async methods with () [OK]

Hint: Always use parentheses when awaiting methods [OK]

Common Mistakes:

• Forgetting parentheses on async method calls
• Thinking receive can't be async
• Expecting connect to return a value

5. You want to broadcast a message to all clients in a chat room using Django Channels. Which approach correctly sends a message to the group named "chat_room"?

hard

A. await self.send_group("chat_room", {"text": "Hello"})

B. await self.group_send("chat_room", {"type": "chat.message", "text": "Hello"})

C. self.channel_layer.send_group("chat_room", {"text": "Hello"})

D. await self.channel_layer.group_send("chat_room", {"type": "chat.message", "text": "Hello"})

Solution

1. Step 1: Recall group message syntax

   Use channel_layer.group_send with await and a message dict including "type" key.

2. Step 2: Check options

   await self.channel_layer.group_send("chat_room", {"type": "chat.message", "text": "Hello"}) uses correct method, await, and message format. Others use invalid methods or missing await.

3. Final Answer:

   await self.channel_layer.group_send("chat_room", {"type": "chat.message", "text": "Hello"}) -> Option D

4. Quick Check:

   Group send = await channel_layer.group_send(...) [OK]

Hint: Use await channel_layer.group_send with type key [OK]

Common Mistakes:

• Using non-existent send_group or group_send methods
• Omitting await on async calls
• Missing the required "type" key in message dict