Exercices Chat Node.js

Exercice - Création d'un chat#

Partie serveur:

let fs   = require('fs');
let http = require('http').createServer(function (req, res) {
  fs.readFile(__dirname + '/index.html',
    function (err, data) {
      if (err) {
        res.writeHead(500);
        return res.end('Error loading index.html');
      }

      res.writeHead(200);
      res.end(data);
    }
  );
});
let io   = require('socket.io')(http);

http.listen(80);

io.on('connection', function (socket) {
  socket.emit('welcome', { message: 'Vous êtes connecté au chat !' });
  socket.on('message', function (data) {
    console.log('Message: ' + data);
    socket.broadcast.emit('message', {message: data});
  });
});

Partie cliente:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
    </style>
  </head>
<body>
  <h1>CHAT</h1>
  <div id="websocket">
    <form action="#" id="chatbox" >
      <input type="text" name="message" placeholder="Votre message" />
      <input type="submit" />
    </form>
    <div id="messages"></div>
  </div>
  <script src="/socket.io/socket.io.js"></script>
  <script>
  let socket = io('http://localhost');
  socket.on('welcome', function (data) {
    afficheMessage(data.message);
  });
  socket.on('message', function (data) {
    afficheMessage(data.message);
  });
  let form = document.getElementById('chatbox');
  form.addEventListener('submit', function (e) {
    socket.emit('message', form.elements['message'].value);
    afficheMessage(form.elements['message'].value);
    form.elements['message'].value = '';
    e.preventDefault();
  });

  function afficheMessage (msg) {
    let message = document.createElement('p');
    message.innerHTML = msg;
    document.getElementById('messages').appendChild(message);
  }
  </script>
</body>
</html>

Le code est basé sur socket.io, un module Node.js qui permet de gérer les WebSockets de manière simplifiée. Avant toute chose, il faut donc l'installer via npm (gestionnaire de modules Node.js), via la ligne de commande, déplacez-vous dans votre dossier, puis :

$ npm install socket.io

Pour lancer le serveur Node.js :

$ node server.js

Affichez la page http://localhost dans plusieurs onglets et/ou plusieurs navigateurs. Améliorez le chat:

Demandez le nom de la personne avant connection au chat
Modifiez les messages pour afficher le nom
Affichez un message quand les personnes se connectent ou se déconnectent
Ajoutez la fonctionnalité ("un utilisateur est en train de taper")