Full Stack Python with Django Channels for WebSocket Support

In a full-stack application, it's often necessary to create real-time features such as chat systems, live updates, notifications, or collaborative apps. Django traditionally handles HTTP requests, but with Django Channels, you can extend Django to handle WebSockets and asynchronous protocols. This allows you to build real-time, bidirectional communication between the client (e.g., React) and the server (Django).

In this guide, we'll explore how to set up Django Channels for WebSocket support in a full-stack Python application.

1️⃣ Overview of Django Channels

Django Channels extends Django to handle asynchronous protocols like WebSockets, HTTP2, and more.

It allows Django to manage WebSocket connections, handling real-time communication (messages, notifications, live updates).

Unlike traditional Django views (which use HTTP requests and responses), Channels operates with asynchronous consumers and WebSocket connections.

2️⃣ Setting Up Django with Channels

We'll set up Django to support WebSocket connections using Django Channels.

1. Install Django and Django Channels

First, create a new virtual environment and install the required dependencies:

# Create a new virtual environment

python -m venv venv

source venv/bin/activate # For macOS/Linux

venv\Scripts\activate # For Windows

# Install Django and Channels

pip install django

pip install channels

pip install channels_redis # For Redis (optional, for scaling WebSocket connections)

2. Create a Django Project

Create a new Django project and app:

# Create a new Django project

django-admin startproject websocket_project

cd websocket_project

# Create a new app

python manage.py startapp chat

3. Configure Django Settings

In your settings.py, make the following changes:

Add Channels to Installed Apps:

INSTALLED_APPS = [

...

'channels', # Add channels to INSTALLED_APPS

'chat', # Add the app you just created

]

Set the ASGI Application:

Django Channels requires the use of an ASGI application (Asynchronous Server Gateway Interface, a specification for handling asynchronous requests). Set the ASGI_APPLICATION setting to point to the routing configuration.

ASGI_APPLICATION = 'websocket_project.asgi.application'

Configure Channels Layer (Optional, for Redis):

If you want to scale WebSocket support (e.g., for multiple instances of your app), you can use Redis as the channel layer. Install Redis and add the following configuration:

CHANNEL_LAYERS = {

'default': {

'BACKEND': 'channels_redis.core.RedisChannelLayer',

'CONFIG': {

"hosts": [('127.0.0.1', 6379)],

}

If you don't need Redis, you can use the in-memory channel layer, which is sufficient for small-scale applications.

4. Create ASGI Configuration

Create an asgi.py file in the root of your project (same level as settings.py):

# websocket_project/asgi.py

import os

from django.core.asgi import get_asgi_application

from channels.routing import ProtocolTypeRouter, URLRouter

from channels.auth import AuthMiddlewareStack

from chat.routing import websocket_urlpatterns

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'websocket_project.settings')

application = ProtocolTypeRouter({

'http': get_asgi_application(),

'websocket': AuthMiddlewareStack(

URLRouter(

websocket_urlpatterns

)

})

This code tells Django Channels to route WebSocket connections to the appropriate consumer based on the URL patterns defined in the chat.routing module.

3️⃣ Create WebSocket Consumer

A consumer in Django Channels is similar to a Django view but is asynchronous and designed to handle WebSocket connections.

Create a consumer inside your chat app:

# chat/consumers.py

import json

from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):

async def connect(self):

# Called when the WebSocket is handshaking as part of the connection process.

self.room_name = 'chatroom' # Example room

self.room_group_name = f'chat_{self.room_name}'

# Join the room group

await self.channel_layer.group_add(

self.room_group_name,

self.channel_name

)

await self.accept()

async def disconnect(self, close_code):

# Called when the WebSocket closes for any reason.

await self.channel_layer.group_discard(

self.room_group_name,

self.channel_name

)

# Receive message from WebSocket

async def receive(self, text_data):

text_data_json = json.loads(text_data)

message = text_data_json['message']

# Send message to room group

await self.channel_layer.group_send(

self.room_group_name,

{

'type': 'chat_message',

'message': message

}

)

# Receive message from room group

async def chat_message(self, event):

message = event['message']

# Send message to WebSocket

await self.send(text_data=json.dumps({

'message': message

}))

This consumer manages WebSocket connections for the chat room:

When a user connects (connect method), they join a specific room (e.g., chatroom).

When the user sends a message (receive method), the message is broadcasted to other users in the same room using channel layers.

When the WebSocket closes (disconnect method), the user is removed from the group.

4️⃣ Configure WebSocket URL Routing

In Django Channels, URL routing determines which consumer handles which WebSocket connection. You define this in the routing.py file.

Create a routing.py file in the chat app:

# chat/routing.py

from django.urls import re_path

from . import consumers

websocket_urlpatterns = [

re_path(r'ws/chat/', consumers.ChatConsumer.as_asgi()),

]

This configuration means that any WebSocket connection to /ws/chat/ will be routed to the ChatConsumer.

5️⃣ Front-End: React WebSocket Integration

Now that your Django back-end is set up for WebSockets, let’s integrate it into the front-end using React.

Install react-use-websocket:

This library simplifies WebSocket management in React.

npm install react-use-websocket

Create a React Component to Connect to WebSocket:

// src/components/Chat.js

import React, { useState, useEffect } from 'react';

import useWebSocket from 'react-use-websocket';

const Chat = () => {

const [message, setMessage] = useState('');

const [messages, setMessages] = useState([]);

// Set up WebSocket connection

const { sendMessage, lastMessage } = useWebSocket('ws://localhost:8000/ws/chat/', {

onMessage: (event) => {

const newMessage = JSON.parse(event.data).message;

setMessages((prevMessages) => [...prevMessages, newMessage]);

});

const handleSendMessage = () => {

if (message) {

sendMessage(JSON.stringify({ message }));

setMessage('');

}

};

return (

<div>

<div>

{messages.map((msg, index) => (

))}

</div>

<input

type="text"

value={message}

onChange={(e) => setMessage(e.target.value)}

placeholder="Type a message"

</div>

);

};

export default Chat;

Integrate Chat Component in App:

// src/App.js

import React from 'react';

import Chat from './components/Chat';

function App() {

return (

</div>

);

}

export default App;

6️⃣ Run the Application

Run Redis (if using Redis for channel layers):

# Ensure Redis is running in the background

redis-server

Run Django Server:

python manage.py runserver

Run React Front-End:

npm start

7️⃣ Conclusion

With Django Channels, you can easily add WebSocket support to your full-stack Python app. This allows you to build real-time features like chat systems, live updates, and notifications.

Key concepts covered:

Django Channels for WebSocket communication.

Consumers to handle WebSocket events in Django.

React integration with WebSocket using react-use-websocket.

With this setup, you can build real-time, bidirectional communication between your React front-end and Django back-end!

Learn Fullstack Python Training in Hyderabad

Using Axios for HTTP Requests in Full Stack Python Projects

How to Handle API Data in React with Python Backend

Building Real-Time Web Applications with WebSockets in Python

At Our Quality Thought Training Institute in Hyderabad

Get Directions

December 08, 2025