Celebrating 10 years in web hosting [email protected]

Real-Time Features with Django Channels: Building a Chat Application

Building a real-time chat application with Django Channels involves several steps. Django Channels extends Django to handle WebSockets, enabling real-time functionality. Here’s a step-by-step guide to create a basic chat application:

Step 1: Setting Up the Environment

1.1 Install Required Packages

First, ensure you have Django and Django Channels installed:

pip install django channels channels-redis

1.2 Create a Django Project and App

Create a new Django project and app:

django-admin startproject chatproject
cd chatproject
django-admin startapp chat

Step 2: Configure Django Channels

2.1 Update settings.py

Add channels to your INSTALLED_APPS:

INSTALLED_APPS = [
...
'channels',
'chat',
]

Set the ASGI application and configure the channel layers:

ASGI_APPLICATION = 'chatproject.asgi.application'

CHANNEL_LAYERS = {
   'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
           'hosts': [('127.0.0.1', 6379)],
       },
   },
}

2.2 Create asgi.py

Modify asgi.py to include Channels routing:

import os
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
from django.core.asgi import get_asgi_application
import chat.routing

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

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

Step 3: Define Routing

3.1 Create routing.py in the chat app

from django.urls import re_path
from . import consumers

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

Step 4: Create Consumers

4.1 Create consumers.py in the chat app

Consumers handle the WebSocket connections:

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
       self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = f'chat_{self.room_name}'

        # Join room group
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    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
            }
        )

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

        # Send message to WebSocket
        await self.send(text_data=json.dumps({
            'message': message
        }))

Step 5: Create Templates and Views

5.1 Create a Simple Chat Room Template

Create templates/chat/room.html:

<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
</head>
<body>
    <h1>Room: {{ room_name }}</h1>
    <div id="chat-log"></div>
    <input id="chat-message-input" type="text" size="100">
    <input id="chat-message-submit" type="button" value="Send">

    <script>
        const roomName = "{{ room_name }}";
        const chatSocket = new WebSocket(
            'ws://' + window.location.host + '/ws/chat/' + roomName + '/'
        );

        chatSocket.onmessage = function(e) {
          const data = JSON.parse(e.data);
            document.querySelector('#chat-log').innerHTML += (data.message + '<br>');
        };

        chatSocket.onclose = function(e) {
            console.error('Chat socket closed unexpectedly');
        };

        document.querySelector('#chat-message-input').focus();
        document.querySelector('#chat-message-input').onkeyup = function(e) {
            if (e.keyCode === 13) {  // Enter key
               document.querySelector('#chat-message-submit').click();
           }
        };

       document.querySelector('#chat-message-submit').onclick = function(e) {
           const messageInputDom = document.querySelector('#chat-message-input');
            const message = messageInputDom.value;
            chatSocket.send(JSON.stringify({
                'message': message
           }));
           messageInputDom.value = '';
        };
   </script>
</body>
</html>

5.2 Create Views

Update views.py in the chat app:

from django.shortcuts import render

def room(request, room_name):
    return render(request, 'chat/room.html', {
        'room_name': room_name
    })

5.3 Define URL Patterns

Update urls.py in the chat app:

from django.urls import path
from . import views

urlpatterns = [
    path('<str:room_name>/', views.room, name='room'),
]

Update the project’s urls.py to include the chat app’s URLs:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('chat/', include('chat.urls')),
]

Step 6: Running the Application

Make sure you have Redis running, as it’s the default channel layer backend.

Run migrations:

python manage.py migrate

Run the development server:

python manage.py runserver

Visit http://127.0.0.1:8000/chat/room_name/ (replace room_name with any room name) to test your chat application. Open multiple browser tabs to see real-time messaging in action.

This setup provides the basic framework for a real-time chat application using Django Channels. For production, consider additional steps like deploying with a proper ASGI server (e.g., Daphne, Uvicorn) and configuring security settings.

Recent Posts

If you want then buy a good, reliable, secure web hosting service  from here: click here

In Conclusion,  If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. In Other Words, we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.