TP - page de discussions¶

// fonction qui envoie tout ce qu'il faut pour afficher un message
exports.chargement_messages = function(
  id_discussion,
  mysql,
  sql,
  tout_charger,
  callback) {

    // requête SQL pour vérifier si la discussion existe
    var requete_sql = '\
      SELECT id_discussion\
      FROM discussions\
      WHERE id_discussion = ?';
    var inserts = [id_discussion];
    requete_sql = sql.preparer(mysql, requete_sql, inserts);

    sql.requete(mysql, sql, requete_sql, function(results) {

      // nous vérifions si la variable results[0] contient l'id de discussion
      if (!results[0]) {
        // retourne false à l'argument discussion_existante
        // ceci est ensuite traité par routes.js et envoie une page d'erreur
        callback(false);

      } else {
        // nous récupérons le sujet de la discussion
        sql.sujet_discussion(mysql, sql, id_discussion,
          function(sujet_discussion) {

            // une fois que nous l'avons, nous récupérons tous les messages
            var requete_sql = '\
              SELECT\
                messages.id_message AS "id_message",\
                messages.nom_utilisateur AS "nom_utilisateur",\
                messages.contenu AS "contenu",\
                messages.date_ecriture AS "date_ecriture",\
                messages.date_modification AS "date_modification",\
                messages.id_discussion AS "id_discussion",\
                messages.likes AS "likes",\
                users.avatar AS "avatar"\
              FROM users, messages\
              WHERE messages.id_discussion = ?\
              AND messages.nom_utilisateur = users.nom_utilisateur\
              ORDER BY messages.date_ecriture';

            // si nous ne voulons que le dernier message...
            if (!tout_charger) {
              var requete_sql += ' DESC LIMIT 0,1';
            }

            var inserts = [id_discussion];
            requete_sql = sql.preparer(mysql, requete_sql, inserts);

            sql.requete(mysql, sql, requete_sql, function(results) {
              // enfin, nous pouvons envoyer le sujet de discussion et les messages
              callback(true, sujet_discussion, results);
            });
          }
        );
      }
    }
  );
}

// fonction qui renvoie le sujet d'une discussion à partir d'une discussion
exports.sujet_discussion = function(mysql, sql, id_discussion, callback) {
  var requete_sql = 'SELECT sujet FROM discussions WHERE id_discussion = ?';
  var inserts = [id_discussion];
  requete_sql = sql.preparer(fmysql, requete_sql, inserts);

  sql.requete(mysql, sql, requete_sql, function(results) {
    callback(results[0].sujet);
  });
}

// publication d'un nouveau message
socket.on('nouveau_message', function (message) {
  var requete_sql = '\
    INSERT INTO messages(nom_utilisateur, contenu, date_ecriture, id_discussion, likes)\
    VALUES(??, ??, NOW(), ?, 0)';
  var inserts = [
    message.nom_utilisateur,
    message.contenu,
    message.id_discussion
  ];
  requete_sql = sql.preparer(mysql, requete_sql, inserts);
  sql.requete(mysql, sql, requete_sql);
  /* la concaténation de 'charger_dernier_message' avec l'id de la discussion
  permet d'éviter que le message se charge chez tous les utilisateurs
  ayant une discussion ouverte */
  socket.emit('charger_dernier_message'+message.id_discussion);
  socket.broadcast.emit('charger_dernier_message'+message.id_discussion);
});

// modifie un message dans la base de données
socket.on('modification_message', function (d) {
  var requete_sql = '\
    UPDATE messages SET contenu = ??, date_modification=NOW() WHERE id_message = ?';
  var inserts = [d.contenu.replace(/'/g, "\\'"), d.id_message];
  requete_sql = sql.preparer(mysql, requete_sql, inserts);
  sql.requete(mysql, sql, requete_sql, function(results) {
    var requete_sql = '\
      SELECT * FROM messages WHERE id_message = ?';
    var inserts = [d.id_message];
    requete_sql = sql.preparer(mysql, requete_sql, inserts);
    sql.requete(mysql, sql, requete_sql, function(results) {
      socket.emit('update_message'+d.id_discussion, {
        id_message : results[0].id_message,
        date_modification : results[0].date_modification,
        contenu : results[0].contenu
      });
      socket.broadcast.emit('update_message'+d.id_discussion, {
        id_message : results[0].id_message,
        date_modification : results[0].date_modification,
        contenu : results[0].contenu
      });
    });
  });
});

// supprime le message (dans la base de données)
socket.on('suppression_message_serveur', function (r) {
  var requete_sql = 'DELETE FROM messages WHERE id_message = ?';
  var inserts = [r.id_message];
  requete_sql = sql.preparer(mysql, requete_sql, inserts);
  sql.requete(mysql, sql, requete_sql);
  socket.emit('suppression_message_client_'+r.id_discussion, r.id_message);
  socket.broadcast.emit('suppression_message_client_'+r.id_discussion, r.id_message);
});

/* ajoute un "like" à un message tout en vérifiant que l'utilisateur
n'aie pas déjà aimé le message (chaque utilisateur ne peut aimer qu'une
seule fois un message) */
socket.on('like_message', function(d) { // id_message, nom_utilisateur
  if (d.nom_utilisateur !== 'session inexistante') {
    var requete_sql = 'SELECT nom_utilisateur FROM likes WHERE id_message = ?';
    var inserts = [d.id_message];
    requete_sql = sql.preparer(mysql, requete_sql, inserts);
    sql.requete(mysql, sql, requete_sql, function(results) {
      for (var i = 0; i < results.length; i++) {
        if (results[i].nom_utilisateur === d.nom_utilisateur) {
          var deja_like = true;
          return;
        }
      }
      if (!deja_like) {
        var requete_sql = 'SELECT likes FROM messages WHERE id_message = ?';
        requete_sql = sql.preparer(mysql, requete_sql, inserts);
        sql.requete(mysql, sql, requete_sql, function(results) {
          var likes_actuels = results[0].likes + 1;
          var requete_sql = 'UPDATE messages SET likes = ? WHERE id_message = ?';
          var inserts = [likes_actuels, d.id_message];
          requete_sql = sql.preparer(mysql, requete_sql, inserts);
          sql.requete(mysql, sql, requete_sql);

          var requete_sql = '\
            INSERT INTO likes(id_message, nom_utilisateur) VALUES (?, ??)';
          var inserts = [d.id_message, d.nom_utilisateur];
          requete_sql = sql.preparer(mysql, requete_sql, inserts);
          sql.requete(mysql, sql, requete_sql);

          socket.emit('update_likes'+d.id_discussion, {
            id_message : d.id_message,
            nombre_likes : likes_actuels
          });
          socket.broadcast.emit('update_likes'+d.id_discussion, {
            id_message : d.id_message,
            nombre_likes : likes_actuels
          });
        });
      }
    });
  }
});

var id_discussion = window.location.href.replace(/.+\/([0-9]+)/, '$1');

/* fonction permettant de formatter les guillemets simples et doubles
ainsi que les backslash pour éviter un bug lors de la requête SQL */
function echap(chaine) {
  return chaine
    .replace(/"/g, "#g_doubles")
    .replace(/'/g, "#g_simples")
    .replace(/\\/g, "#backslash")
}

// fonction qui réalise l'inverse de la précédente
function unechap(chaine) {
  return chaine
    .replace(/#g_doubles/g, '"')
    .replace(/#g_simples/g, "'")
    .replace(/#backslash/g, "\\");
}

function publier_message(nom_utilisateur) {
  if (tinyMCE.get('emplacement_nouveau_message').getContent() !== '') {
    socket.emit('nouveau_message', {
     nom_utilisateur : nom_utilisateur,
     contenu : echap(tinyMCE.get('emplacement_nouveau_message').getContent()),
     id_discussion : id_discussion
    });
    tinyMCE.get('emplacement_nouveau_message').setContent('');
  }
}

function supprimer_message(id_message) {
  socket.emit('suppression_message_serveur', {
    id_discussion : id_discussion,
    id_message : id_message
  });
}

/* "like" d'un message
à noter que cette fonction envoie également le nom d'utilisateur
pour l'insérer dans la table "likes" de la base de données
et ainsi éviter qu'un utilisateur puisse aimer 2X un message */
function aimer(id_message, nom_utilisateur) {
  socket.emit('like_message', {
    id_message : id_message,
    nom_utilisateur : nom_utilisateur,
    id_discussion : id_discussion
  });
}

/* retourne simplement l'objet javascript de la classe "zone_message"
à partir d'un objet contenant une propriété "id_message" */
function zone_message(classe, d) {
  return byId(d.id_message)
    .getElementsByClassName('zone_message')[0]
    .getElementsByClassName(classe)[0];
}

/* affiche l'éditeur TinyMCE à la place du contenu du message
masque le bouton "modifier" et affiche le bouton "enregistrer" */
function modifier_message(id_message) {
  var d = { id_message : id_message };
  byId(id_message+'_bouton_modifier').style.display = 'none';
  byId(id_message+'_bouton_modifier_mobile').style.display = 'none';
  byId(id_message+'_bouton_enregistrer').style.display = 'block';
  byId(id_message+'_bouton_enregistrer_mobile').style.display = 'inline';
  zone_message('affichage', d).style.display = 'none';
  zone_message('editeur', d).style.display = 'block';
  // récupère l'ID aléatoire de TinyMCE
  var id_tinymce = zone_message('editeur', d).getElementsByTagName('textarea')[0].id;
  init_editeur(id_tinymce);
}

/* enregistre le message, envoie un événement socket, masque le bouton "enregistrer",
affiche le bouton "modifier". A noter que le message est modifié sur la page une
fois que socket.io retourne l'événement "update_message" */
function enregistrer_message(id_message) {
  var d = { id_message : id_message };
  byId(id_message+'_bouton_modifier').style.display = 'block';
  byId(id_message+'_bouton_modifier_mobile').style.display = 'inline';
  byId(id_message+'_bouton_enregistrer').style.display = 'none';
  byId(id_message+'_bouton_enregistrer_mobile').style.display = 'none';
  zone_message('affichage', d).style.display = 'block';
  zone_message('editeur', d).style.display = 'none';
  var id_tinymce = zone_message('editeur', d).getElementsByTagName('textarea')[0].id;
  socket.emit('modification_message', {
    contenu: echap(tinyMCE.get(id_tinymce).getContent()),
    id_message: id_message,
    id_discussion : id_discussion
  });
}

/* télécharge le dernier message à l'aide d'une requête AJAX
s'exécute lorsqu'un utilisateur a publié un message sur la discussion */
socket.on('charger_dernier_message'+id_discussion, function() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'dernier_'+id_discussion);
  xhr.addEventListener('readystatechange', function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      byId('messages').innerHTML += xhr.responseText;
      var dates_ecriture = byId('messages').getElementsByClassName('date_ecriture');
      var id = dates_ecriture[dates_ecriture.length-1]
        .getElementsByTagName('span')[0].id;
      convertir_date(Date.now(), id);
    }
  });
  xhr.send(null);
});

// supprime un message du côté client
socket.on('suppression_message_client_'+id_discussion, function(id_message) {
  byId(id_message).style.display = 'none';
});

// met à jour les likes d'un message
socket.on('update_likes'+id_discussion, function(m) {
  byId(m.id_message).getElementsByClassName('likes')[0].innerHTML = m.nombre_likes;
  byId(m.id_message).getElementsByClassName('likes')[1].innerHTML = m.nombre_likes;
})

/* met à jour le contenu d'un message, change l'ID de la textarea pour que le
message puisse toujours être modifié */
socket.on('update_message'+id_discussion, function(d) {
  zone_message('date_modification', d).innerHTML = 'modifié le ' +
    convertir_date(Date.now());
  zone_message('editeur', d).innerHTML = '<textarea id="'+Date.now()+'">' +
    unechap(d.contenu)+'</textarea>';
  zone_message('affichage', d).innerHTML = unechap(d.contenu);
});

socket.on('nouvelle_discussion', function(discussion) {
  // sélectionne le dernier ID de discussion
  var requete_sql = '\
    SELECT id_discussion FROM messages \
    ORDER BY id_discussion DESC \
    LIMIT 0,1';
  sql.requete(mysql, sql, requete_sql, function(results) {
    // incrémente le dernier ID de 1, ce qui détermine l'ID de la nouvelle discussion
    var id_nouvelle_discussion = results[0].id_discussion+1;
    // insert le premier message de la discussion
    var requete_sql = '\
      INSERT INTO \
        messages(nom_utilisateur, contenu, date_ecriture, id_discussion, likes)\
      VALUES(??, ??, NOW(), ?, 0)';
    var inserts = [
      discussion.nom_utilisateur,
      discussion.message,
      id_nouvelle_discussion
    ];
    requete_sql = sql.preparer(mysql, requete_sql, inserts);
    sql.requete(mysql, sql, requete_sql);
    // attribue le sujet à la discussion dans la table "discussions"
    var requete_sql = '\
      INSERT INTO discussions(sujet, id_discussion)\
      VALUES(??, ?)';
    var inserts = [discussion.sujet.replace(/'/g, "\\'"), id_nouvelle_discussion];
    requete_sql = sql.preparer(mysql, requete_sql, inserts);
    sql.requete(mysql, sql, requete_sql, function() {
      // redirige l'utilisateur vers la nouvelle discussion
      socket.emit('redirection', id_nouvelle_discussion);
      // requête pour charger la dernière discussion dans la page d'accueil
      socket.broadcast.emit('charger_derniere_discussion');
    });
  });
});

function publier_message(nom_utilisateur) {
  if (byId('input_sujet').value !== '' &&
    tinyMCE.get('emplacement_nouveau_message').getContent() !== '') {
      socket.emit('nouvelle_discussion', {
        sujet : byId('input_sujet').value,
        message : tinyMCE.get('emplacement_nouveau_message').getContent(),
        nom_utilisateur : nom_utilisateur
      }
    );
  }
}

socket.on('redirection', function(id_discussion) {
  window.location.assign(id_discussion);
});