Repondre au client : au-dela du texte brut

Jusqu'à présent, nos exemples de réponses Express utilisaient principalement `res.send()` avec du texte brut. Si cela est suffisant pour des exemples simples, les applications web et API réelles nécessitent d'envoyer des données dans des formats plus structurés, notamment JSON (JavaScript Object Notation) pour les API et HTML (HyperText Markup Language) pour les pages web.

Express.js facilite grandement l'envoi de ces différents types de réponses grâce à des méthodes dédiées sur l'objet `response` (`res`). Ces méthodes gèrent non seulement l'envoi des données mais s'occupent également de définir automatiquement l'en-tête `Content-Type` approprié, ce qui est crucial pour que le client (navigateur ou autre) interprète correctement la réponse reçue.

Envoyer du JSON : `res.json()`

JSON est devenu le format de données standard pour les API web RESTful et pour la communication entre les frontends JavaScript (comme React, Angular, Vue) et les backends Node.js. Il représente les données sous forme d'objets et de tableaux JavaScript.

Express fournit la méthode `res.json([body])` spécifiquement pour envoyer des réponses JSON. Cette méthode fait deux choses importantes :

1. Elle prend un objet JavaScript, un tableau, ou toute valeur sérialisable en JSON (chaîne, nombre, booléen, null) en argument.
2. Elle convertit automatiquement cette valeur en une chaîne JSON valide en utilisant `JSON.stringify()`.
3. Elle définit l'en-tête `Content-Type` de la réponse à `application/json`.
4. Elle envoie ensuite la chaîne JSON résultante comme corps de la réponse et termine la réponse (équivalent à `res.send(JSON.stringify(body))` avec le bon header).

Utiliser `res.json()` est la manière la plus propre et la plus idiomatique d'envoyer du JSON avec Express.

Exemple d'une route d'API renvoyant des données utilisateur en JSON :

const express = require('express');
const app = express();

// Simuler une base de données d'utilisateurs
const users = {
  '1': { id: 1, name: 'Alice', email: 'alice@example.com' },
  '2': { id: 2, name: 'Bob', email: 'bob@example.com' }
};

// Route pour récupérer tous les utilisateurs
app.get('/api/users', (req, res) => {
  // Convertir l'objet users en tableau pour l'envoi
  const userList = Object.values(users);
  res.json(userList); // Envoie directement le tableau en JSON
});

// Route pour récupérer un utilisateur spécifique
app.get('/api/users/:userId', (req, res) => {
  const userId = req.params.userId;
  const user = users[userId];

  if (user) {
    res.json(user); // Envoyer l'objet utilisateur trouvé en JSON
  } else {
    // Utiliser res.status() pour définir le code avant d'envoyer le JSON d'erreur
    res.status(404).json({ error: 'Utilisateur non trouvé' });
  }
});

app.listen(3000, () => console.log('Serveur API démarré...'));
// Testez avec http://localhost:3000/api/users et http://localhost:3000/api/users/1

Lorsque vous testez ces URL dans votre navigateur (ou avec `curl`), vous verrez que l'en-tête `Content-Type` de la réponse est bien `application/json` et que le corps est une chaîne JSON valide.

Envoyer du HTML : `res.send()` et `res.sendFile()`

Pour renvoyer du HTML au client, vous avez plusieurs options avec Express :

1. `res.send()` avec une chaîne HTML :

La méthode `res.send()` est polyvalente. Si vous lui passez une chaîne de caractères qui ressemble à du HTML (commence par `<`), Express définira automatiquement l'en-tête `Content-Type` à `text/html`.

C'est utile pour des réponses HTML très simples ou générées dynamiquement directement dans le code.

app.get('/simple-html', (req, res) => {
  const name = req.query.name || 'Visiteur';
  const htmlResponse = `
    
    
    
    
      
Bonjour, ${name} !
      
Ceci est une réponse HTML simple.
    
    
  `;
  res.send(htmlResponse); // Content-Type sera mis à text/html
});

Cependant, construire des pages HTML complexes sous forme de chaînes dans le code devient rapidement ingérable.

2. `res.sendFile(path, [options], [callback])` : Envoyer un fichier HTML statique

Si vous avez des fichiers HTML statiques (par exemple, `index.html`, `about.html`) que vous souhaitez servir directement, la méthode `res.sendFile()` est la solution idéale. Elle lit le contenu du fichier spécifié et le streame vers le client. Elle déduit également le `Content-Type` approprié en fonction de l'extension du fichier.

Important : Pour des raisons de sécurité, `res.sendFile()` nécessite que vous fournissiez un chemin absolu vers le fichier, ou que vous spécifiiez une option `root` indiquant le répertoire racine à partir duquel le chemin relatif doit être résolu.

const express = require('express');
const path = require('path'); // Importer le module path
const app = express();

// Route pour servir le fichier index.html
app.get('/', (req, res) => {
  // Construire le chemin absolu vers index.html
  const filePath = path.join(__dirname, 'public', 'index.html'); 
  // __dirname: répertoire du fichier JS actuel
  // Supposons que index.html est dans un sous-dossier 'public'

  res.sendFile(filePath, (err) => {
    if (err) {
      console.error('Erreur envoi fichier:', err);
      // Gérer l'erreur (ex: fichier non trouvé)
      // Important: vérifier si les headers n'ont pas déjà été envoyés
      if (!res.headersSent) {
         res.status(err.status || 500).send('Erreur lors de la récupération du fichier');
      }
    }
  });
});

// Route pour servir une autre page
app.get('/contact', (req, res) => {
  // Utilisation de l'option 'root'
  res.sendFile('contact.html', { root: path.join(__dirname, 'public') }, (err) => {
     if (err) { /* ... gestion erreur ... */ }
  });
});

app.listen(3000, () => console.log('Serveur démarré...'));
// Assurez-vous d'avoir un dossier 'public' avec index.html et contact.html dedans

Note sur `express.static()` : Pour servir un grand nombre de fichiers statiques (HTML, CSS, JS, images) depuis un répertoire (comme `public`), il est beaucoup plus efficace et pratique d'utiliser le middleware intégré `express.static()`. `res.sendFile()` est plutôt destiné à envoyer des fichiers spécifiques de manière programmatique.

// Utilisation recommandée pour les assets statiques
app.use(express.static(path.join(__dirname, 'public')));
// Maintenant, si un fichier existe dans 'public', Express le servira automatiquement.
// Une requête GET /style.css servira public/style.css
// Une requête GET / servira public/index.html (si l'option index est activée, par défaut)

Choisir la bonne methode

En résumé :

• Utilisez `res.json()` pour envoyer des données structurées (objets, tableaux) aux clients d'API ou aux applications frontend JavaScript. C'est la méthode standard pour les API RESTful.
• Utilisez `res.send()` pour des réponses textuelles simples ou pour envoyer des chaînes HTML générées dynamiquement (pour des cas simples).
• Utilisez `res.sendFile()` pour envoyer un fichier spécifique (HTML ou autre) depuis le serveur de manière programmatique, en fournissant un chemin absolu ou l'option `root`.
• Utilisez le middleware `express.static()` pour servir efficacement l'ensemble des fichiers statiques d'un répertoire.

Pour générer dynamiquement des pages HTML complexes côté serveur, on utilise généralement des moteurs de template avec `res.render()`, ce que nous aborderons dans la section suivante.