Interface de Chat Instantané - CodeIgniter 3 + jQuery

📋 Description

Interface de chat en temps réel développée avec CodeIgniter 3 et jQuery, permettant aux utilisateurs d'échanger des messages instantanés.

✨ Fonctionnalités

• 💬 Chat en temps réel avec polling automatique (toutes les 2 secondes)
• 📝 Liste des conversations avec messages non lus
• 🔍 Recherche d'utilisateurs
• 👤 Interface utilisateur moderne type Facebook Messenger
• ✅ Marquage des messages comme lus
• 📱 Design responsive
• ⚡ Mise à jour automatique des conversations

📁 Structure des fichiers

application/
├── controllers/
│   └── Chat.php                 # Contrôleur principal
├── models/
│   └── Chat_model.php           # Modèle pour les opérations de base de données
└── views/
    └── chat/
        ├── header.php           # Header avec styles CSS
        ├── footer.php           # Footer
        ├── index.php            # Liste des conversations
        └── conversation.php     # Vue du chat individuel

🚀 Installation

1. Prérequis

• PHP 7.4 ou supérieur
• MySQL 5.7 ou supérieur
• CodeIgniter 3.x
• jQuery 3.6+
• Bootstrap 5.3+

2. Base de données

Exécutez le fichier update_database.sql pour créer/mettre à jour votre base de données :

-- Ajoute la colonne is_read à la table messages
-- Crée la table users si elle n'existe pas
-- Ajoute les index nécessaires pour les performances

3. Installation des fichiers

1. Copiez le contrôleur :

   • Chat.php → application/controllers/Chat.php

2. Copiez le modèle :

   • Chat_model.php → application/models/Chat_model.php

3. Copiez les vues :

   • chat_header.php → application/views/chat/header.php
   • chat_footer.php → application/views/chat/footer.php
   • chat_index.php → application/views/chat/index.php
   • chat_conversation.php → application/views/chat/conversation.php

4. Configuration CodeIgniter

Dans application/config/config.php, assurez-vous que :

$config['base_url'] = 'http://votre-domaine.com/';

Dans application/config/database.php, configurez votre connexion :

$db['default'] = array(
    'hostname' => '127.0.0.1',
    'username' => 'votre_user',
    'password' => 'votre_password',
    'database' => 'chat',
    // ...
);

5. Configuration des routes (optionnel)

Dans application/config/routes.php :

$route['chat'] = 'chat/index';
$route['chat/conversation/(:any)'] = 'chat/conversation/$1';

🔐 Authentification

Le système utilise les sessions CodeIgniter et votre table system_user existante :

1. Structure de la table utilisée :

   • uniqid : Identifiant unique de l'utilisateur (varchar 25)
   • first_name : Prénom de l'utilisateur
   • name : Nom de famille
   • email_address : Adresse email
   • profile_photo : Photo de profil (nullable)
   • status : Statut actif (1) ou inactif (0)

2. Session requise : Votre système d'authentification doit stocker user_id dans la session avec le uniqid de l'utilisateur :

// Lors de la connexion
$this->session->set_userdata('user_id', $user_uniqid);

3. Exemple avec vos données :

// Pour l'utilisateur Marina
$this->session->set_userdata('user_id', '6528fecfdf1d4');

// Pour l'utilisateur Nhoufy  
$this->session->set_userdata('user_id', '64ace95dd5e45');

📝 Utilisation

Accéder au chat

http://votre-domaine.com/chat

URLs disponibles

• GET /chat - Liste des conversations
• GET /chat/conversation/{contact_id} - Chat avec un contact
• POST /chat/send_message - Envoyer un message (AJAX)
• POST /chat/get_new_messages - Récupérer nouveaux messages (AJAX)
• POST /chat/get_unread_count - Compteur de messages non lus (AJAX)
• POST /chat/search_users - Rechercher des utilisateurs (AJAX)

🎨 Personnalisation

Modifier les couleurs

Dans header.php, modifiez les variables CSS :

:root {
    --primary-color: #0084ff;      /* Couleur principale */
    --secondary-color: #f0f2f5;    /* Couleur de fond */
    --text-color: #050505;         /* Couleur du texte */
    --border-color: #e4e6eb;       /* Couleur des bordures */
    --hover-color: #f2f3f5;        /* Couleur au survol */
}

Modifier la fréquence de polling

Dans conversation.php, ligne ~230 :

// Actuellement : 2 secondes
setInterval(pollNewMessages, 2000);

// Pour 5 secondes :
setInterval(pollNewMessages, 5000);

🔧 Fonctionnalités techniques

Polling automatique

Le système utilise une technique de polling pour récupérer les nouveaux messages :

• Toutes les 2 secondes pour les messages
• Toutes les 10 secondes pour les conversations

Optimisation des requêtes

• Index sur les colonnes fréquemment recherchées
• Limitation du nombre de messages chargés (50 par défaut)
• Cache des informations utilisateur

Sécurité

• Protection CSRF de CodeIgniter
• Échappement HTML des messages
• Validation des entrées utilisateur
• Requêtes préparées pour éviter les injections SQL

📱 Responsive Design

L'interface s'adapte automatiquement aux différentes tailles d'écran :

• Desktop : Vue complète avec panel latéral
• Mobile : Vue plein écran avec navigation

🐛 Dépannage

Les messages ne s'affichent pas

1. Vérifiez que jQuery est bien chargé
2. Ouvrez la console du navigateur (F12) pour voir les erreurs
3. Vérifiez que base_url() est correctement configuré

Erreur 404 sur les routes

1. Vérifiez le fichier .htaccess de CodeIgniter
2. Assurez-vous que mod_rewrite est activé

Les styles ne s'appliquent pas

1. Vérifiez que Bootstrap est bien chargé
2. Assurez-vous que Font Awesome est accessible

🔄 Améliorations possibles

• WebSocket pour le temps réel (au lieu du polling)
• Notifications push
• Envoi de fichiers et images
• Emojis et réactions
• Statut en ligne/hors ligne en temps réel
• Messages vocaux
• Groupes de discussion
• Chiffrement des messages
• Historique de conversation infini avec scroll

📄 Licence

Ce projet est libre d'utilisation pour vos projets personnels et commerciaux.

👨‍💻 Support

Pour toute question ou problème, n'hésitez pas à créer une issue.

---

Développé avec ❤️ pour la communauté CodeIgniter