Real Time Chat Box Using Django

Real-time chat is virtually any online communication that provides a real-time or live transmission of text messages from sender to receiver

What is the difference between real-time chat application and traditional chat application ? Unlike most traditional chat apps, the real-time chat application does not save your chat messages in the database before passing it to other client.

In real-time chat we can see that messaging is faster than the normal one. The traditional messaging system saves your messages in the database, so every time you need your messages, you have to query to the database to get them. but in real time chat sender send message to receiver and before save the message in database it send the message to user and than saves the message in database. In somecase its receiver option to save the message in the database like in snapchat, but if message is not save in the database than user can only see the message untill he/she refresh or restart the application

In this blog we are going to create a simple real time chat box using django and ajax.

In this blog we will build a simple chat server. It will have two pages:

• An home view where we type chat room name to join a particular room
• A room view where you messages posted in a particular room

Basic Setup:

Create project:

django-admin startproject mysite

Create app:

python3 manage.py startapp chat

We need to register our chat app in the setting.py.

INSTALLED_APPS = [
'chat',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]

Add the index view

chat/
__init__.py
templates/
    home.html
views.py

Add the following code in templates/home.html. This is the basically the front end code that tell how our page looks like. Our main aim is to learn how the real-time chat box work not the front end design so we keep the design a simple.

Create the view function for the room view. Put the following code in chat/views.py. This code is used to render the home page when we call this function.

In url include the following code. In this when we hit the url than it call home function and it render the home page.

Create a new file chat/templates/room.html. Your app directory should now look like:

chat/
__init__.py
templates/
    home.html
    room.html
urls.py
views.py

Create the view template for the room view in chat/templates/room.html. In this view we use ajax so that program run in backend without reload the page.

Create the route for the room view in chat/urls.py

So if we test now in two windows, we should be able to talk to eachother. The problem now is that if we refresh, the messages are gone. Or if you open one more window, the messages is also gone. To fix this, we need to store the messages in a database.

And we need to add them to the template:

{% for message in messages %}
<b>{{ message.username }}</b>: {{ message.content }}<br>
{% endfor %}

So now we get the messages there, but we also need to store them on database when message send.

so this is the complete steps to make real time django application using django and ajax.