Introduction :

In the rapidly evolving digital landscape, real-time communication has become a cornerstone of modern web applications. Implementing a messaging system that allows instantaneous interaction between users requires a combination of robust backend and responsive frontend technologies. This project aims to build a real-time messaging application using Django and React.

Django:

A high-level Python web framework that encourages rapid development and clean, pragmatic design.

Handles the backend logic, user authentication, and data storage.

Provides a robust framework for building scalable web applications.

Django Channels:

An extension to Django that adds support for handling WebSockets, HTTP2, and other asynchronous protocols.

Enables the server to push updates to clients in real-time.

Facilitates the integration of WebSockets into the Django framework.

React:

A popular JavaScript library for building user interfaces.

Handles the frontend, providing a dynamic and responsive user experience.

Utilizes state management to update the UI in response to user actions and incoming messages.

Flow Diagram:

Prerequisites :

Python packages

Django - ( https://pypi.org/project/Django/ )

Rest framework - ( https://pypi.org/project/djangorestframework/ )

Channels ( https://pypi.org/project/channels/ )

cors-headers - ( https://pypi.org/project/django-cors-headers/ )

shortuuid - ( https://pypi.org/project/django-shortuuidfield/ )

npm packages

icons - ( https://www.npmjs.com/package/@heroicons/react )

tailwind - ( https://www.npmjs.com/package/tailwindcss )

react-router-dom - ( https://www.npmjs.com/package/react-router-dom )

Steps:

Step 1: Create a virtual environment

Create a file name requirements.txt and add the python packages that is added in Prerequisites

A sample requirements.txt file can be found in the following git repository file.

messaging_app_django_backend_example/requirements.txt at main · episyche/messaging_app_django_backend_example (github.com )

Create a virtual environment and install the required dependencies

pip install virtualenv\
python -m venv .venv

To activate the virtual environment

For Windows

.venv\Scripts\activate

For Ubuntu

source .venv/bin/activate

After creating a virtual environment install the pip packages in requirements.txt using the following command

pip install -r requirements.txt

Step 2: Django Backend Creation

Create a Django project named chat_django using the following command.

django-admin startproject chat_django

Navigate to the project directory you created in the above step and create an app named chat using the following command.

In this app, we add all the code-related web socket connections and messaging

cd chat_django
python manage.py startapp chat

Also, create a new app named accounts. In this app, we develop APIs for user authentication

python manage.py startapp accounts

The project structure is given below

channels python package mentioned in requirements.txt will establish a socket connection between the React chat application and the Django Backend.

Update the Django settings.py file with the following items.

In the INSTALLED_APPS section add your app name (i.e. chat, accounts), Also add https://pypi.org/project/channels/ in INSTALLED_APPS

Add domains in ALLOWED_HOSTS or add “*” for accepts all

Add ASGI_APPLICATION = <YOUR_PROJECT_NAME>.asgi.application

Add 'corsheaders' in INSTALLED_APPS , 'corsheaders.middleware.CorsMiddleware' in MIDDLEWARE and add CORS_ORIGIN_ALLOW_ALL = True

Also Add channel layer

ALLOWED_HOSTS = ['*']

# Application definition

INSTALLED_APPS = [
    'channels',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'chat',
    'accounts',
    'corsheaders',
    'rest_framework',
    'rest_framework.authtoken'
]
MIDDLEWARE = [
    .
    .
    'corsheaders.middleware.CorsMiddleware'
]
.
.
.
WSGI_APPLICATION = 'chat_django.wsgi.application'
ASGI_APPLICATION = 'chat_django.asgi.application'

CORS_ORIGIN_ALLOW_ALL = True

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}

A sample settings.py file can be found in the following git repository file.

messaging_app_django_backend_example/chat_django/settings.py at main · episyche/messaging_app_django_backend_example (github.com)

Step 3: ASGI configuration

Create a consumers.py file under the chat app to handle the WebSocket connection with React Frontend Application.

Inside consumers.py create a ChatConsumer class with AsyncWebsocketConsumer like the below code

import json
from channels.db import database_sync_to_async
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
	async def connect(self):
		print('accept ---- ')
		await self.accept()

Create routing.py file under chat app, It handles the chatconsumers class urls. Add the following code

from django.urls import re_path
from chat import consumers

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

Update asgi.py in your core app with the following code

ASGI is a specification for asynchronous web servers to communicate with web applications

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

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

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

Run python manage.py runserver, If you see a result like the one below screenshot that indicates websocket is properly configured and running

Step 4: Model configuration

Add User model in accounts app models.py

from django.db import models
from django.contrib.auth.models import AbstractUser

class User(AbstractUser):
    first_name = models.CharField(max_length=30, blank=True)
    last_name = models.CharField(max_length=50, blank=True)
    email = models.EmailField(unique=True)
    is_active = models.BooleanField(default=True)

class OnlineUser(models.Model):
	user = models.OneToOneField(User, on_delete=models.CASCADE)

	def __str__(self):
		return self.user.username

Update settings.py AUTH_USER_MODEL = 'accounts.User'

Add ChatRoom and ChatMessage models in chat app models.py

from django.db import models
from shortuuidfield import ShortUUIDField
from accounts.models import User

class ChatRoom(models.Model):
	roomId = ShortUUIDField()
	type = models.CharField(max_length=10, default='DM')
	member = models.ManyToManyField(User)
	name = models.CharField(max_length=20, null=True, blank=True)
	
class ChatMessage(models.Model):
	chat = models.ForeignKey(ChatRoom, on_delete=models.SET_NULL, null=True)
	user = models.ForeignKey(User, on_delete=models.SET_NULL, null=True)
	message = models.CharField(max_length=255)
	timestamp = models.DateTimeField(auto_now_add=True)

After adding the above models migrate using running the below commands

python manage.py makemigrations
python manage.py migrate

Step 5: Authentication API’s creation

Create signup and login view for authentication

→ Signup view

Create a new file named serializers.py under the accounts app and add the below code

from rest_framework import serializers
from django.db import transaction
from django.contrib.auth import get_user_model

from .models import *
from chat.models import *

class UserLoginSerializer(serializers.Serializer):
    email = serializers.EmailField(required=True, allow_null=False,)
    password = serializers.CharField(required=True, allow_null=False)
    
    def authenticate(self, username=None, password=None, email=None, **kwargs):
        UserModel = get_user_model()
        try:
            user = User.objects.get(email__iexact=email)
        except UserModel.DoesNotExist:
            return None
        else:
            if user.check_password(password):
                return user
        return None

class UserSerializer(serializers.ModelSerializer):
    email = serializers.EmailField(write_only=True)
    password = serializers.CharField(write_only=True,allow_null=False)

    class Meta:
        model = User
        fields = ('email', 'password', 'username', 'first_name' , 'last_name', 'id')
        extra_kwargs = {
			'first_name': {'required': True},
			'last_name': {'required': True},
			'email': {'required': True},
			'password': {'required': True},
		}

    @transaction.atomic
    def create(self, validated_data):
        email = validated_data['email']
        try:
            user = super(UserSerializer, self).create(validated_data)
        except:
            raise email + " already exists"

        user.set_password(validated_data['password'])
        user.save()
        chatRoom = ChatRoom.objects.create(
			type="SELF", name=user.first_name + user.last_name
		)
        chatRoom.member.add(user.id)
        return user

In views.py create a class for SignupView. Add the following code

from django.http import JsonResponse

from rest_framework.generics import GenericAPIView
from .serializers import *

class SignUpView(GenericAPIView):
    serializer_class = UserLoginSerializer

    def post(self, request):
        # checking user already exists
        valid_email = User.objects.filter(email__iexact=request.data['email'])
        if valid_email:
            return JsonResponse('already created' , safe=False)
        else:
            try:    
                data = request.data
                data['username'] = data['email']
                # pass data to the serializer for validating 
                serializer = UserSerializer(data=data)
                valid = serializer.is_valid(raise_exception=True)
                if valid:
                    # create the user
                    user = serializer.save()
                    try:
                        # activate the user
                        if user.is_active == False:
                            user.is_active=True
                            user.save()
                        return JsonResponse('Your account has been activated successfully, please login and check.', safe=False)
                    except:
                        return JsonResponse('Signup failed ' , safe=False)
                else:                    
                    return JsonResponse('Invalid request or field missing!' , safe=False)
            except KeyError:
                return JsonResponse('Invalid request or field missing!' , safe=False)

A sample views.py file can be found in the following git repository file.

messaging_app_django_backend_example/accounts/views.py at main · episyche/messaging_app_django_backend_example (github.com)

After creating the class create the urls.py file under your accounts app.

In your core folder navigate to urls.py(core folder) and add your path with <appname> and <url_filename>(i.e. created in the above step) . Your core urls.py settings are like below.

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

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

A sample urls.py(core folder) file can be found in the following git repository file.

messaging_app_django_backend_example/chat_django/urls.py at main · episyche/messaging_app_django_backend_example (github.com)

Now, In your accounts app urls.py add your path with the class SignUpView

from django.urls import path
from .views import *

urlpatterns = [
    path('signup/' , SignUpView.as_view()),
]

A sample urls.py(accounts) file can be found in the following git repository file.

messaging_app_django_backend_example/accounts/urls.py at main · episyche/messaging_app_django_backend_example (github.com)

Run the server using python manage.py runserver

→ Login view

In views.py create class for LoginView. add following code

from django.http import JsonResponse

from rest_framework.generics import GenericAPIView
from rest_framework.authtoken.models import Token

class LoginView(GenericAPIView):
    queryset = User.objects.all()
    serializer_class = UserLoginSerializer

    def post(self, request):
        data = request.data
        login_serializer = UserLoginSerializer(data=data)   

        # Pass data to the serializer to validate 
        if login_serializer.is_valid():
            email=data['email']
            password=data['password']
            # Check email already exists or not
            valid_email = User.objects.filter(email__iexact=data['email'])
            if valid_email:
                # Check user active status
                check_to_active_email = User.objects.filter(email__iexact=data['email'],is_active = True)
                if check_to_active_email:
                    # check authentication 
                    request_user = login_serializer.authenticate(email=email,password=password)
                    if request_user:
                        try:
                            Token.objects.get(user=request_user).delete()
                        except Exception as er:
                            pass
                        Token.objects.create(user=request_user)
                        new_token = list(Token.objects.filter(user_id=request_user).values("key"))  
                        msg={
                            "token":str(new_token[0]['key']),
                            'username':str(request_user),
                            'email':request_user.email,
                            'user_id':request_user.id,
                            'first_name': request_user.first_name,
                            'last_name': request_user.last_name,
                        }
                        return JsonResponse(msg , safe=False)
                    else:
                        return JsonResponse('Please check your password again.' , safe=False)
                else:
                    return JsonResponse('Your email id not registered or temporary blocked.' , safe=False)
            else:
                return JsonResponse('Email not activate' , safe=False)
        else:
            return JsonResponse('Your email id is not registered. Please signup to activate your account.' , safe=False)

A sample views.py file can be found in the following git repository file.

messaging_app_django_backend_example/accounts/views.py at main · episyche/messaging_app_django_backend_example (github.com)

Now , In your accounts app urls.py add your path with the class LoginView

from django.urls import path
from .views import *

urlpatterns = [
    path('signup/' , SignUpView.as_view()),
    path('login/' , LoginView.as_view()),
]

A sample urls.py(accounts) file can be found in the following git repository file.

messaging_app_django_backend_example/accounts/urls.py at main · episyche/messaging_app_django_backend_example (github.com)

Step 6: Chat API’s creation

→ Create chatroom

Create a serializers.py under the chat app . Add the ChatRoomSerializer that will create a chatroom using two user objects

from rest_framework import serializers
from chat.models import ChatRoom, ChatMessage
from accounts.serializers import UserSerializer

class ChatRoomSerializer(serializers.ModelSerializer):
	member = UserSerializer(many=True, read_only=True)
	members = serializers.ListField(write_only=True)

	def create(self, validatedData):
		memberObject = validatedData.pop('members')
		chatRoom = ChatRoom.objects.create(**validatedData)
		chatRoom.member.set(memberObject)
		return chatRoom

	class Meta:
		model = ChatRoom
		exclude = ['id']

In views.py create class ChatRoomView

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from .models import *
from .serializers import *
# Create your views here.

class ChatRoomView(APIView):
	# get chatrooms by userId
	def get(self, request, userId):
		chatRooms = ChatRoom.objects.filter(member=userId).exclude(type='SELF')
		serializer = ChatRoomSerializer(
			chatRooms, many=True, context={"request": request}
		)
		return Response(serializer.data, status=status.HTTP_200_OK)

    # create chatroom
	def post(self, request):
		serializer = ChatRoomSerializer(
			data=request.data, context={"request": request}
		)
		if serializer.is_valid():
			serializer.save()
			return Response(serializer.data, status=status.HTTP_200_OK)
		return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Create urls.py under chat app and add urls for views

from django.urls import path
from chat.views import ChatRoomView

urlpatterns = [
	path('room', ChatRoomView.as_view(), name='create chatRoom'),
	path('rooms/<int:userId>/', ChatRoomView.as_view(), name='get chatRoomList'),
]

In your core folder navigate to urls.py(core folder) and add your path with <appname> and <url_filename>(i.e. created in the above step) . Your core urls.py settings are like below.

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

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

→ Create chatroom API call

In members pass two user id to create a chatroom

→ Get chatroom API call

→ Get Messages by chatroom

update serializers.py in chat app

class ChatMessageSerializer(serializers.ModelSerializer):
	userName = serializers.SerializerMethodField()

	class Meta:
		model = ChatMessage
		exclude = ['id', 'chat']

	def get_userName(self, Obj):
		return Obj.user.first_name + ' ' + Obj.user.last_name

Add class MessagesView in views.py

from rest_framework.generics import ListAPIView
from rest_framework.pagination import LimitOffsetPagination

class MessagesView(ListAPIView):
	serializer_class = ChatMessageSerializer
	pagination_class = LimitOffsetPagination

	def get_queryset(self):
		roomId = self.kwargs['roomId']
		return ChatMessage.objects.\
			filter(chat__roomId=roomId).order_by('-timestamp')

Add path for MessagesView in urls.py (chat app)

from django.urls import path
from chat.views import ChatRoomView , MessagesView

urlpatterns = [
	path('room', ChatRoomView.as_view(), name='create chatRoom'),
	path('rooms/<int:userId>/', ChatRoomView.as_view(), name='get chatRoomList'),
    path('room/<str:roomId>/messages', MessagesView.as_view(), name='messageList'),
]

→ Get messages postman

Step 7: Update websocket for chat

update consumers.py to handle the messages

import json
from datetime import datetime
from channels.db import database_sync_to_async
from channels.generic.websocket import AsyncWebsocketConsumer
from chat.models import ChatRoom, ChatMessage
from accounts.models import User, OnlineUser
from chat.serializers import *

class ChatConsumer(AsyncWebsocketConsumer):
    def getUser(self, userId):
        return User.objects.get(id=userId)

    def getOnlineUsers(self):
        onlineUsers = OnlineUser.objects.all()
        return [onlineUser.user.id for onlineUser in onlineUsers]

    def addOnlineUser(self, user):
        try:
            OnlineUser.objects.create(user=user)
        except:
            pass

    def deleteOnlineUser(self, user):
        try:
            OnlineUser.objects.get(user=user).delete()
        except:
            pass

    def saveMessage(self, message, userId, roomId):
        userObj = User.objects.get(id=userId)
        chatObj = ChatRoom.objects.get(roomId=roomId)
        chatMessageObj = ChatMessage.objects.create(
            chat=chatObj, user=userObj, message=message
        )
        
        return {
            'action': 'message',
            'user': userId,
            'roomId': roomId,
            'message': message,
            'userName': userObj.first_name + " " + userObj.last_name,
            'timestamp': str(chatMessageObj.timestamp),
            'id': str(chatMessageObj.id)
        }

    async def sendOnlineUserList(self):
        onlineUserList = await database_sync_to_async(self.getOnlineUsers)()
        chatMessage = {
            'type': 'chat_message',
            'message': {
                'action': 'onlineUser',
                'userList': onlineUserList
            }
        }

        await self.channel_layer.group_send('onlineUser', chatMessage) 

    async def connect(self):
        self.userId = self.scope['url_route']['kwargs']['userId']
        print("**************", self.userId)
        self.userRooms = await database_sync_to_async(
            list
        )(ChatRoom.objects.filter(member=self.userId))
        for room in self.userRooms:
            await self.channel_layer.group_add(
                room.roomId,
                self.channel_name
            )
        await self.channel_layer.group_add('onlineUser', self.channel_name)
        self.user = await database_sync_to_async(self.getUser)(self.userId)
        await database_sync_to_async(self.addOnlineUser)(self.user)
        await self.sendOnlineUserList()
        await self.accept()

    async def disconnect(self, close_code):
        await database_sync_to_async(self.deleteOnlineUser)(self.user)
        await self.sendOnlineUserList()
        for room in self.userRooms:
            await self.channel_layer.group_discard(
                room.roomId,
                self.channel_name
            )

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        action = text_data_json['action']
        roomId = text_data_json['roomId']
        chatMessage = {}
        if action == 'message':
            message = text_data_json['message']
            userId = text_data_json['user']
            chatMessage = await database_sync_to_async(
                self.saveMessage
            )(message, userId, roomId)
        elif action == 'typing':
            chatMessage = text_data_json
        
        print('chatMessage' , chatMessage)
        await self.channel_layer.group_send(
            roomId,
            {
                'type': 'chat_message',
                'message': chatMessage
            }
        )

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

After updating the consumer.py. Run the backend server using the python manage.py runserver command

⚠️ After running the server. If you get any errors, try to double-check the python package dependency versions.

Django==4.2.5

channels==3.0.5

django-cors-headers==4.2.0

djangorestframework==3.14.0 django-shortuuidfield==0.1.3

Step 8: React Frontend Creation

Run the following command to create a React project.

npx create-react-app chat_react

Navigate to the created project directory

cd chat_react

In our case, we are using tailwind CSS to create the messaging app's UI.

Install Tailwind CSS with the following commands

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

After running the above commands . Go to tailwind.config.js add below content

content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

Go to project src directory inside index.css add the below snippet

@tailwind base;
@tailwind components;
@tailwind utilities;

For more details, refer to this blog https://episyche.com/blog/how-to-configure-tailwind-css-with-react

Under the Component folder create ChatScreen.js and add websocket and chat code

import { useEffect, useState } from "react";
import { PaperAirplaneIcon, UserCircleIcon } from '@heroicons/react/24/outline'


let user_id = localStorage.getItem('user_id')

let socket = new WebSocket(
    `ws://127.0.0.1:8000/ws/users/${user_id}/chat/`
);

let typingTimer = 0;
let isTypingSignalSent = false;

export default function ChatScreen() {

    const [chatRooms, setChatRooms] = useState([])
    const [inputMessage, setInputMessage] = useState("");
    const [roomId, setRoomId] = useState(null)
    const [messages, setMessages] = useState([])
    const [typing, setTyping] = useState(false);

    const [page, setPage] = useState(null)
    const [user, setUser] = useState(null)

    useEffect(() => {
        let user_id = localStorage.getItem('user_id')

        if (user_id) {
            setUser(user_id)
            setPage('chat')
            getChatRooms()
            socket = new WebSocket(
                `ws://127.0.0.1:8000/ws/users/${user_id}/chat/`
            );
        } else {
            setPage('login')
        }
    }, [user])

    async function getChatRooms() {
        await fetch(`http://127.0.0.1:8000/chat/rooms/${user}/`, {
            method: 'GET'
        }).then((response) => {
            return response.json()
        }).then(data => {
            setChatRooms(data)
        }).catch(error => {
            console.log('error----- ', error)
        });
    }

    async function getMessagesByChatRooms(roomId) {
        await fetch(`http://127.0.0.1:8000/chat/room/${roomId}/messages`, {
            method: 'GET'
        }).then((response) => {
            return response.json()
        }).then(data => {
            console.log('message data----- ', data)
            setMessages(data)
        }).catch(error => {
            console.log('error----- ', error)
        });
    }


    useEffect(() => {
        getMessagesByChatRooms(roomId)
    }, [roomId])

    socket.onmessage = (event) => {
        const data = JSON.parse(event.data)
        if (roomId === data.roomId) {
            if (data.action === "message") {
                setMessages((prevState) => {
                    let messagesState = JSON.parse(JSON.stringify(prevState));
                    console.log('messagesState', messagesState)
                    console.log('data', data)
                    messagesState.push(data);
                    return messagesState;
                });
                setTyping(false);
            } else if (data.action === "typing" && data.user !== user_id) {
                setTyping(data.typing);
            }
        }
    }

    const messageSubmitHandler = (event) => {
        event.preventDefault();
        if (roomId !== null) {
            if (inputMessage) {
                socket.send(
                    JSON.stringify({
                        action: "message",
                        message: inputMessage,
                        user: user_id,
                        roomId: roomId,
                    })
                );
            }
            setInputMessage("");
        }
    };

    const sendTypingSignal = (typing) => {
        socket.send(
            JSON.stringify({
                action: 'typing',
                typing: typing,
                user: user_id,
                roomId: roomId,
            })
        );
    };

    const chatMessageTypingHandler = (event) => {
        if (event.keyCode !== 13) {
            if (!isTypingSignalSent) {
                sendTypingSignal(true);
                isTypingSignalSent = true;
            }
            clearTimeout(typingTimer);
            typingTimer = setTimeout(() => {
                sendTypingSignal(false);
                isTypingSignalSent = false;
            }, 3000);
        } else {
            clearTimeout(typingTimer);
            isTypingSignalSent = false;
        }
    };

    const Login = async () => {
        var email = document.getElementById('email').value
        var password = document.getElementById('password').value
        console.log(email, password)
        var loginCredentials = {
            email: email,
            password: password
        }
        var response_data
        await fetch('http://127.0.0.1:8000/accounts/login/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(loginCredentials)
        }).then((response) => {
            return response.json();
        }).then(data => {
            response_data = data
            setUser(response_data.user_id)
            localStorage.setItem('user_id', response_data.user_id)
        }).catch(error => {
            response_data = error
        });
    }

    return (
        <>
            {page === 'chat' ?
                <div className="w-fit mx-auto border border-black flex gap-0 flex items-center justify-center">
                    <div className="border border-r-black h-[550px] w-[200px]">
                        <div className="p-4 font-bold text-xl">Chats</div>
                        <hr></hr>
                        {chatRooms.length !== 0 ?
                            <>
                                {chatRooms.map((item, index) => (
                                    <>
                                        <div className={roomId === item.roomId ? "flex items-center justify-center m-4 px-4 py-1 rounded bg-red-300" : "flex m-4 px-4 py-1"}>
                                            <UserCircleIcon width={30} height={30} className="" />
                                            <div key={index}
                                                className={"text-xl w-[100px] px-2 py-[2px] cursor-pointer"}
                                                onClick={() => {
                                                    setRoomId(item.roomId);
                                                    console.log('room--------- ', roomId)
                                                }}
                                            >
                                                {String(item.member[0].id) === user ? item.member[1].first_name : item.member[0].first_name}
                                            </div>
                                        </div>
                                    </>
                                ))}
                            </>
                            : <div>
                            </div>
                        }
                    </div>
                    <div className="">
                        <div className="p-4 font-bold text-xl">Messages</div>
                        <div className="h-[450px]  flex flex-col gap-4 px-4 py-2">
                            <hr></hr>
                            {messages.length !== 0 ?
                                <div>
                                    {messages.map((data) => (
                                        <>
                                            <div className={String(data.user) === user_id ? "rounded px-4 text-wrap flex justify-end" : "rounded bg-gray-200 px-4 w-fit"} >
                                                <div className={String(data.user) === user_id ? "max-w-[50%] min-w-[50%] border px-4 my-1 text-right" : "my-1"}>
                                                    <div className="font-bold"> {data.userName}</div>
                                                    {data.message}
                                                </div>
                                            </div>
                                        </>
                                    ))}
                                </div>
                                : <div className="ml-[230px]">No messages</div>}
                        </div>
                        <div >
                            {typing && (
                                <>
                                    <div>typing...</div>
                                </>
                            )}
                        </div>
                        <div className="px-4 flex items-center gap-2">
                            <input
                                type="text"
                                className="border border-black rounded h-[30px] w-[450px]"
                                onChange={(event) => setInputMessage(event.target.value)}
                                onKeyUp={chatMessageTypingHandler}
                                value={inputMessage}
                            />
                            <button
                                id="send-btn"
                                className="px-4 bg-green-300 mx-4 rounded"
                                onClick={(e) => messageSubmitHandler(e)}
                            >Send</button>
                        </div>
                    </div>
                </div>
                :
                <div className="">
                    <div className=" w-fit mx-auto">
                        <div className="flex flex-col items-center my-10 gap-3">
                            <input id='email' type="text" placeholder="email" className="px-2 w-[300px] h-10 border border-black rounded" />
                            <input id='password' type="password" placeholder="password" className="px-2 w-[300px] h-10 border border-black rounded" />
                            <button
                                onClick={Login}
                                className="px-6 py-1 bg-black text-white rounded my-4"
                            >Login</button>
                        </div>
                    </div>
                </div>}
        </>
    )
}

A sample ChatScreen.js file can be found in the following git repository file.

messaging_app_react_frontend_example/src/Component/ChatScreen.js at main · episyche/messaging_app_react_frontend_example (github.com)

Update your App.js with the following code

import ChatScreen from "./Component/ChatScreen";

export default function App() {

  return (
    <div className="">
      <ChatScreen/>
    </div>
  );
}

A sample App.js file can be found in the following git repository file.

messaging_app_react_frontend_example/src/App.js at main · episyche/messaging_app_react_frontend_example (github.com)

Now run the React project using the following command

npm start

After running the above command, you will be redirected to the browser ( http://localhost:3000 )

Result:

You will get a login page, Login using your sample credentials which are created in the Backend creation step

After login redirected to the chat screen ( http://localhost:3000/chat )

Open another browser login using alternate credentials. Now you will get two screens and check messaging

When typing from one side, getting indications in another other side like the one below screenshot

After typing and sending a message, you will receive the other side

How to create a messaging application using Django and React ?