How Do I Set Up WebSockets for a Real-Time Chat App Using Django Channels and React?

I’m working on a real-time chat application with Django Channels on the backend and React on the frontend. My goal is to enable users to exchange messages in real time, but I’m having trouble connecting everything properly. Here’s a rundown of what I’ve done so far:

Backend (Django)

I’ve set up Django Channels with WebSocket support. This is what my asgi.py file looks like:

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

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

django_asgi_app = get_asgi_application()

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

Here’s my WebSocket routing setup in routing.py:

from django.urls import path
from . import consumers

websocket_urlpatterns = [
    path('ws/chat/<str:chatgroup_name>', consumers.ChatConsumer.as_asgi(),),
]

The consumer (ChatConsumer) handles WebSocket connections and message broadcasts. Here’s a simplified version of it:

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.chatgroup_name = self.scope['url_route']['kwargs']['chatgroup_name']
        self.user = self.scope['user']
        await self.channel_layer.group_add(self.chatgroup_name, self.channel_name)
        await self.accept()

    async def disconnect(self, close_code):
        await self.channel_layer.group_discard(self.chatgroup_name, self.channel_name)

    async def receive(self, text_data):
        message = json.loads(text_data)['body']
        await self.channel_layer.group_send(
            self.chatgroup_name,
            {
                'type': 'chat_message',
                'message': message,
            }
        )

    async def chat_message(self, event):
        await self.send(text_data=json.dumps(event))

and this is the messages page in the react app:

import { useState, useEffect, useRef } from 'react';
// ...additional imports...

export default function MessagesView() {
    const [messages, setMessages] = useState<Message[]>([]);
    const [newMessage, setNewMessage] = useState('');
    const chatContainerRef = useRef<HTMLDivElement>(null);

    const scrollToBottom = () => {
        if (chatContainerRef.current) {
            chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
        }
    };

    // Fetch messages (placeholder function)
    useEffect(() => {
        const fetchMessages = async () => {
            // Implement API call here
        };
        fetchMessages();
    }, []);

    const handleSendMessage = async () => {
        if (newMessage.trim()) {
            // Implement WebSocket send logic here
            setNewMessage('');
        }
    };

    return (
        <div>
            {/* Chat UI */}
        </div>
    );
}

How do I connect the Django Channels backend to the React frontend via WebSocket? I’m unsure how to initialize the WebSocket connection in React and manage incoming/outgoing messages.

Вернуться на верх