acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-28 15:33:22 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
d37145b73e2012f21a329ee97a565189233ca0f8
n3wt-school/Front-End/docs/messagerie-instantanee.md
Luc SORIGNET d37145b73e feat: mise en place de la messagerie [#17]
2025-05-29 15:09:22 +02:00

3.5 KiB
Raw Blame History

Système de Messagerie Instantanée

Présentation

Le système de messagerie instantanée de N3WT-SCHOOL permet aux utilisateurs de l'établissement (administrateurs, professeurs, parents, étudiants) de communiquer en temps réel via une interface chat moderne et intuitive.

Fonctionnalités

Chat en Temps Réel

  • Envoi et réception de messages instantanés
  • Notification de statut de frappe (utilisateur en train d'écrire)
  • Indicateur de statut de connexion WebSocket
  • Reconnexion automatique en cas de perte de connexion

Gestion des Conversations

  • Liste des conversations existantes
  • Création de nouvelles conversations
  • Recherche de destinataires par nom ou email
  • Compteur de messages non lus

Interface Utilisateur

  • Interface moderne en deux panneaux (conversations + chat)
  • Bulles de messages différenciées (expéditeur/destinataire)
  • Indicateurs visuels de statut de connexion
  • Recherche temps réel de contacts

Utilisation

Accès au Chat

Le système de messagerie est accessible via les pages suivantes :

  • Parents : /[locale]/parents/messagerie
  • Administrateurs : Intégré dans le panneau d'administration

Créer une Conversation

  1. Cliquer sur le bouton "+" en haut à droite de la liste des conversations
  2. Rechercher un contact en tapant son nom ou email
  3. Sélectionner le destinataire dans les résultats
  4. La conversation se crée automatiquement

Envoyer un Message

  1. Sélectionner une conversation dans la liste de gauche
  2. Taper le message dans le champ de saisie en bas
  3. Appuyer sur Entrée ou cliquer sur le bouton d'envoi

Architecture Technique

Frontend (React/Next.js)

Composants principaux :

  • InstantChat : Composant principal du chat
  • ConnectionStatus : Affichage du statut de connexion
  • ConversationItem : Élément de liste de conversation
  • MessageBubble : Bulle de message individuelle
  • MessageInput : Zone de saisie de message
  • TypingIndicator : Indicateur de frappe

Hook personnalisé :

  • useWebSocket : Gestion de la connexion WebSocket et des événements

Backend (Django)

Module GestionMessagerie :

  • consumers.py : Consumer WebSocket pour la messagerie temps réel
  • routing.py : Configuration des routes WebSocket
  • urls.py : URLs API REST pour les conversations et messages

Module GestionEmail :

  • views.py : Vues pour l'envoi d'emails classiques
  • urls.py : URLs pour les fonctions email

Communication

  • WebSocket : Communication bidirectionnelle temps réel
  • REST API : Chargement initial des données et recherche
  • Channels : Gestion des groupes de conversation Django

Configuration

URLs WebSocket

Les URLs sont configurées automatiquement selon l'environnement :

  • Développement : ws://localhost:8000/ws/chat/
  • Production : wss://[domaine]/ws/chat/

Variables d'Environnement

Le système utilise les configurations standard de l'application pour :

  • Base de données (conversations, messages, utilisateurs)
  • Authentification (sessions Django)
  • Établissements (filtrage par établissement)

Sécurité

  • Authentification requise pour accéder au chat
  • Filtrage des conversations par établissement
  • Validation côté serveur de tous les messages
  • Gestion des permissions selon le rôle utilisateur

Tests

Le système dispose de tests unitaires Jest couvrant :

  • Rendu des composants
  • Gestion des connexions WebSocket
  • Recherche de contacts
  • Envoi de messages
  • Indicateurs de frappe

Exécution des tests :

npm test