Créez Votre Application de Chat en Temps Réel avec Django et Django Channels

Créez Votre Application de Chat en Temps Réel avec Django et Django Channels

Introduction

    Dans le monde actuel, les aapplications en temps réel comme les chats en ligne, les notifications en direct, et les mises à jour instantanées sont de plus en plus populaires. Ces fonctionnalités améliorent considérablement l'expérience utilisateur et permettent des interactions dynamiques et immédiates. Pour les développeurs, cela représente une opportunité passionnante de créer des applications modernes et engageantes. Dans cet article, nous allons explorer comment créer une application de chat en temps réel en utilisant Django et Django Channels.

Pourquoi Utiliser Django Channels ?

    Django est un framework web populaire pour le développement de sites web robustes et évolutifs. Cependant, Django standard ne prend pas en charge les connexions asynchrones et WebSockets, nécessaires pour les applications en temps réel. C'est là que Django Channels entre en jeu. Django Channels étend les capacités de Django au-delà des requêtes HTTP pour inclure les WebSockets, les protocoles de chat, les protocoles IoT, et plus encore. Basé sur ASGI (Asynchronous Server Gateway Interface), Django Channels permet une programmation événementielle asynchrone puissante.

Prérequis

Avant de commencer, assurez-vous d'avoir les éléments suivants installés :

Django
Canaux Django
Un IDE de votre choix (comme VSCode ou PyCharm)

Étapes pour Créer Votre Application de Chat

1. Installer et Configurer Django
Commencez par créer un nouveau projet Django. Ouvrez votre terminal et tapez la commande suivante :

django-admin startproject ChatApp

Une fois le projet créé, naviguez dans le répertoire du projet :

cd ChatApp

2. Créer un Environnement Virtuel

Il est recommandé d'utiliser un environnement virtuel pour gérer vos dépendances. Créez un environnement virtuel et activez-le :


python -m venv env

Sur Windows utilisez  

env\Scripts\activate

sur Mac ou Linux utilisez:

source env/bin/activate  

3. Installer Django Channels et Daphne
Installez Django Channels et Daphne pour ajouter la prise en charge ASGI :


pip install -U channels daphne

4. Configurer les Applications Installées

Modifiez le fichier settings.py pour inclure daphne et channels dans la liste des applications installées :

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

Définissez également l'application ASGI dans settings.py :

ASGI_APPLICATION = 'ChatApp.asgi.application'

5. Configurer ASGI et Routing
Créez un fichier routing.py dans votre application de chat. Ce fichier définira les routes pour les WebSockets :


from django.urls import path
from chat.consumers import ChatConsumer
websocket_urlpatterns = [
    path("ws/chat/", ChatConsumer.as_asgi()),
]

Modifiez asgi.py pour inclure le routage des WebSockets :


import os
from django.core.asgi import get_asgi_application
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
import chat.routing
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ChatApp.settings')
application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

6. Créer une Nouvelle Application de Chat
Créez une nouvelle application Django pour gérer la fonctionnalité de chat :

python manage.py startapp chat

Ajoutez l'application de chat à INSTALLED_APPS dans settings.py :


INSTALLED_APPS += ['chat']
7. Configurer les Vues et les URLs
Créez des vues pour gérer l'affichage des pages de chat et de connexion. Dans chat/views.py :


from django.shortcuts import render, redirect
def chatPage(request, *args, **kwargs):
    if not request.user.is_authenticated:
        return redirect("login-user")
    context = {}
    return render(request, "chat/chatPage.html", context)
Configurez les URLs dans chat/urls.py :


from django.urls import path
from chat import views as chat_views
from django.contrib.auth.views import LoginView, LogoutView
urlpatterns = [
    path("", chat_views.chatPage, name="chat-page"),
    path("auth/login/", LoginView.as_view(template_name="chat/LoginPage.html"), name="login-user"),
    path("auth/logout/", LogoutView.as_view(), name="logout-user"),
]

Ajoutez les URLs de l'application de chat au projet principal dans ChatApp/urls.py :


from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include("chat.urls")),
]

8. Créer les Templates HTML

Créez les fichiers HTML pour les pages de chat et de connexion.

chat/templates/chat/chatPage.html :

<!DOCTYPE html>
<html>
  <body>
    <center><h1>Bonjour, Bienvenue sur mon site de chat ! {{ request.user }}</h1></center>
    <br>
    {% if request.user.is_authenticated %}
    <center> Déconnectez-vous de la page de chat <a href="{% url 'logout-user' %}">Logout</a></center>
    {% endif %}
    <div class="chat__item__container" id="id_chat_item_container" style="font-size: 20px">
      <br />
      <input type="text" id="id_message_send_input" />
      <button type="submit" id="id_message_send_button">Send Message</button>
      <br /><br />
    </div>
    <script>
      const chatSocket = new WebSocket("ws://" + window.location.host + "/ws/chat/");
      chatSocket.onopen = function (e) {
        console.log("La connexion a été établie avec succès !");
      };
      chatSocket.onclose = function (e) {
        console.log("Quelque chose d'inattendu s'est produit !");
      };
      document.querySelector("#id_message_send_input").focus();
      document.querySelector("#id_message_send_input").onkeyup = function (e) {
        if (e.keyCode == 13) {
          document.querySelector("#id_message_send_button").click();
        }
      };
      document.querySelector("#id_message_send_button").onclick = function (e) {
        const messageInput = document.querySelector("#id_message_send_input").value;
        chatSocket.send(JSON.stringify({ message: messageInput, username: "{{ request.user.username }}" }));
      };
      chatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        const div = document.createElement("div");
        div.innerHTML = data.username + " : " + data.message;
        document.querySelector("#id_message_send_input").value = "";
        document.querySelector("#id_chat_item_container").appendChild(div);
      };
    </script>
  </body>
</html>

chat/templates/chat/LoginPage.html :


<!DOCTYPE html>
<html>
<body>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <br>
        <button type="submit">Login</button>
    </form>
</body>
</html>

9. Configurer le Consommateur WebSocket

Créez un consommateur WebSocket pour gérer les connexions et la diffusion des messages. 

Dans chat/consumers.py :

import json
from channels.generic.websocket import AsyncWebsocketConsumer
class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_group_name = 'chat_room'
        await self.channel_layer.group_add(self.room_group_name, self.channel_name)
        await self.accept()
    
    async def disconnect(self, close_code):
        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']
        username = text_data_json['username']
        
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message,
                'username': username,
            }
        )
    
    async def chat_message(self, event):
        message = event['message']
        username = event['username']
        
        await self.send(text_data=json.dumps({'message': message, 'username': username}))
10. Configurer la Couche de Canal
Configurez la couche de canal dans settings.py pour utiliser InMemoryChannelLayer (pour le développement uniquement) :
python
Copier le code
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels.layers.InMemoryChannelLayer',
    }
}

Pour la production, utilisez Redis comme backend de couche de canal.
11. Créer des Super Utilisateurs et Tester l'Application

Créez des utilisateurs administrateurs pour tester l'application :


python manage.py createsuperuser

Configurez les URLs de redirection après connexion et déconnexion dans settings.py :


LOGIN_REDIRECT_URL = 'chat-page'
LOGOUT_REDIRECT_URL = 'login-user'

12. Migrer et Démarrer le Serveur

Appliquez les migrations et démarrez le serveur :


python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Ouvrez deux navigateurs différents, connectez-vous avec deux utilisateurs distincts et commencez à discuter !

Conclusion
Félicitations ! Vous avez créé une application de chat en temps réel avec Django et Django Channels. Cette application peut être étendue et personnalisée pour répondre à vos besoins spécifiques. En intégrant des fonctionnalités en temps réel, vous pouvez créer des applications modernes et interactives qui offrent une expérience utilisateur exceptionnelle. N'hésitez pas à explorer plus loin les capacités de Django Channels et à ajouter des fonctionnalités supplémentaires à votre application de chat.