mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-29 16:03:21 +00:00
127 lines
3.5 KiB
Markdown
127 lines
3.5 KiB
Markdown
# 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 :
|
|
|
|
```bash
|
|
npm test
|
|
```
|