💬 Chat en React avec Mercure (Real-Time Chat App)

Ce projet est une application de chat en temps réel moderne, développée en React (TypeScript + Vite) pour la partie frontend, et Node.js (Express + Mongoose) pour le backend. La communication en temps réel (messages et notifications) est gérée de manière ultra-performante par le protocole Mercure via Server-Sent Events (SSE).

---

🌟 Fonctionnalités

• 🔐 Authentification Sécurisée : Inscription et connexion avec hachage des mots de passe (Bcrypt) et tokens de session JWT.
• 🧑‍🤝‍🧑 Gestion des Contacts : Recherche d'utilisateurs par nom ou prénom et ajout/suppression d'amis en temps réel.
• 💬 Messagerie instantanée : Chat direct en un-contre-un avec défilement fluide et actualisation en temps réel via Mercure.
• 🔔 Notifications en direct : Un système global de notifications push SSE qui alerte instantanément les utilisateurs lorsqu'ils reçoivent un message hors d'une discussion active.
• 👥 Groupes de discussion : Possibilité de créer, rejoindre et quitter des groupes de chat.
• 🐳 Prêt pour le déploiement (Dockerized) : Architecture modulaire orchestrée avec Docker Compose comprenant le Frontend, le Backend, MongoDB et le Hub Mercure.

---

🏗️ Architecture Technique

graph TD
    Client1[React Client A] <-->|EventSource / SSE| Hub[Mercure Hub :3002]
    Client2[React Client B] <-->|EventSource / SSE| Hub
    Client1 -->|HTTP Rest API| API[Express API :3001]
    Client2 -->|HTTP Rest API| API
    API -->|Publish events| Hub
    API <-->|Mongoose ODM| DB[(MongoDB)]

Loading

---

⚙️ Configuration

1. Configuration des variables d'environnement

Avant de lancer le projet, vous devez copier les fichiers d'exemple .env.example dans des fichiers .env réels pour le frontend et le backend.

Backend (/backend/.env)

Créez le fichier /backend/.env :

PORT=3001
MONGODB_URI=mongodb://mongodb:27017/chat-mercure
MERCURE_PUBLISH_URL=http://mercure/.well-known/mercure
MERCURE_JWT_SECRET=!ChangeThisMercureHubJWTSecretKey!

(Remarque : Si vous exécutez le backend localement sans Docker, remplacez mongodb://mongodb par mongodb://localhost et http://mercure par http://localhost:3002).

Frontend (/frontend/.env)

Créez le fichier /frontend/.env :

VITE_REACT_APP_API_URL=http://localhost:3001

---

🚀 Utilisation

Option A : Avec Docker Compose (Recommandé)

Docker Compose s'occupe de compiler et démarrer l'ensemble de la pile technique (Frontend, Backend, Base de données et Hub Mercure).

1. Lancez la commande suivante à la racine du projet :

   docker-compose up --build

2. Accédez aux services :
   • 🌐 Frontend : http://localhost:3000
   • ⚙️ Backend API : http://localhost:3001
   • 📡 Mercure Hub : http://localhost:3002

---

Option B : Lancement manuel (Sans Docker)

Pour exécuter le projet localement sans conteneurs, vous devez avoir Node.js installé et lancer un hub Mercure indépendant.

1. Démarrer le Hub Mercure

Vous pouvez télécharger et exécuter le binaire Mercure officiel (ou utiliser Docker uniquement pour le Hub) :

docker run -e MERCURE_PUBLISHER_JWT_KEY='!ChangeThisMercureHubJWTSecretKey!' -e MERCURE_SUBSCRIBER_JWT_KEY='!ChangeThisMercureHubJWTSecretKey!' -e MERCURE_EXTRA_DIRECTIVES="cors_origins *\npublish_allowed_origins *" -p 3002:80 dunglas/mercure

2. Démarrer le Backend

cd backend
npm install
npm start

3. Démarrer le Frontend

cd frontend
npm install
npm run dev

---

📡 Fonctionnement de Mercure

1. Souscription (Client) : Le client React s'abonne aux flux en temps réel via l'API standard EventSource du navigateur :
   • Pour les conversations : http://localhost:3002/.well-known/mercure?topic=http://localhost:3001/conversations/{conversationId}
   • Pour les notifications : http://localhost:3002/.well-known/mercure?topic=http://localhost:3001/notifications/{userId}
2. Publication (Serveur) : Lors de l'envoi d'un message, le backend Node.js publie une requête HTTP POST signée avec un token JWT secret vers le Hub Mercure. Le Hub diffuse alors immédiatement l'événement à tous les clients abonnés.

---

👥 Auteurs

Ce projet a été développé dans le cadre d'un cours d'ingénierie web à l'HETIC par :

• Achraf CHARDOUDI
• Lyes DJAOUT

---

📄 Licence

Ce projet est sous licence académique HETIC.