Création du client (frontend) avec HTML, CSS et JavaScript

L'interface utilisateur : interagir avec le serveur de chat

Maintenant que notre serveur Node.js est prêt à gérer les connexions WebSocket grâce à Socket.IO, nous avons besoin d'une interface côté client pour permettre aux utilisateurs d'interagir avec le système de chat. Cette interface sera une simple page web construite avec les technologies de base du frontend : HTML pour la structure, CSS pour un minimum de style, et JavaScript pour la logique de communication avec notre serveur.

Le rôle principal du client JavaScript sera d'établir une connexion Socket.IO avec le serveur dès le chargement de la page, d'envoyer les messages saisis par l'utilisateur au serveur, et d'écouter les messages entrants diffusés par le serveur pour les afficher dans la zone de conversation. Nous allons garder cette interface très simple pour nous concentrer sur les mécanismes de communication temps réel.

Structure HTML de base

Créons un fichier `index.html` à la racine de notre projet (ou dans un sous-dossier `public` si vous prévoyez de le servir via Express). Ce fichier contiendra la structure de base de notre interface :

    
    


    
 

    

        
        Envoyer
    

    
    
    
    
    
    

Points importants :

• Une liste non ordonnée (`
  `) avec l'id `messages` servira à afficher les messages entrants.
  • Un formulaire (`
    `) avec un champ de saisie (``) et un bouton d'envoi (``).
  • L'inclusion de la bibliothèque client Socket.IO (`/socket.io/socket.io.js`). Lorsque vous utilisez Socket.IO côté serveur avec Express, Socket.IO expose automatiquement la bibliothèque client sur cette URL.
  • L'inclusion de notre propre fichier JavaScript client (`client.js`) où nous écrirons notre logique.
  • Nous lions un fichier `style.css` pour la mise en forme.

Mise en forme minimale avec CSS

Créons un fichier `style.css` (au même niveau que `index.html` ou dans le dossier `public`) avec quelques styles de base pour rendre l'interface utilisable :

body {
    margin: 0; 
    padding-bottom: 3rem; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
}

#form {
    background: rgba(0, 0, 0, 0.15); 
    padding: 0.25rem; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    display: flex; 
    height: 3rem; 
    box-sizing: border-box; 
    backdrop-filter: blur(10px); 
}

#input {
    border: none; 
    padding: 0 1rem; 
    flex-grow: 1; 
    border-radius: 2rem; 
    margin: 0.25rem; 
}

#input:focus {
    outline: none; 
}

#form > button {
    background: #333; 
    border: none; 
    padding: 0 1rem; 
    margin: 0.25rem; 
    border-radius: 3px; 
    outline: none; 
    color: #fff; 
}

#messages {
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}

#messages > li {
    padding: 0.5rem 1rem; 
}

#messages > li:nth-child(odd) {
    background: #efefef; 
}

Ce CSS fixe le formulaire en bas de la page et ajoute un style minimaliste aux messages et aux éléments du formulaire.

Logique JavaScript Client : Connexion et Envoi de Messages

Créons maintenant le fichier `client.js` (au même niveau que `index.html` ou dans `public`). C'est ici que la magie opère.

Tout d'abord, nous initialisons la connexion Socket.IO au serveur. L'URL doit correspondre à l'adresse et au port de notre serveur Node.js (par exemple `http://localhost:3001`). La fonction `io()` (fournie par la bibliothèque client Socket.IO) établit la connexion.

// client.js

// Se connecter au serveur Socket.IO (adaptez l'URL si nécessaire)
const socket = io('http://localhost:3001'); 

// Récupérer les éléments du DOM
const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');

// Gérer l'envoi du formulaire
form.addEventListener('submit', function(e) {
  e.preventDefault(); // Empêcher le rechargement de la page
  if (input.value) { // Si le champ n'est pas vide
    // Emettre l'événement 'chat message' vers le serveur avec le contenu du message
    socket.emit('chat message', input.value);
    input.value = ''; // Vider le champ de saisie
  }
});

Ce code établit la connexion et configure l'envoi : quand le formulaire est soumis, il empêche le comportement par défaut, prend la valeur de l'input, et l'envoie au serveur via l'événement `socket.emit('chat message', ...)`. Ensuite, il vide le champ de saisie.

Logique JavaScript Client : Réception et Affichage des Messages

L'autre partie essentielle du client est d'écouter les messages entrants du serveur et de les afficher.

Nous utilisons `socket.on('nom_evenement', callback)` pour écouter les événements émis par le serveur. Dans notre cas, nous écoutons l'événement `chat message` que nous avons défini.

// client.js (suite)

// Ecouter l'événement 'chat message' venant du serveur
socket.on('chat message', function(msg) {
  // Créer un nouvel élément de liste pour le message
  const item = document.createElement('li');
  item.textContent = msg; // Afficher le contenu du message
  
  // Ajouter le message à la liste des messages
  messages.appendChild(item);
  
  // Faire défiler la fenêtre vers le bas pour voir le dernier message
  window.scrollTo(0, document.body.scrollHeight);
});

// (Optionnel) Gérer les événements de connexion/déconnexion
socket.on('connect', () => {
    console.log('Connecté au serveur ! ID:', socket.id);
    // Vous pourriez afficher un message système ici
});

socket.on('disconnect', () => {
    console.log('Déconnecté du serveur.');
    // Afficher un message système
});

Ce code écoute les messages (`chat message`). Quand un message est reçu, il crée un nouvel élément `

Mise en place et Test

Pour tester, vous avez deux options principales :

1. Ouvrir le fichier `index.html` directement : Double-cliquez sur le fichier `index.html` dans votre explorateur de fichiers. Votre navigateur l'ouvrira.
2. Servir les fichiers statiques via Express : Modifiez légèrement votre `server.js` pour servir les fichiers statiques du répertoire courant (ou du dossier `public`).

   // server.js (ajout avant la gestion des routes)
   const path = require('path'); // N'oubliez pas d'importer path
   app.use(express.static(path.join(__dirname, '.'))); // Servir les fichiers du répertoire courant
   // ou app.use(express.static(path.join(__dirname, 'public'))); si dans un dossier public

   Redémarrez votre serveur Node.js (`npm run dev`) et allez sur `http://localhost:3001` dans votre navigateur.

Assurez-vous que votre serveur Node.js (`server.js`) est en cours d'exécution. Ouvrez la page `index.html` dans deux onglets ou fenêtres de navigateur différents. Vous devriez pouvoir envoyer des messages depuis une fenêtre et les voir apparaître dans les deux fenêtres instantanément. Vérifiez également la console de votre serveur Node.js pour voir les logs de connexion/déconnexion.

Vous avez maintenant un client et un serveur de chat fonctionnels qui communiquent en temps réel grâce à Node.js et Socket.IO ! L'étape suivante consiste à améliorer la logique côté serveur pour gérer la diffusion des messages.