Récupérer l'historique des messages
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte00:00:00 :Maintenant qu'on a une fonction qui permet d'ajouter des messages, on va créer la fonctionqui permet de récupérer l'historique de toute la conversation.Donc on va faire ça directement à partir du front-end, c'est-à-dire qu'on va ciblertous les blocs et les classes messages pour récupérer le texte qui est contenu à l'intérieur.
00:00:15 :Donc là encore ça va être assez rapide, je vais le créer avec vous, on va faire unefonction GetChatHistory, elle ne prend aucun paramètre puisqu'on veut juste récupérerl'intégralité de l'historique des messages qui sont sur la page.
00:00:27 :Donc je vais créer une nouvelle constante que je vais appeler MessageBlocks et on vautiliser là encore un document.querySelector, sauf que cette fois-ci on va utiliser SelectorAll
00:00:37 :pour sélectionner plusieurs éléments.Et là on va cibler de façon un petit peu spécifique tous les messages, donc on pourraitfaire .message tout simplement, mais vous allez voir que ça ne va pas être suffisant.
00:00:46 :Et là je vais donc tout simplement faire un console.log de tous ces messages pourvous montrer pourquoi ça n'est pas suffisant.Donc si je fais ça, que je sauvegarde et que je rafraîchis mon script, on va ajouterquelques éléments, donc on va faire un AddToLog de nouveau avec Bonjour et un autre
00:01:03 :Bonjour tout le monde par exemple.Et là si je fais GetChatHistory, vous allez voir qu'on a un petit problème, on a 3 élémentsdans la liste.
00:01:11 :Pourquoi on en a 3 ? Et bien tout simplement parce que le premier c'est le template.Vous voyez si je passe ma souris sur le numéro 1 et sur le numéro 2, on a bien l'affichageici qui nous montre les deux messages et le premier on n'a rien.
00:01:22 :Donc c'est normal, c'est parce que l'élément est caché, donc si vous vous souvenez bien,ici on a notre ChatTemplate qui est la classe Hidden, donc si j'enlève cette classe ilva réapparaître, donc il est au-dessus, on ne le voit pas très bien mais il est là.
00:01:32 :Et si je retourne dans mon console, ici on voit bien qu'on a ici le message 0, le message1 et le message 2.Donc ce qu'on va devoir faire c'est spécifier un petit peu plus notre sélecteur ici quipour l'instant cible sans distinction tous les éléments qui ont la classe Message.
00:01:47 :Donc ce qu'on va faire, accrochez-vous c'est un petit peu plus avancé, c'est dire qu'onne veut pas avoir les éléments, donc on va rajouter un Note, on ne veut pas avoirles éléments qui contiennent à la fois l'identifiant ChatTemplate et la classe Message.
00:02:00 :Donc le Note ça nous permet d'exclure certaines parties, donc on va dire on veut récupérertous les messages sauf ceux qui ont le ID ChatTemplate et la classe Message.
00:02:08 :Donc comme ça, ça nous permet d'exclure en fait le template de notre sélection.Et donc si on teste tout ça, je rafraîchis, je vais remettre les messages, bonjour toutle monde et bonjour, et on va refaire le GetChatHistory et là on voit qu'on a bienles seuls deux messages qui sont affichés sur l'interface et non pas le template.
00:02:25 :Donc ça fonctionne, sauf que maintenant il va falloir retourner le texte du messageet non pas juste p.message, donc non pas seulement le Node, donc l'élément HTML, mais bien
00:02:35 :le message qui est contenu à l'intérieur.Pour ça, on va faire un petit tour de passe-passe, là encore on va utiliser un Array et on vautiliser la fonction Map.
00:02:42 :Donc on va créer un Array à partir de notre MessageBlocks, ça va nous permettre de créerune genre de liste en fait à partir de ces éléments, et sur ces éléments on va faireun Map, c'est-à-dire qu'on va appliquer une fonction sur chacun de ces éléments,donc si on parle en termes de Python c'est un peu comme si on faisait une compréhension
00:02:57 :de liste tout simplement, donc c'est un peu comme si on convertissait tous ces élémentsdans une liste pour ensuite leur appliquer une opération.Donc dans ce cas-ci, on va mapper sur Blocks l'élément, donc je mets un symbole égalet la flèche, ça va me permettre de faire une fonction sur une seule ligne comme ceci,
00:03:13 :donc on va dire que Blocks, on veut récupérer le innerHTML.Pourquoi le innerHTML ? Vous allez voir qu'il y a une petite différence entre les deux,
00:03:19 :entre innerHTML et innerText, j'ai fait des tests avec les deux, généralement,ChatDeputy comprend les deux, donc on peut envoyer soit le innerHTML, soit le innerTextet ça ne fait pas vraiment de différence.
00:03:29 :Mais je vais vous montrer tout de suite à quoi ça ressemble, donc là on a fait unreturn de tout ça, on va pouvoir tester dans notre application et voir quelle est la différenceentre les deux.
00:03:38 :Donc je vais remettre un message, sauf que cette fois-ci je vais mettre un retour àla ligne par exemple, donc je vais dire bonjour et au revoir, et on va récupérer le GetChatHistoryavec le innerHTML.
00:03:47 :Vous voyez qu'avec le innerHTML, ici on a bonjour et ensuite on a une balise BR quisignifie un line break, donc en fait qui est un retour à la ligne.
00:03:56 :Donc ça c'est avec le innerHTML, c'est-à-dire que le retour à la ligne, il nous le retourneen forme HTML, donc avec une balise HTML.Si par contre je mets le innerText à la place, on va recharger notre page, on remet le messageet on refait le GetChatHistory, là vous voyez qu'on a bien juste le slash n, puisque c'est
00:04:13 :le caractère de retour à la ligne, qui n'est pas interprété en tant que baliseHTML.Donc comme je vous dis, ça change pas grand chose, vous pouvez essayer avec l'un ou l'autre,moi j'ai pas vu de différence, on peut laisser le innerText ici ou le innerHTML, ça va être
00:04:26 :la même chose dans les deux cas.Donc voilà pour cette fonction, donc vous allez voir qu'on peut mettre autant de messagesqu'on veut, on va en rajouter d'autres, par exemple voilà bonjour tout le monde, on varemettre d'autres trucs comme ça, et on va tester qu'on a bien donc tous les messages
00:04:38 :à chaque fois qui sont récupérés, et je fais un GetChatHistory, et là on a biendonc tous les messages dans l'ordre, bonjour au revoir, bonjour tout le monde, et les deuxtrucs ici que j'ai mis qui ne veulent rien dire.
00:04:47 :Donc on a bien 4 messages, 4 messages affichés ici, tout fonctionne bien, ils sont dans l'ordre,et c'est parfait, on va pouvoir donc récupérer la conversation, et c'est très importantpuisqu'en fait on veut renvoyer à chaque fois cette conversation en entier à ChatJPTpour qu'il ait le contexte de la conversation, parce que si on renvoyait par exemple uniquement
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.
