Serveur HTTP

Le module http de Node.js permet de déployer un serveur HTTP avec quelques lignes de JavaScript. Néanmoins, pour faciliter la mise en place d'un tel serveur, nous allons nous appuyer sur un autre module.

Express

Express est un framework Web minimaliste pour Node.js qui se présente sous la forme d'une surcouche du module http, facilitant la gestion des routes (URLs)

Info

La pile Node.js + http + Express joue le même rôle qu'un serveur Web comme Apache ou nginx.

Après avoir installé Express, 

npm install express

Vous créerez un fichier server.js.

Mise en place de la route racine

Le fichier server.js importe les modules http et express afin d'initialiser le serveur HTTP. Il définit ensuite la route racine (/) afin de servir le fichier index.html. Si ce fichier n'est pas disponible, le serveur renvoie une réponse avec un code d'erreur 404. 

/*
 * server.js
 *
 */
let express = require('express')();
let http = require('http').createServer(express);
let fs = require('fs').promises;

express.get('/', (request, response) => {
  fs.readFile('./index.html')
    .then((content) => {
      // Writes response header
      response.writeHead(200, { 'Content-Type': 'text/html' });
      // Writes response content
      response.end(content);
    })
    .catch((error) => {
      // Returns 404 error: page not found
      response.writeHead(404, { 'Content-Type': 'text/plain' });
      response.end('Page not found.');
    });
});

// Server listens on port 8080
http.listen(8080);

Interface Web du client chat

Le fichier index.html contient l'interface du client chat. Il utilise le framework CSS Spectre.css afin de proposer une interface responsive. 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
  <style>
    #dialog {
      display: flex;
      flex-flow: column;
      align-items: stretch;
      height: 90vh;
    }

    #signin {
      flex: 0 1 auto;
    }

    .hidden {
      display: none;
    }

    #display {
      flex: 1 1 auto;
      overflow-y: scroll;
    }
  </style>
  <title>chat</title>
</head>

<body>
  <div class="container">
    <div id="dialog">
      <form name="signin" class="mt-2">
        <div class="input-group">
          <input name="nickname" type="text" class="form-input" placeholder="choose a nickname (16 characters max.)">
          <input type="submit" class="btn btn-primary input-group-btn" value="join">
        </div>
      </form>

      <div class="toast toast-error mt-2 hidden">
      </div>
      
      <form name="send" class="mt-2 hidden">
        <div class="input-group">
          <span class="input-group-addon hide-sm">raoul</span>
          <input name="message" type="text" class="form-input" placeholder="type your message here">
          <input type="submit" class="btn btn-primary input-group-btn" value="send">
        </div>
      </form>

      <div id="display" class="bg-gray p-2 mt-2">
      </div>

    </div>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="/client.js"></script>
</body>

</html>

L'interface du client est composée :

Interface client : page de connexion
Interface client : l'utilisateur o.nocent est connecté et peut envoyer des messages
Interface client : le pseudo o.nocent est déjà utilisé

Exercice

Ajoutez un attribut pattern au champ de saisie du formulaire #signin afin de limiter le pseudo à 16 caractères pris dans la liste suivante :

  • Lettres majuscules et minuscules
  • Chiffres
  • ., _ et -

Après avoir démarré votre serveur HTTP, 

node server.js

Vous pouvez le tester en saisissant l'adresse http://localhost:8080 dans votre navigateur Web.

Exercice

Créez une nouvelle route /client.js avec Express afin de servir le fichier client.js (avec le type MIME adéquat) qui contiendra le code JavaScript de l'interface Web du client chat.