Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Réaliser un chat instantanée avec NodeJs
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="WhiiTe'" data-source="post: 6980124" data-attributes="member: 8987"><p style="text-align: center">[ATTACH=full]103021[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center">Bonjour à tous,</p> <p style="text-align: center"></p> <p style="text-align: center">Dans ce tutoriel je vais vous apprendre à réaliser un chat <strong><span style="color: #929e13">[FA]fa fa-fighter-jet[/FA]in</span><span style="color: #98a410">st</span><span style="color: #9dab0c">an</span><span style="color: #a3b109">ta</span><span style="color: #a9b705">né</span><span style="color: #aebe02">e</span> </strong>en utilisant <strong><span style="color: #929e13">[FA]fa fa-terminal[/FA]N</span><span style="color: #97a410">o</span><span style="color: #9caa0d">d</span><span style="color: #a2b00a">e</span><span style="color: #a7b506">J</span><span style="color: #acbb03">s</span></strong> et <strong><span style="color: #929e13">So</span><span style="color: #99a60f">ck</span><span style="color: #a0ae0b">et</span><span style="color: #a7b506">.i</span><span style="color: #aebd02">o</span></strong>.</p> <p style="text-align: center">Je vais partir d'une <strong><span style="color: #929e13">pa</span><span style="color: #98a50f">ge </span><span style="color: #9eac0b">vi</span><span style="color: #a5b308">er</span><span style="color: #abba04">ge</span></strong>, il n'y aura donc pour le moment aucun design.</p> <p style="text-align: center">Je suis sous <strong><span style="color: #929e13">W</span><span style="color: #96a211">i</span><span style="color: #9aa70e">n</span><span style="color: #9eab0c">d</span><span style="color: #a2b00a">o</span><span style="color: #a5b407">w</span><span style="color: #a9b805">s </span><span style="color: #adbd02">7</span></strong>, il est possible que le tutoriel ne sera pas adapté à votre système d'exploitation, je parle surtout pour les <strong><span style="color: #929e13">co</span><span style="color: #99a60f">mm</span><span style="color: #a0ae0b">an</span><span style="color: #a7b506">de</span><span style="color: #aebd02">s</span></strong>, à vous de voir comment faire sur votre machine ou de faire certaines choses à la main, si c'est possible.</p> <p style="text-align: center"></p> <p style="text-align: center">Vous allez tombé au bout d'un moment sur des <strong><span style="color: #929e13">com</span><span style="color: #96a310">men</span><span style="color: #9ba80e">tai</span><span style="color: #9fad0b">res </span><span style="color: #a4b208">num</span><span style="color: #a8b705">éro</span><span style="color: #adbc03">tés [FA]fa fa-list-ol[/FA]</span></strong>, je vous conseille d'avance de ne pas y toucher, ceux-ci permettront de vous <strong><span style="color: #929e13">r</span><span style="color: #96a310">e</span><span style="color: #9ba80e">p</span><span style="color: #9fad0b">é</span><span style="color: #a4b208">r</span><span style="color: #a8b705">e</span><span style="color: #adbc03">r</span></strong> entre le code et là où je vous dirai de mettre du code.</p> <p style="text-align: center"></p> <p style="text-align: center">Si je me trompe dans certains termes, n'hésitez pas à me le dire, il est probable que j'emploie un terme <strong><span style="color: #929e13">in</span><span style="color: #98a50f">co</span><span style="color: #9eac0b">hé</span><span style="color: #a5b308">re</span><span style="color: #abba04">nt</span></strong> ou complétement <strong><span style="color: #929e13">ho</span><span style="color: #99a60f">rs </span><span style="color: #a0ae0b">su</span><span style="color: #a7b506">je</span><span style="color: #aebd02">t</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">Je réaliserai le tutoriel en <strong><span style="color: #929e13">l</span><span style="color: #98a50f">o</span><span style="color: #9eac0b">c</span><span style="color: #a5b308">a</span><span style="color: #abba04">l</span></strong>, mais une fois que vous aurez tout le code, vous pourrez l'utiliser en ligne avec un <strong><span style="color: #929e13">V</span><span style="color: #9caa0d">P</span><span style="color: #a7b506">S [FA]fa fa-cloud[/FA]</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]103022[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center">Avant de pouvoir faire du <strong><span style="color: #929e13">N</span><span style="color: #97a410">o</span><span style="color: #9caa0d">d</span><span style="color: #a2b00a">e</span><span style="color: #a7b506">J</span><span style="color: #acbb03">s</span></strong>, il faut l'installer. Rendez-vous donc sur <a href="https://nodejs.org/en/" target="_blank">le site de NodeJs</a> et téléchargez le.</p> <p style="text-align: center">Mettez ce que vous voulez lors de l'installation, et une fois fini <strong><span style="color: #929e13">ou</span><span style="color: #96a211">vr</span><span style="color: #9aa70e">ez </span><span style="color: #9eab0c">le </span><span style="color: #a2b00a">te</span><span style="color: #a5b407">rm</span><span style="color: #a9b805">in</span><span style="color: #adbd02">al</span></strong> et tapez :</p><p></p><p>[CODE]</p><p>node</p><p>console.log("Hello world");</p><p>[/CODE]</p><p></p><p style="text-align: center">Si Hello world s'affiche bien, c'est que <strong><span style="color: #929e13">N</span><span style="color: #97a410">o</span><span style="color: #9caa0d">d</span><span style="color: #a2b00a">e</span><span style="color: #a7b506">J</span><span style="color: #acbb03">s</span> </strong>est bien installé et donc que nous pouvons commencer.</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]103023[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center">Nous allons commencer par <strong><span style="color: #929e13">[FA]fa fa-plus[/FA]in</span><span style="color: #98a410">it</span><span style="color: #9dab0c">ia</span><span style="color: #a3b109">li</span><span style="color: #a9b705">se</span><span style="color: #aebe02">r</span> </strong>notre projet.</p> <p style="text-align: center">Rendez-vous là où vous voulez, personnellement je serai sur le <strong><span style="color: #929e13">b</span><span style="color: #97a410">u</span><span style="color: #9caa0d">r</span><span style="color: #a2b00a">e</span><span style="color: #a7b506">a</span><span style="color: #acbb03">u</span></strong>, ensuite créez un <strong><span style="color: #929e13">no</span><span style="color: #96a211">uve</span><span style="color: #9ba80d">au </span><span style="color: #9fac0b">ré</span><span style="color: #a2b109">pe</span><span style="color: #a6b507">rt</span><span style="color: #aab904">oir</span><span style="color: #afbf01">e</span></strong> et placez-vous dedans.</p> <p style="text-align: center">Ouvrez le terminal et rendez-y vous à l'aide de la commande <strong><span style="color: #929e13">c</span><span style="color: #a2b00a">d</span></strong>.</p> <p style="text-align: center">Tapez ensuite la commande :</p><p></p><p>[CODE]npm init[/CODE]</p><p></p><p style="text-align: center">Puis mettez ce que vous voulez.</p> <p style="text-align: center">Une fois ceci fait, vous apercevrez qu'un fichier <strong><span style="color: #929e13">pa</span><span style="color: #97a410">ck</span><span style="color: #9caa0d">ag</span><span style="color: #a2b00a">e.</span><span style="color: #a7b506">js</span><span style="color: #acbb03">on</span></strong> s'est crée, tout est donc bon pour le moment.</p> <p style="text-align: center"></p> <p style="text-align: center">Le <strong><span style="color: #929e13">pa</span><span style="color: #97a410">ck</span><span style="color: #9caa0d">ag</span><span style="color: #a2b00a">e.</span><span style="color: #a7b506">js</span><span style="color: #acbb03">on</span></strong> est important si vous comptez <strong><span style="color: #929e13">dép</span><span style="color: #97a410">lac</span><span style="color: #9ca90d">er v</span><span style="color: #a1af0a">otr</span><span style="color: #a6b407">e pr</span><span style="color: #aaba04">oje</span><span style="color: #afbf01">t [FA]fa fa-arrows[/FA]</span></strong>. Car quand nous allons télécharger les <strong><span style="color: #929e13">li</span><span style="color: #98a50f">br</span><span style="color: #9eac0b">ai</span><span style="color: #a5b308">ri</span><span style="color: #abba04">es</span></strong> utiles pour le tutoriel, il y aura un dossier <strong><span style="color: #929e13">no</span><span style="color: #97a410">de</span><span style="color: #9caa0d">_m</span><span style="color: #a2b00a">od</span><span style="color: #a7b506">ul</span><span style="color: #acbb03">es</span></strong> qui va se créer avec tout les composants nécessaires au bon fonctionnement de notre projet.</p> <p style="text-align: center"></p> <p style="text-align: center">Le package.json permettra de <strong><span style="color: #929e13">ré</span><span style="color: #98a410">in</span><span style="color: #9dab0c">st</span><span style="color: #a3b109">al</span><span style="color: #a9b705">le</span><span style="color: #aebe02">r</span> </strong>toutes ces libraires avec une commande spécifique :</p><p></p><p>[CODE]npm install[/CODE]</p><p></p><p style="text-align: center">Et là le dossier node_modules va se re-télécharger avec toutes les libraires <strong><span style="color: #929e13">in</span><span style="color: #99a60f">di</span><span style="color: #a0ae0b">qu</span><span style="color: #a7b506">ée</span><span style="color: #aebd02">s</span> </strong>dans le package.json.</p> <p style="text-align: center"></p> <p style="text-align: center">Pratique non ?</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant nous allons créer un fichier <strong><span style="color: #929e13">se</span><span style="color: #99a60f">rv</span><span style="color: #a0ae0b">er</span><span style="color: #a7b506">.j</span><span style="color: #aebd02">s [FA]fa fa-code[/FA]</span></strong> et un dossier public, qui contiendra nos fichiers html, nos ressources CSS / Js etc...</p><p></p><p>[CODE]</p><p>cd. > server.js</p><p>mkdir public[/CODE]</p><p></p><p style="text-align: center">Et créer un fichier <strong><span style="color: #929e13">in</span><span style="color: #98a50f">de</span><span style="color: #9eac0b">x.</span><span style="color: #a5b308">ht</span><span style="color: #abba04">ml [FA]fa fa-html5[/FA]</span></strong> à l'intérieur de ce dossier.</p><p></p><p>[CODE]cd public</p><p>cd. > index.html</p><p>[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center">Nous pouvons donc commencer notre projet.</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]103024[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center">Pour faire le chat, je vais utiliser <strong><span style="color: #929e13">soc</span><span style="color: #97a410">ke</span><span style="color: #9ba80e">t.i</span><span style="color: #a0ae0b">o et </span><span style="color: #a5b307">exp</span><span style="color: #aab904">re</span><span style="color: #aebd02">ss [FA]fa fa-code[/FA]</span></strong>.</p> <p style="text-align: center">Dans le terminal, tapez ces deux commandes.</p><p></p><p>[CODE]</p><p>npm install --save socket.io</p><p>npm install --save express</p><p>[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center">Le<strong> <span style="color: #929e13">-</span><span style="color: #97a410">-</span><span style="color: #9caa0d">s</span><span style="color: #a2b00a">a</span><span style="color: #a7b506">v</span><span style="color: #acbb03">e</span></strong> de la commande permet d'écrire dans le fichier package.json le fait que vous utilisez une librairie, je vous conseille de le mettre à chaque fois, comme ça si vous souhaitez déplacez les fichiers à distance, vous n'aurez pas besoin <strong><span style="color: #929e13">d'</span><span style="color: #99a60f">en</span><span style="color: #a0ae0b">vo</span><span style="color: #a7b506">ye</span><span style="color: #aebd02">r</span></strong> le gros dossier node_modules.</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant nous allons commencer à écrire la partie <strong><span style="color: #929e13">Ja</span><span style="color: #98a50f">va</span><span style="color: #9eac0b">Sc</span><span style="color: #a5b308">ri</span><span style="color: #abba04">pt</span></strong>, ouvrez avec un éditeur de texte le fichier server.js crée au préalable.</p> <p style="text-align: center"></p> <p style="text-align: center">Insérez-y ce code :</p><p></p><p>[CODE]let express = require('express');</p><p>let app = express();</p><p>let server = require('http').createServer(app);</p><p>let io = require('socket.io')(server);</p><p>let port = process.env.PORT || 8080;</p><p></p><p>server.listen(port);</p><p></p><p>app.use(express.static(__dirname + '/public'));</p><p>app.get('/', (req, res) => {</p><p> res.sendFile(__dirname + '/public/index.html');</p><p>});</p><p></p><p>// Suite du code</p><p>[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center">Premièrement on initie les <strong><span style="color: #929e13">[FA]fa fa-usd[/FA] va</span><span style="color: #99a60f">ri</span><span style="color: #a0ae0b">ab</span><span style="color: #a7b506">le</span><span style="color: #aebd02">s</span> </strong>plus ou moins utiles à notre projet, là ce n'est que le début, donc toutes ces variables sont importantes, ensuite je précise au serveur d'écouter<strong> <span style="color: #929e13">[FA]fa fa-assistive-listening-systems[/FA] le </span><span style="color: #98a50f">po</span><span style="color: #9eac0b">rt </span><span style="color: #a5b308">80</span><span style="color: #abba04">80</span></strong>, qui est stocké dans la variable port, ensuite à l'aide d'<strong><span style="color: #929e13">e</span><span style="color: #96a310">p</span><span style="color: #9ba80e">x</span><span style="color: #9fad0b">r</span><span style="color: #a4b208">e</span><span style="color: #a8b705">s</span><span style="color: #adbc03">s</span></strong>, je fais deux choses, je dis que tous <strong><span style="color: #929e13">les </span><span style="color: #97a310">fic</span><span style="color: #9ba90d">hie</span><span style="color: #a0ae0a">rs s</span><span style="color: #a5b308">tat</span><span style="color: #a9b805">iqu</span><span style="color: #aebe02">es [FA]fa fa-file[/FA]</span></strong> qui sont placés dans le dossier public doivent être statique, sans ça le CSS ne fonctionnera pas, les images non plus etc.., puis je dis au serveur de <strong><span style="color: #929e13">r</span><span style="color: #97a410">e</span><span style="color: #9caa0d">n</span><span style="color: #a2b00a">d</span><span style="color: #a7b506">r</span><span style="color: #acbb03">e</span></strong> le fichier index.html du dossier public si la <strong><span style="color: #929e13">re</span><span style="color: #96a310">qu</span><span style="color: #9ba80e">êt</span><span style="color: #9fad0b">e e</span><span style="color: #a4b208">nv</span><span style="color: #a8b705">oy</span><span style="color: #adbc03">ée</span></strong> provient de l'index. (/)</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant, rendez-vous sur <a href="http://127.0.0.1:8080" target="_blank">http://127.0.0.1:8080</a>.</p> <p style="text-align: center"></p> <p style="text-align: center">Ça ne fonctionne pas ? C'est normal ne vous en faîte pas, NodeJS ne se lance pas tout seul, à chaque <strong><span style="color: #929e13">mo</span><span style="color: #97a410">di</span><span style="color: #9caa0d">fi</span><span style="color: #a2b00a">ca</span><span style="color: #a7b506">ti</span><span style="color: #acbb03">on [FA]fa fa-pencil[/FA]</span></strong> du fichier server.js ou quand vous voulez <strong><span style="color: #929e13">l</span><span style="color: #97a410">a</span><span style="color: #9caa0d">n</span><span style="color: #a2b00a">c</span><span style="color: #a7b506">e</span><span style="color: #acbb03">r</span> </strong>le serveur, il faut taper cette commande :</p><p></p><p>[CODE]node server.js[/CODE]</p><p></p><p style="text-align: center">Vérifiez bien que vous n'êtes pas dans le dossier <strong><span style="color: #929e13">p</span><span style="color: #97a410">u</span><span style="color: #9caa0d">b</span><span style="color: #a2b00a">l</span><span style="color: #a7b506">i</span><span style="color: #acbb03">c</span></strong>, pour faire un retour en arrière faîte ceci :</p><p></p><p>[CODE]cd ../[/CODE]</p><p></p><p style="text-align: center">Rafraîchissez la page, et désormais la page devient blanche, plus d'erreur de <strong><span style="color: #929e13">co</span><span style="color: #96a211">nn</span><span style="color: #9aa70e">ex</span><span style="color: #9eab0c">io</span><span style="color: #a2b00a">n r</span><span style="color: #a5b407">ef</span><span style="color: #a9b805">us</span><span style="color: #adbd02">ée [FA]fa fa-ban[/FA]</span></strong> ou je ne sais quoi !</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]103023[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center">Avant de commencer la partie la plus intéressante, il faut faire <strong><span style="color: #929e13">la </span><span style="color: #98a50f">ba</span><span style="color: #9eac0b">se </span><span style="color: #a5b308">HT</span><span style="color: #abba04">ML</span></strong>, c'est à dire un <strong><span style="color: #929e13">si</span><span style="color: #96a211">mp</span><span style="color: #9aa70e">le </span><span style="color: #9eab0c">fo</span><span style="color: #a2b00a">rm</span><span style="color: #a5b407">ul</span><span style="color: #a9b805">ai</span><span style="color: #adbd02">re</span></strong> avec un champ pseudo et message, un ul qui contiendra les messages et une div qui affichera les erreurs.</p> <p style="text-align: center"></p> <p style="text-align: center">Comme je suis sympa je vous ai préparé une base qui est comme je l'ai décrite, basique ..</p><p></p><p>[HTML]</p><p><!DOCTYPE html></p><p><html></p><p> <head></p><p> <meta charset="utf-8"></p><p> <title>NodeJs chat</title></p><p> </head></p><p> <body></p><p> <form></p><p> <input type="text" id="username" placeholder="Votre pseudonyme"><br /></p><p> <textarea id="message" placeholder="Votre message"></textarea><br /></p><p> <input type="submit" id="submit"></p><p> </form></p><p></p><p> <div id="response"></div></p><p></p><p> <ul id="messages" style="list-style:none;"></ul></p><p></p><p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></p><p> <script src="/socket.io/socket.io.js"></script></p><p> <script></p><p> $(document).ready(function(){</p><p> let socket = io();</p><p> $('#submit').on('click', function(e){</p><p> e.preventDefault();</p><p></p><p> let data = {</p><p> username: $('#username').val(),</p><p> message : $('#message').val()</p><p> };</p><p></p><p> socket.emit('new message', data);</p><p> });</p><p></p><p> // Suite du code</p><p> });</p><p> </script></p><p> </body></p><p></html></p><p></p><p></p><p>[/HTML]</p><p></p><p style="text-align: center">J'écrirai le code <strong><span style="color: #929e13">Ja</span><span style="color: #96a211">vaS</span><span style="color: #9ba80d">cr</span><span style="color: #9fac0b">ip</span><span style="color: #a2b109">t v</span><span style="color: #a6b507">is</span><span style="color: #aab904">ibl</span><span style="color: #afbf01">e</span></strong> en bas de la page, mais vous pouvez bien évidemment tout mettre dans un fichier JavaScript et l'inclure sur la page, ça ne posera <strong><span style="color: #929e13">au</span><span style="color: #98a50f">cu</span><span style="color: #9eac0b">n s</span><span style="color: #a5b308">ou</span><span style="color: #abba04">ci</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">La partie JavaScript est très basique, j'initie une variable socket, je créer un <strong><span style="color: #929e13">év</span><span style="color: #99a60f">én</span><span style="color: #a0ae0b">em</span><span style="color: #a7b506">en</span><span style="color: #aebd02">t [FA]fa fa-calendar[/FA]</span> </strong>qui, au clique du bouton, va créer une variable data qui contient le champ du pseudo et du message. Ensuite grâce à <strong><span style="color: #929e13">so</span><span style="color: #99a60f">ck</span><span style="color: #a0ae0b">et</span><span style="color: #a7b506">.i</span><span style="color: #aebd02">o</span></strong>, je peux envoyer sans passer par de l'Ajax, la requête au serveur, que je vais récupérer dans le fichier server.js, je vais faire le <strong><span style="color: #929e13">tr</span><span style="color: #98a50f">ai</span><span style="color: #9eac0b">te</span><span style="color: #a5b308">me</span><span style="color: #abba04">nt</span> </strong>et rendre une <strong><span style="color: #929e13">e</span><span style="color: #97a410">r</span><span style="color: #9caa0d">r</span><span style="color: #a2b00a">e</span><span style="color: #a7b506">u</span><span style="color: #acbb03">r</span> </strong>si besoin.</p> <p style="text-align: center"></p> <p style="text-align: center">A la suite du code dans server.js, rajoutez ceci :</p><p></p><p>[CODE]</p><p>io.on('connection', function(client){</p><p></p><p> // commentaire 12 (pour après)</p><p></p><p> client.on('new message', function(data){</p><p> // Suite</p><p> });</p><p></p><p> client.on('disconnect', function(){</p><p> delete client;</p><p> });</p><p></p><p>});</p><p>[/CODE]</p><p></p><p style="text-align: center">Il est important de comprendre ceci, sur la première ligne nous disons que dès qu'on a <strong><span style="color: #929e13">un</span><span style="color: #97a410">e c</span><span style="color: #9caa0d">on</span><span style="color: #a2b00a">ne</span><span style="color: #a7b506">xi</span><span style="color: #acbb03">on [FA]fa fa-sign-in[/FA]</span></strong>, on créer une variable, que j'ai nommée <strong><span style="color: #929e13">c</span><span style="color: #97a410">l</span><span style="color: #9caa0d">i</span><span style="color: #a2b00a">e</span><span style="color: #a7b506">n</span><span style="color: #acbb03">t [FA]fa fa-user[/FA]</span></strong>, qui va être en fait le client en lui-même, chaque client aura des propriétés différentes, tel que l'ID. (<strong><span style="color: #929e13">cl</span><span style="color: #99a60f">ie</span><span style="color: #a0ae0b">nt</span><span style="color: #a7b506">.i</span><span style="color: #aebd02">d</span></strong>)</p> <p style="text-align: center">En-dessous je supprime le client s'il se <strong><span style="color: #929e13">dé</span><span style="color: #98a50f">co</span><span style="color: #9eac0b">nn</span><span style="color: #a5b308">ec</span><span style="color: #abba04">te [FA]fa fa-sign-in[/FA]</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">Vous verrez que socket.io est très simple à manier, une fois que son utilisation est <strong><span style="color: #929e13">c</span><span style="color: #96a211">o</span><span style="color: #9aa70e">m</span><span style="color: #9eab0c">p</span><span style="color: #a2b00a">r</span><span style="color: #a5b407">i</span><span style="color: #a9b805">s</span><span style="color: #adbd02">e</span> </strong>ça ira tout seul, le code est très <strong><span style="color: #929e13">ré</span><span style="color: #99a60f">pé</span><span style="color: #a0ae0b">ti</span><span style="color: #a7b506">ti</span><span style="color: #aebd02">f</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">Vous pouvez apercevoir que je créer une sorte de <strong><span style="color: #929e13">l</span><span style="color: #96a211">i</span><span style="color: #9aa70e">s</span><span style="color: #9eab0c">t</span><span style="color: #a2b00a">e</span><span style="color: #a5b407">n</span><span style="color: #a9b805">e</span><span style="color: #adbd02">r</span></strong>, qui va agir quand on aura l’événement.</p> <p style="text-align: center">Pour le moment notre code se résume à :</p> <ul> <li data-xf-list-type="ul">Soumission du formulaire => On émet les valeurs du formulaire</li> <li data-xf-list-type="ul">Côté serveur => Listener reçoit l’événement, du-coup va traiter les informations.</li> </ul> <p style="text-align: center">C'est en gros comme ça qu'il faut voir comment ça <strong><span style="color: #929e13">fo</span><span style="color: #98a50f">nc</span><span style="color: #9eac0b">ti</span><span style="color: #a5b308">on</span><span style="color: #abba04">ne</span></strong>.</p> <p style="text-align: center">Nous allons maintenant vérifier les valeurs <strong><span style="color: #929e13">cô</span><span style="color: #98a410">té </span><span style="color: #9dab0c">se</span><span style="color: #a3b109">rv</span><span style="color: #a9b705">eu</span><span style="color: #aebe02">r [FA]fa fa-cloud[/FA]</span></strong> et renvoyer une erreur s'il devait y en avoir une.</p> <p style="text-align: center"></p> <p style="text-align: center">A la suite mettez ceci :</p><p></p><p>[CODE]</p><p>// Vérification du pseudonyme</p><p>if(!data.username || typeof data.username == undefined || data.username.length > 25){</p><p> client.emit('error message', "Le pseudonyme rentré n'est pas valide !");</p><p> return;</p><p>}</p><p></p><p>// Vérification du message</p><p>if(!data.message || typeof data.message == undefined || data.message.length > 255){</p><p> client.emit('error message', "Le message rentré n'est pas valide !");</p><p> return;</p><p>}</p><p>// commentaire 13</p><p>io.emit('new message', data);</p><p>[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center">Premièrement on regarde si on a <strong><span style="color: #929e13">pa</span><span style="color: #98a410">s d</span><span style="color: #9dab0c">e p</span><span style="color: #a3b109">se</span><span style="color: #a9b705">ud</span><span style="color: #aebe02">o</span></strong>, si le pseudo est typé <strong><span style="color: #929e13">un</span><span style="color: #99a60f">de</span><span style="color: #a0ae0b">fi</span><span style="color: #a7b506">ne</span><span style="color: #aebd02">d</span> </strong>ou s'il est supérieur à <strong><span style="color: #929e13">25 </span><span style="color: #97a410">ca</span><span style="color: #9caa0d">ra</span><span style="color: #a2b00a">ct</span><span style="color: #a7b506">èr</span><span style="color: #acbb03">es</span></strong>, si il correspond à tous ces mauvais critères, on émet au client l'erreur, il en est de même avec le message, pensez bien à chaque fois à stoppez le script en y ajoutant un <strong><span style="color: #929e13">r</span><span style="color: #97a410">e</span><span style="color: #9caa0d">t</span><span style="color: #a2b00a">u</span><span style="color: #a7b506">r</span><span style="color: #acbb03">n</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">Si tout est bon on émet à <strong><span style="color: #929e13">to</span><span style="color: #98a410">ut </span><span style="color: #9dab0c">le </span><span style="color: #a3b109">mo</span><span style="color: #a9b705">nd</span><span style="color: #aebe02">e [FA]fa fa-users[/FA]</span></strong> le message, avec les mêmes données envoyées.</p> <p style="text-align: center"></p> <p style="text-align: center">Vous allez peut-être vous dire, comment envoyer <strong><span style="color: #929e13">un </span><span style="color: #98a410">év</span><span style="color: #9dab0c">én</span><span style="color: #a3b109">em</span><span style="color: #a9b705">en</span><span style="color: #aebe02">t</span></strong> à un client, et non à tout le monde, c'est très simple, regardez bien le code.</p> <ul> <li data-xf-list-type="ul">client.emit => Envoi uniquement au client</li> <li data-xf-list-type="ul">io.emit => Envoi à tout le monde même au client concerné<br /> </li> <li data-xf-list-type="ul">client.broadcast.emit => Envoi à tout le monde sauf au client concerné</li> </ul> <p style="text-align: center">Il y a <strong><span style="color: #929e13">d'</span><span style="color: #96a211">aut</span><span style="color: #9ba80d">re</span><span style="color: #9fac0b">s é</span><span style="color: #a2b109">vé</span><span style="color: #a6b507">ne</span><span style="color: #aab904">men</span><span style="color: #afbf01">t</span></strong>, je vous laisse les chercher sur le net.</p> <p style="text-align: center">Maintenant passons côté client, à la suite du code dans votre index.html rajoutez-y ceci :</p><p></p><p>[CODE]</p><p>socket.on('error message', function(phrase){</p><p> $('#response').html(phrase);</p><p>});</p><p></p><p>socket.on('new message', function(data){</p><p> $('#messages').append('<li>' + data.username + ' : ' + data.message + '</li>');</p><p>});</p><p>[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center">Essayez maintenant de poster un message, magique non ?</p> <p style="text-align: center"></p> <p style="text-align: center">Avant de continuer plus loin, il y a un très gros souci, en effet <strong><span style="color: #929e13">un</span><span style="color: #97a410">e f</span><span style="color: #9caa0d">ai</span><span style="color: #a2b00a">ll</span><span style="color: #a7b506">e X</span><span style="color: #acbb03">SS [FA]fa fa-exclamation-triangle[/FA]</span></strong> est actuellement présente, si un membre vient mettre <strong><span style="color: #929e13">du </span><span style="color: #97a310">co</span><span style="color: #9ca90d">nt</span><span style="color: #a0ae0a">en</span><span style="color: #a5b407">u H</span><span style="color: #aab904">TM</span><span style="color: #afbe01">L</span></strong>, celui sera interprété et écrit en HTML, il pourra donc faire rediriger tout le monde vers une mauvaise page, ou écrire en gros, styliser la page à sa guise, bref faire <strong><span style="color: #929e13">ce </span><span style="color: #96a211">que </span><span style="color: #9ba80d">bo</span><span style="color: #9fac0b">n l</span><span style="color: #a2b109">ui </span><span style="color: #a6b507">se</span><span style="color: #aab904">mbl</span><span style="color: #afbf01">e [FA]fa fa-user-secret[/FA]</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">Voici une fonction pour remédier à ça :</p><p></p><p>[CODE]</p><p>function XSSPatcher(texte){</p><p> return texte</p><p> .replace(/&/g, "&amp;")</p><p> .replace(/</g, "&lt;")</p><p> .replace(/>/g, "&gt;")</p><p> .replace(/"/g, "&quot;")</p><p> .replace(/'/g, "&&#039;")</p><p>}</p><p>[/CODE]</p><p></p><p style="text-align: center">Et remplacez la ligne qui insert un nouvel élément dans la liste des messages par :</p><p></p><p>[CODE]$('#messages').append('<li>' + XSSPatcher(data.username) + ' : ' + XSSPatcher(data.message) + '</li>');</p><p>[/CODE]</p><p></p><p style="text-align: center">La faille XSS est désormais <strong><span style="color: #929e13">p</span><span style="color: #96a310">a</span><span style="color: #9ba80e">t</span><span style="color: #9fad0b">c</span><span style="color: #a4b208">h</span><span style="color: #a8b705">é</span><span style="color: #adbc03">e [FA]fa fa-check[/FA]</span> </strong>!</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]103025[/ATTACH] </p><p></p><p style="text-align: center">Quand un utilisateur arrive sur la page, il tombe sur une page qui ne contient<strong> <span style="color: #929e13">au</span><span style="color: #97a410">cu</span><span style="color: #9caa0d">n m</span><span style="color: #a2b00a">es</span><span style="color: #a7b506">sa</span><span style="color: #acbb03">ge</span></strong>.</p> <p style="text-align: center">Je vais donc vous montrer comment stocker <strong><span style="color: #929e13">les </span><span style="color: #97a310">5 de</span><span style="color: #9ba90d">rni</span><span style="color: #a0ae0a">ers </span><span style="color: #a5b308">mes</span><span style="color: #a9b805">sag</span><span style="color: #aebe02">es</span></strong> grand maximum afin de les placer dans la page du nouvel arrivant.</p> <p style="text-align: center"></p> <p style="text-align: center">Pour commencer, tout en haut là où nous définissons nos variables, nous allons rajouter :</p><p></p><p>[CODE]let lastMessage = new Array();[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center">Ensuite, nous allons <strong><span style="color: #929e13">env</span><span style="color: #96a211">oye</span><span style="color: #9aa70e">r le </span><span style="color: #9eab0c">tab</span><span style="color: #a2b00a">lea</span><span style="color: #a5b407">u au </span><span style="color: #a9b805">cli</span><span style="color: #adbd02">ent [FA]fa fa-table[/FA]</span></strong> dès qu'il se connecte, à la place du commentaire <strong><span style="color: #929e13">nu</span><span style="color: #98a50f">mé</span><span style="color: #9eac0b">ro</span><span style="color: #a5b308">té </span><span style="color: #abba04">12</span></strong>, placez cette ligne :</p><p></p><p>[CODE]client.emit('last message', lastMessage);[/CODE]</p><p></p><p style="text-align: center">Et maintenant à la place du <strong><span style="color: #929e13">co</span><span style="color: #97a310">mm</span><span style="color: #9ca90d">en</span><span style="color: #a0ae0a">ta</span><span style="color: #a5b407">ir</span><span style="color: #aab904">e 1</span><span style="color: #afbe01">3</span></strong> mettez-y ceci :</p><p></p><p>[CODE]</p><p> lastMessage.push(data.username + ' : ' + data.message);</p><p> for(var i = lastMessage.length-1; i--;){</p><p> if(i == 4){</p><p> lastMessage.shift();</p><p> }</p><p> }</p><p>[/CODE]</p><p></p><p style="text-align: center">Ce code va insérer une nouvelle entrée à <strong><span style="color: #929e13">l</span><span style="color: #96a211">'</span><span style="color: #9aa70e">i</span><span style="color: #9eab0c">n</span><span style="color: #a2b00a">d</span><span style="color: #a5b407">e</span><span style="color: #a9b805">x </span><span style="color: #adbd02">0</span></strong> contenant le message complet à insérer par la suite, ensuite on fait une <strong><span style="color: #929e13">b</span><span style="color: #97a410">o</span><span style="color: #9caa0d">u</span><span style="color: #a2b00a">c</span><span style="color: #a7b506">l</span><span style="color: #acbb03">e [FA]fa fa-undo[/FA]</span> </strong>qui va vérifier s'il n'y a pas plus de 5 entrées, si c'est le cas on supprime la <strong><span style="color: #929e13">pr</span><span style="color: #96a310">em</span><span style="color: #9ba80e">iè</span><span style="color: #9fad0b">re </span><span style="color: #a4b208">en</span><span style="color: #a8b705">tr</span><span style="color: #adbc03">ée</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant côté client (index.html), nous allons simplement rajouter une boucle qui va récupérer <strong><span style="color: #929e13">to</span><span style="color: #96a211">ut</span><span style="color: #9aa70e">es </span><span style="color: #9eab0c">le</span><span style="color: #a2b00a">s e</span><span style="color: #a5b407">nt</span><span style="color: #a9b805">ré</span><span style="color: #adbd02">es</span></strong> du tableau afin de les ajouter à notre page HTML.</p><p></p><p>[CODE]</p><p>socket.on('last message', function(arr){</p><p> for(i = 0;i < arr.length;i++){</p><p> $("#messages").append('<li>' + XSSPatcher(arr[i]) + '</li>');</p><p> }</p><p>});</p><p>[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center">Et voilà, mettez un message, <strong><span style="color: #929e13">ra</span><span style="color: #97a310">fr</span><span style="color: #9ca90d">aî</span><span style="color: #a0ae0a">ch</span><span style="color: #a5b407">is</span><span style="color: #aab904">se</span><span style="color: #afbe01">z</span> </strong>la page, que constatez-vous ? Eh oui les derniers messages <strong><span style="color: #929e13">ap</span><span style="color: #97a410">pa</span><span style="color: #9caa0d">ra</span><span style="color: #a2b00a">is</span><span style="color: #a7b506">se</span><span style="color: #acbb03">nt [FA]fa fa-eye[/FA]</span> </strong>!</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]103026[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center">Le tutoriel touche à sa fin, comme je l'ai dit en début il est probable que j'emploie <strong><span style="color: #929e13">de </span><span style="color: #96a310">ma</span><span style="color: #9aa70e">uv</span><span style="color: #9eac0b">ai</span><span style="color: #a3b109">s t</span><span style="color: #a7b506">er</span><span style="color: #abba04">me</span><span style="color: #afbf01">s</span></strong>, ou de mauvaises manières de coder, n'hésitez donc pas à me le reprocher !</p> <p style="text-align: center"></p> <p style="text-align: center">Si vous avez des questions, n'hésitez pas à venir en <strong><span style="color: #929e13">p</span><span style="color: #98a50f">r</span><span style="color: #9eac0b">i</span><span style="color: #a5b308">v</span><span style="color: #abba04">é</span> </strong>ou à poster vos questions dans les commentaires afin que la <strong><span style="color: #929e13">co</span><span style="color: #98a50f">mm</span><span style="color: #9eac0b">un</span><span style="color: #a5b308">au</span><span style="color: #abba04">té [FA]fa fa-users[/FA]</span> </strong>puisse vous répondre.</p> <p style="text-align: center"></p> <p style="text-align: center">Si vous voulez <strong><span style="color: #929e13">l</span><span style="color: #96a310">a </span><span style="color: #9ba80e">s</span><span style="color: #9fad0b">u</span><span style="color: #a4b208">i</span><span style="color: #a8b705">t</span><span style="color: #adbc03">e</span> </strong>de ce tutoriel, dîtes-le moi dans les commentaires ! (membre est entrain d'écrire, membre a rejoint le salon ..)</p> <p style="text-align: center"></p> <p style="text-align: center">Merci à [USER=292225]@Louis[/USER] pour le <strong><span style="color: #929e13">h</span><span style="color: #97a410">e</span><span style="color: #9caa0d">a</span><span style="color: #a2b00a">d</span><span style="color: #a7b506">e</span><span style="color: #acbb03">r</span> </strong>et les <strong><span style="color: #929e13">sé</span><span style="color: #98a410">pa</span><span style="color: #9dab0c">ra</span><span style="color: #a3b109">te</span><span style="color: #a9b705">ur</span><span style="color: #aebe02">s</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center"><img src="/data/assets/smilies/tchuss.gif" class="smilie" loading="lazy" alt=":tchuss:" title="Tchuss :tchuss:" data-shortname=":tchuss:" /></p></blockquote><p></p>
[QUOTE="WhiiTe', post: 6980124, member: 8987"] [CENTER][ATTACH=full]103021[/ATTACH] Bonjour à tous, Dans ce tutoriel je vais vous apprendre à réaliser un chat [B][COLOR=#929e13][FA]fa fa-fighter-jet[/FA]in[/COLOR][COLOR=#98a410]st[/COLOR][COLOR=#9dab0c]an[/COLOR][COLOR=#a3b109]ta[/COLOR][COLOR=#a9b705]né[/COLOR][COLOR=#aebe02]e[/COLOR] [/B]en utilisant [B][COLOR=#929e13][FA]fa fa-terminal[/FA]N[/COLOR][COLOR=#97a410]o[/COLOR][COLOR=#9caa0d]d[/COLOR][COLOR=#a2b00a]e[/COLOR][COLOR=#a7b506]J[/COLOR][COLOR=#acbb03]s[/COLOR][/B] et [B][COLOR=#929e13]So[/COLOR][COLOR=#99a60f]ck[/COLOR][COLOR=#a0ae0b]et[/COLOR][COLOR=#a7b506].i[/COLOR][COLOR=#aebd02]o[/COLOR][/B]. Je vais partir d'une [B][COLOR=#929e13]pa[/COLOR][COLOR=#98a50f]ge [/COLOR][COLOR=#9eac0b]vi[/COLOR][COLOR=#a5b308]er[/COLOR][COLOR=#abba04]ge[/COLOR][/B], il n'y aura donc pour le moment aucun design. Je suis sous [B][COLOR=#929e13]W[/COLOR][COLOR=#96a211]i[/COLOR][COLOR=#9aa70e]n[/COLOR][COLOR=#9eab0c]d[/COLOR][COLOR=#a2b00a]o[/COLOR][COLOR=#a5b407]w[/COLOR][COLOR=#a9b805]s [/COLOR][COLOR=#adbd02]7[/COLOR][/B], il est possible que le tutoriel ne sera pas adapté à votre système d'exploitation, je parle surtout pour les [B][COLOR=#929e13]co[/COLOR][COLOR=#99a60f]mm[/COLOR][COLOR=#a0ae0b]an[/COLOR][COLOR=#a7b506]de[/COLOR][COLOR=#aebd02]s[/COLOR][/B], à vous de voir comment faire sur votre machine ou de faire certaines choses à la main, si c'est possible. Vous allez tombé au bout d'un moment sur des [B][COLOR=#929e13]com[/COLOR][COLOR=#96a310]men[/COLOR][COLOR=#9ba80e]tai[/COLOR][COLOR=#9fad0b]res [/COLOR][COLOR=#a4b208]num[/COLOR][COLOR=#a8b705]éro[/COLOR][COLOR=#adbc03]tés [FA]fa fa-list-ol[/FA][/COLOR][/B], je vous conseille d'avance de ne pas y toucher, ceux-ci permettront de vous [B][COLOR=#929e13]r[/COLOR][COLOR=#96a310]e[/COLOR][COLOR=#9ba80e]p[/COLOR][COLOR=#9fad0b]é[/COLOR][COLOR=#a4b208]r[/COLOR][COLOR=#a8b705]e[/COLOR][COLOR=#adbc03]r[/COLOR][/B] entre le code et là où je vous dirai de mettre du code. Si je me trompe dans certains termes, n'hésitez pas à me le dire, il est probable que j'emploie un terme [B][COLOR=#929e13]in[/COLOR][COLOR=#98a50f]co[/COLOR][COLOR=#9eac0b]hé[/COLOR][COLOR=#a5b308]re[/COLOR][COLOR=#abba04]nt[/COLOR][/B] ou complétement [B][COLOR=#929e13]ho[/COLOR][COLOR=#99a60f]rs [/COLOR][COLOR=#a0ae0b]su[/COLOR][COLOR=#a7b506]je[/COLOR][COLOR=#aebd02]t[/COLOR][/B]. Je réaliserai le tutoriel en [B][COLOR=#929e13]l[/COLOR][COLOR=#98a50f]o[/COLOR][COLOR=#9eac0b]c[/COLOR][COLOR=#a5b308]a[/COLOR][COLOR=#abba04]l[/COLOR][/B], mais une fois que vous aurez tout le code, vous pourrez l'utiliser en ligne avec un [B][COLOR=#929e13]V[/COLOR][COLOR=#9caa0d]P[/COLOR][COLOR=#a7b506]S [FA]fa fa-cloud[/FA][/COLOR][/B]. [ATTACH=full]103022[/ATTACH] Avant de pouvoir faire du [B][COLOR=#929e13]N[/COLOR][COLOR=#97a410]o[/COLOR][COLOR=#9caa0d]d[/COLOR][COLOR=#a2b00a]e[/COLOR][COLOR=#a7b506]J[/COLOR][COLOR=#acbb03]s[/COLOR][/B], il faut l'installer. Rendez-vous donc sur [URL='https://nodejs.org/en/']le site de NodeJs[/URL] et téléchargez le. Mettez ce que vous voulez lors de l'installation, et une fois fini [B][COLOR=#929e13]ou[/COLOR][COLOR=#96a211]vr[/COLOR][COLOR=#9aa70e]ez [/COLOR][COLOR=#9eab0c]le [/COLOR][COLOR=#a2b00a]te[/COLOR][COLOR=#a5b407]rm[/COLOR][COLOR=#a9b805]in[/COLOR][COLOR=#adbd02]al[/COLOR][/B] et tapez :[/CENTER] [CODE] node console.log("Hello world"); [/CODE] [CENTER]Si Hello world s'affiche bien, c'est que [B][COLOR=#929e13]N[/COLOR][COLOR=#97a410]o[/COLOR][COLOR=#9caa0d]d[/COLOR][COLOR=#a2b00a]e[/COLOR][COLOR=#a7b506]J[/COLOR][COLOR=#acbb03]s[/COLOR] [/B]est bien installé et donc que nous pouvons commencer. [ATTACH=full]103023[/ATTACH] Nous allons commencer par [B][COLOR=#929e13][FA]fa fa-plus[/FA]in[/COLOR][COLOR=#98a410]it[/COLOR][COLOR=#9dab0c]ia[/COLOR][COLOR=#a3b109]li[/COLOR][COLOR=#a9b705]se[/COLOR][COLOR=#aebe02]r[/COLOR] [/B]notre projet. Rendez-vous là où vous voulez, personnellement je serai sur le [B][COLOR=#929e13]b[/COLOR][COLOR=#97a410]u[/COLOR][COLOR=#9caa0d]r[/COLOR][COLOR=#a2b00a]e[/COLOR][COLOR=#a7b506]a[/COLOR][COLOR=#acbb03]u[/COLOR][/B], ensuite créez un [B][COLOR=#929e13]no[/COLOR][COLOR=#96a211]uve[/COLOR][COLOR=#9ba80d]au [/COLOR][COLOR=#9fac0b]ré[/COLOR][COLOR=#a2b109]pe[/COLOR][COLOR=#a6b507]rt[/COLOR][COLOR=#aab904]oir[/COLOR][COLOR=#afbf01]e[/COLOR][/B] et placez-vous dedans. Ouvrez le terminal et rendez-y vous à l'aide de la commande [B][COLOR=#929e13]c[/COLOR][COLOR=#a2b00a]d[/COLOR][/B]. Tapez ensuite la commande :[/CENTER] [CODE]npm init[/CODE] [CENTER]Puis mettez ce que vous voulez. Une fois ceci fait, vous apercevrez qu'un fichier [B][COLOR=#929e13]pa[/COLOR][COLOR=#97a410]ck[/COLOR][COLOR=#9caa0d]ag[/COLOR][COLOR=#a2b00a]e.[/COLOR][COLOR=#a7b506]js[/COLOR][COLOR=#acbb03]on[/COLOR][/B] s'est crée, tout est donc bon pour le moment. Le [B][COLOR=#929e13]pa[/COLOR][COLOR=#97a410]ck[/COLOR][COLOR=#9caa0d]ag[/COLOR][COLOR=#a2b00a]e.[/COLOR][COLOR=#a7b506]js[/COLOR][COLOR=#acbb03]on[/COLOR][/B] est important si vous comptez [B][COLOR=#929e13]dép[/COLOR][COLOR=#97a410]lac[/COLOR][COLOR=#9ca90d]er v[/COLOR][COLOR=#a1af0a]otr[/COLOR][COLOR=#a6b407]e pr[/COLOR][COLOR=#aaba04]oje[/COLOR][COLOR=#afbf01]t [FA]fa fa-arrows[/FA][/COLOR][/B]. Car quand nous allons télécharger les [B][COLOR=#929e13]li[/COLOR][COLOR=#98a50f]br[/COLOR][COLOR=#9eac0b]ai[/COLOR][COLOR=#a5b308]ri[/COLOR][COLOR=#abba04]es[/COLOR][/B] utiles pour le tutoriel, il y aura un dossier [B][COLOR=#929e13]no[/COLOR][COLOR=#97a410]de[/COLOR][COLOR=#9caa0d]_m[/COLOR][COLOR=#a2b00a]od[/COLOR][COLOR=#a7b506]ul[/COLOR][COLOR=#acbb03]es[/COLOR][/B] qui va se créer avec tout les composants nécessaires au bon fonctionnement de notre projet. Le package.json permettra de [B][COLOR=#929e13]ré[/COLOR][COLOR=#98a410]in[/COLOR][COLOR=#9dab0c]st[/COLOR][COLOR=#a3b109]al[/COLOR][COLOR=#a9b705]le[/COLOR][COLOR=#aebe02]r[/COLOR] [/B]toutes ces libraires avec une commande spécifique :[/CENTER] [CODE]npm install[/CODE] [CENTER]Et là le dossier node_modules va se re-télécharger avec toutes les libraires [B][COLOR=#929e13]in[/COLOR][COLOR=#99a60f]di[/COLOR][COLOR=#a0ae0b]qu[/COLOR][COLOR=#a7b506]ée[/COLOR][COLOR=#aebd02]s[/COLOR] [/B]dans le package.json. Pratique non ? Maintenant nous allons créer un fichier [B][COLOR=#929e13]se[/COLOR][COLOR=#99a60f]rv[/COLOR][COLOR=#a0ae0b]er[/COLOR][COLOR=#a7b506].j[/COLOR][COLOR=#aebd02]s [FA]fa fa-code[/FA][/COLOR][/B] et un dossier public, qui contiendra nos fichiers html, nos ressources CSS / Js etc...[/CENTER] [CODE] cd. > server.js mkdir public[/CODE] [CENTER]Et créer un fichier [B][COLOR=#929e13]in[/COLOR][COLOR=#98a50f]de[/COLOR][COLOR=#9eac0b]x.[/COLOR][COLOR=#a5b308]ht[/COLOR][COLOR=#abba04]ml [FA]fa fa-html5[/FA][/COLOR][/B] à l'intérieur de ce dossier.[/CENTER] [CODE]cd public cd. > index.html [/CODE] [CENTER] Nous pouvons donc commencer notre projet. [ATTACH=full]103024[/ATTACH] Pour faire le chat, je vais utiliser [B][COLOR=#929e13]soc[/COLOR][COLOR=#97a410]ke[/COLOR][COLOR=#9ba80e]t.i[/COLOR][COLOR=#a0ae0b]o et [/COLOR][COLOR=#a5b307]exp[/COLOR][COLOR=#aab904]re[/COLOR][COLOR=#aebd02]ss [FA]fa fa-code[/FA][/COLOR][/B]. Dans le terminal, tapez ces deux commandes.[/CENTER] [CODE] npm install --save socket.io npm install --save express [/CODE] [CENTER] Le[B] [COLOR=#929e13]-[/COLOR][COLOR=#97a410]-[/COLOR][COLOR=#9caa0d]s[/COLOR][COLOR=#a2b00a]a[/COLOR][COLOR=#a7b506]v[/COLOR][COLOR=#acbb03]e[/COLOR][/B] de la commande permet d'écrire dans le fichier package.json le fait que vous utilisez une librairie, je vous conseille de le mettre à chaque fois, comme ça si vous souhaitez déplacez les fichiers à distance, vous n'aurez pas besoin [B][COLOR=#929e13]d'[/COLOR][COLOR=#99a60f]en[/COLOR][COLOR=#a0ae0b]vo[/COLOR][COLOR=#a7b506]ye[/COLOR][COLOR=#aebd02]r[/COLOR][/B] le gros dossier node_modules. Maintenant nous allons commencer à écrire la partie [B][COLOR=#929e13]Ja[/COLOR][COLOR=#98a50f]va[/COLOR][COLOR=#9eac0b]Sc[/COLOR][COLOR=#a5b308]ri[/COLOR][COLOR=#abba04]pt[/COLOR][/B], ouvrez avec un éditeur de texte le fichier server.js crée au préalable. Insérez-y ce code :[/CENTER] [CODE]let express = require('express'); let app = express(); let server = require('http').createServer(app); let io = require('socket.io')(server); let port = process.env.PORT || 8080; server.listen(port); app.use(express.static(__dirname + '/public')); app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); // Suite du code [/CODE] [CENTER] Premièrement on initie les [B][COLOR=#929e13][FA]fa fa-usd[/FA] va[/COLOR][COLOR=#99a60f]ri[/COLOR][COLOR=#a0ae0b]ab[/COLOR][COLOR=#a7b506]le[/COLOR][COLOR=#aebd02]s[/COLOR] [/B]plus ou moins utiles à notre projet, là ce n'est que le début, donc toutes ces variables sont importantes, ensuite je précise au serveur d'écouter[B] [COLOR=#929e13][FA]fa fa-assistive-listening-systems[/FA] le [/COLOR][COLOR=#98a50f]po[/COLOR][COLOR=#9eac0b]rt [/COLOR][COLOR=#a5b308]80[/COLOR][COLOR=#abba04]80[/COLOR][/B], qui est stocké dans la variable port, ensuite à l'aide d'[B][COLOR=#929e13]e[/COLOR][COLOR=#96a310]p[/COLOR][COLOR=#9ba80e]x[/COLOR][COLOR=#9fad0b]r[/COLOR][COLOR=#a4b208]e[/COLOR][COLOR=#a8b705]s[/COLOR][COLOR=#adbc03]s[/COLOR][/B], je fais deux choses, je dis que tous [B][COLOR=#929e13]les [/COLOR][COLOR=#97a310]fic[/COLOR][COLOR=#9ba90d]hie[/COLOR][COLOR=#a0ae0a]rs s[/COLOR][COLOR=#a5b308]tat[/COLOR][COLOR=#a9b805]iqu[/COLOR][COLOR=#aebe02]es [FA]fa fa-file[/FA][/COLOR][/B] qui sont placés dans le dossier public doivent être statique, sans ça le CSS ne fonctionnera pas, les images non plus etc.., puis je dis au serveur de [B][COLOR=#929e13]r[/COLOR][COLOR=#97a410]e[/COLOR][COLOR=#9caa0d]n[/COLOR][COLOR=#a2b00a]d[/COLOR][COLOR=#a7b506]r[/COLOR][COLOR=#acbb03]e[/COLOR][/B] le fichier index.html du dossier public si la [B][COLOR=#929e13]re[/COLOR][COLOR=#96a310]qu[/COLOR][COLOR=#9ba80e]êt[/COLOR][COLOR=#9fad0b]e e[/COLOR][COLOR=#a4b208]nv[/COLOR][COLOR=#a8b705]oy[/COLOR][COLOR=#adbc03]ée[/COLOR][/B] provient de l'index. (/) Maintenant, rendez-vous sur [URL]http://127.0.0.1:8080[/URL]. Ça ne fonctionne pas ? C'est normal ne vous en faîte pas, NodeJS ne se lance pas tout seul, à chaque [B][COLOR=#929e13]mo[/COLOR][COLOR=#97a410]di[/COLOR][COLOR=#9caa0d]fi[/COLOR][COLOR=#a2b00a]ca[/COLOR][COLOR=#a7b506]ti[/COLOR][COLOR=#acbb03]on [FA]fa fa-pencil[/FA][/COLOR][/B] du fichier server.js ou quand vous voulez [B][COLOR=#929e13]l[/COLOR][COLOR=#97a410]a[/COLOR][COLOR=#9caa0d]n[/COLOR][COLOR=#a2b00a]c[/COLOR][COLOR=#a7b506]e[/COLOR][COLOR=#acbb03]r[/COLOR] [/B]le serveur, il faut taper cette commande :[/CENTER] [CODE]node server.js[/CODE] [CENTER]Vérifiez bien que vous n'êtes pas dans le dossier [B][COLOR=#929e13]p[/COLOR][COLOR=#97a410]u[/COLOR][COLOR=#9caa0d]b[/COLOR][COLOR=#a2b00a]l[/COLOR][COLOR=#a7b506]i[/COLOR][COLOR=#acbb03]c[/COLOR][/B], pour faire un retour en arrière faîte ceci :[/CENTER] [CODE]cd ../[/CODE] [CENTER]Rafraîchissez la page, et désormais la page devient blanche, plus d'erreur de [B][COLOR=#929e13]co[/COLOR][COLOR=#96a211]nn[/COLOR][COLOR=#9aa70e]ex[/COLOR][COLOR=#9eab0c]io[/COLOR][COLOR=#a2b00a]n r[/COLOR][COLOR=#a5b407]ef[/COLOR][COLOR=#a9b805]us[/COLOR][COLOR=#adbd02]ée [FA]fa fa-ban[/FA][/COLOR][/B] ou je ne sais quoi ! [ATTACH=full]103023[/ATTACH] Avant de commencer la partie la plus intéressante, il faut faire [B][COLOR=#929e13]la [/COLOR][COLOR=#98a50f]ba[/COLOR][COLOR=#9eac0b]se [/COLOR][COLOR=#a5b308]HT[/COLOR][COLOR=#abba04]ML[/COLOR][/B], c'est à dire un [B][COLOR=#929e13]si[/COLOR][COLOR=#96a211]mp[/COLOR][COLOR=#9aa70e]le [/COLOR][COLOR=#9eab0c]fo[/COLOR][COLOR=#a2b00a]rm[/COLOR][COLOR=#a5b407]ul[/COLOR][COLOR=#a9b805]ai[/COLOR][COLOR=#adbd02]re[/COLOR][/B] avec un champ pseudo et message, un ul qui contiendra les messages et une div qui affichera les erreurs. Comme je suis sympa je vous ai préparé une base qui est comme je l'ai décrite, basique ..[/CENTER] [HTML] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>NodeJs chat</title> </head> <body> <form> <input type="text" id="username" placeholder="Votre pseudonyme"><br /> <textarea id="message" placeholder="Votre message"></textarea><br /> <input type="submit" id="submit"> </form> <div id="response"></div> <ul id="messages" style="list-style:none;"></ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> $(document).ready(function(){ let socket = io(); $('#submit').on('click', function(e){ e.preventDefault(); let data = { username: $('#username').val(), message : $('#message').val() }; socket.emit('new message', data); }); // Suite du code }); </script> </body> </html> [/HTML] [CENTER]J'écrirai le code [B][COLOR=#929e13]Ja[/COLOR][COLOR=#96a211]vaS[/COLOR][COLOR=#9ba80d]cr[/COLOR][COLOR=#9fac0b]ip[/COLOR][COLOR=#a2b109]t v[/COLOR][COLOR=#a6b507]is[/COLOR][COLOR=#aab904]ibl[/COLOR][COLOR=#afbf01]e[/COLOR][/B] en bas de la page, mais vous pouvez bien évidemment tout mettre dans un fichier JavaScript et l'inclure sur la page, ça ne posera [B][COLOR=#929e13]au[/COLOR][COLOR=#98a50f]cu[/COLOR][COLOR=#9eac0b]n s[/COLOR][COLOR=#a5b308]ou[/COLOR][COLOR=#abba04]ci[/COLOR][/B]. La partie JavaScript est très basique, j'initie une variable socket, je créer un [B][COLOR=#929e13]év[/COLOR][COLOR=#99a60f]én[/COLOR][COLOR=#a0ae0b]em[/COLOR][COLOR=#a7b506]en[/COLOR][COLOR=#aebd02]t [FA]fa fa-calendar[/FA][/COLOR] [/B]qui, au clique du bouton, va créer une variable data qui contient le champ du pseudo et du message. Ensuite grâce à [B][COLOR=#929e13]so[/COLOR][COLOR=#99a60f]ck[/COLOR][COLOR=#a0ae0b]et[/COLOR][COLOR=#a7b506].i[/COLOR][COLOR=#aebd02]o[/COLOR][/B], je peux envoyer sans passer par de l'Ajax, la requête au serveur, que je vais récupérer dans le fichier server.js, je vais faire le [B][COLOR=#929e13]tr[/COLOR][COLOR=#98a50f]ai[/COLOR][COLOR=#9eac0b]te[/COLOR][COLOR=#a5b308]me[/COLOR][COLOR=#abba04]nt[/COLOR] [/B]et rendre une [B][COLOR=#929e13]e[/COLOR][COLOR=#97a410]r[/COLOR][COLOR=#9caa0d]r[/COLOR][COLOR=#a2b00a]e[/COLOR][COLOR=#a7b506]u[/COLOR][COLOR=#acbb03]r[/COLOR] [/B]si besoin. A la suite du code dans server.js, rajoutez ceci :[/CENTER] [CODE] io.on('connection', function(client){ // commentaire 12 (pour après) client.on('new message', function(data){ // Suite }); client.on('disconnect', function(){ delete client; }); }); [/CODE] [CENTER]Il est important de comprendre ceci, sur la première ligne nous disons que dès qu'on a [B][COLOR=#929e13]un[/COLOR][COLOR=#97a410]e c[/COLOR][COLOR=#9caa0d]on[/COLOR][COLOR=#a2b00a]ne[/COLOR][COLOR=#a7b506]xi[/COLOR][COLOR=#acbb03]on [FA]fa fa-sign-in[/FA][/COLOR][/B], on créer une variable, que j'ai nommée [B][COLOR=#929e13]c[/COLOR][COLOR=#97a410]l[/COLOR][COLOR=#9caa0d]i[/COLOR][COLOR=#a2b00a]e[/COLOR][COLOR=#a7b506]n[/COLOR][COLOR=#acbb03]t [FA]fa fa-user[/FA][/COLOR][/B], qui va être en fait le client en lui-même, chaque client aura des propriétés différentes, tel que l'ID. ([B][COLOR=#929e13]cl[/COLOR][COLOR=#99a60f]ie[/COLOR][COLOR=#a0ae0b]nt[/COLOR][COLOR=#a7b506].i[/COLOR][COLOR=#aebd02]d[/COLOR][/B]) En-dessous je supprime le client s'il se [B][COLOR=#929e13]dé[/COLOR][COLOR=#98a50f]co[/COLOR][COLOR=#9eac0b]nn[/COLOR][COLOR=#a5b308]ec[/COLOR][COLOR=#abba04]te [FA]fa fa-sign-in[/FA][/COLOR][/B]. Vous verrez que socket.io est très simple à manier, une fois que son utilisation est [B][COLOR=#929e13]c[/COLOR][COLOR=#96a211]o[/COLOR][COLOR=#9aa70e]m[/COLOR][COLOR=#9eab0c]p[/COLOR][COLOR=#a2b00a]r[/COLOR][COLOR=#a5b407]i[/COLOR][COLOR=#a9b805]s[/COLOR][COLOR=#adbd02]e[/COLOR] [/B]ça ira tout seul, le code est très [B][COLOR=#929e13]ré[/COLOR][COLOR=#99a60f]pé[/COLOR][COLOR=#a0ae0b]ti[/COLOR][COLOR=#a7b506]ti[/COLOR][COLOR=#aebd02]f[/COLOR][/B]. Vous pouvez apercevoir que je créer une sorte de [B][COLOR=#929e13]l[/COLOR][COLOR=#96a211]i[/COLOR][COLOR=#9aa70e]s[/COLOR][COLOR=#9eab0c]t[/COLOR][COLOR=#a2b00a]e[/COLOR][COLOR=#a5b407]n[/COLOR][COLOR=#a9b805]e[/COLOR][COLOR=#adbd02]r[/COLOR][/B], qui va agir quand on aura l’événement. Pour le moment notre code se résume à :[/CENTER] [LIST] [*]Soumission du formulaire => On émet les valeurs du formulaire [*]Côté serveur => Listener reçoit l’événement, du-coup va traiter les informations. [/LIST] [CENTER]C'est en gros comme ça qu'il faut voir comment ça [B][COLOR=#929e13]fo[/COLOR][COLOR=#98a50f]nc[/COLOR][COLOR=#9eac0b]ti[/COLOR][COLOR=#a5b308]on[/COLOR][COLOR=#abba04]ne[/COLOR][/B]. Nous allons maintenant vérifier les valeurs [B][COLOR=#929e13]cô[/COLOR][COLOR=#98a410]té [/COLOR][COLOR=#9dab0c]se[/COLOR][COLOR=#a3b109]rv[/COLOR][COLOR=#a9b705]eu[/COLOR][COLOR=#aebe02]r [FA]fa fa-cloud[/FA][/COLOR][/B] et renvoyer une erreur s'il devait y en avoir une. A la suite mettez ceci :[/CENTER] [CODE] // Vérification du pseudonyme if(!data.username || typeof data.username == undefined || data.username.length > 25){ client.emit('error message', "Le pseudonyme rentré n'est pas valide !"); return; } // Vérification du message if(!data.message || typeof data.message == undefined || data.message.length > 255){ client.emit('error message', "Le message rentré n'est pas valide !"); return; } // commentaire 13 io.emit('new message', data); [/CODE] [CENTER] Premièrement on regarde si on a [B][COLOR=#929e13]pa[/COLOR][COLOR=#98a410]s d[/COLOR][COLOR=#9dab0c]e p[/COLOR][COLOR=#a3b109]se[/COLOR][COLOR=#a9b705]ud[/COLOR][COLOR=#aebe02]o[/COLOR][/B], si le pseudo est typé [B][COLOR=#929e13]un[/COLOR][COLOR=#99a60f]de[/COLOR][COLOR=#a0ae0b]fi[/COLOR][COLOR=#a7b506]ne[/COLOR][COLOR=#aebd02]d[/COLOR] [/B]ou s'il est supérieur à [B][COLOR=#929e13]25 [/COLOR][COLOR=#97a410]ca[/COLOR][COLOR=#9caa0d]ra[/COLOR][COLOR=#a2b00a]ct[/COLOR][COLOR=#a7b506]èr[/COLOR][COLOR=#acbb03]es[/COLOR][/B], si il correspond à tous ces mauvais critères, on émet au client l'erreur, il en est de même avec le message, pensez bien à chaque fois à stoppez le script en y ajoutant un [B][COLOR=#929e13]r[/COLOR][COLOR=#97a410]e[/COLOR][COLOR=#9caa0d]t[/COLOR][COLOR=#a2b00a]u[/COLOR][COLOR=#a7b506]r[/COLOR][COLOR=#acbb03]n[/COLOR][/B]. Si tout est bon on émet à [B][COLOR=#929e13]to[/COLOR][COLOR=#98a410]ut [/COLOR][COLOR=#9dab0c]le [/COLOR][COLOR=#a3b109]mo[/COLOR][COLOR=#a9b705]nd[/COLOR][COLOR=#aebe02]e [FA]fa fa-users[/FA][/COLOR][/B] le message, avec les mêmes données envoyées. Vous allez peut-être vous dire, comment envoyer [B][COLOR=#929e13]un [/COLOR][COLOR=#98a410]év[/COLOR][COLOR=#9dab0c]én[/COLOR][COLOR=#a3b109]em[/COLOR][COLOR=#a9b705]en[/COLOR][COLOR=#aebe02]t[/COLOR][/B] à un client, et non à tout le monde, c'est très simple, regardez bien le code.[/CENTER] [LIST] [*]client.emit => Envoi uniquement au client [*]io.emit => Envoi à tout le monde même au client concerné [*]client.broadcast.emit => Envoi à tout le monde sauf au client concerné [/LIST] [CENTER]Il y a [B][COLOR=#929e13]d'[/COLOR][COLOR=#96a211]aut[/COLOR][COLOR=#9ba80d]re[/COLOR][COLOR=#9fac0b]s é[/COLOR][COLOR=#a2b109]vé[/COLOR][COLOR=#a6b507]ne[/COLOR][COLOR=#aab904]men[/COLOR][COLOR=#afbf01]t[/COLOR][/B], je vous laisse les chercher sur le net. Maintenant passons côté client, à la suite du code dans votre index.html rajoutez-y ceci :[/CENTER] [CODE] socket.on('error message', function(phrase){ $('#response').html(phrase); }); socket.on('new message', function(data){ $('#messages').append('<li>' + data.username + ' : ' + data.message + '</li>'); }); [/CODE] [CENTER] Essayez maintenant de poster un message, magique non ? Avant de continuer plus loin, il y a un très gros souci, en effet [B][COLOR=#929e13]un[/COLOR][COLOR=#97a410]e f[/COLOR][COLOR=#9caa0d]ai[/COLOR][COLOR=#a2b00a]ll[/COLOR][COLOR=#a7b506]e X[/COLOR][COLOR=#acbb03]SS [FA]fa fa-exclamation-triangle[/FA][/COLOR][/B] est actuellement présente, si un membre vient mettre [B][COLOR=#929e13]du [/COLOR][COLOR=#97a310]co[/COLOR][COLOR=#9ca90d]nt[/COLOR][COLOR=#a0ae0a]en[/COLOR][COLOR=#a5b407]u H[/COLOR][COLOR=#aab904]TM[/COLOR][COLOR=#afbe01]L[/COLOR][/B], celui sera interprété et écrit en HTML, il pourra donc faire rediriger tout le monde vers une mauvaise page, ou écrire en gros, styliser la page à sa guise, bref faire [B][COLOR=#929e13]ce [/COLOR][COLOR=#96a211]que [/COLOR][COLOR=#9ba80d]bo[/COLOR][COLOR=#9fac0b]n l[/COLOR][COLOR=#a2b109]ui [/COLOR][COLOR=#a6b507]se[/COLOR][COLOR=#aab904]mbl[/COLOR][COLOR=#afbf01]e [FA]fa fa-user-secret[/FA][/COLOR][/B]. Voici une fonction pour remédier à ça :[/CENTER] [CODE] function XSSPatcher(texte){ return texte .replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "&'") } [/CODE] [CENTER]Et remplacez la ligne qui insert un nouvel élément dans la liste des messages par :[/CENTER] [CODE]$('#messages').append('<li>' + XSSPatcher(data.username) + ' : ' + XSSPatcher(data.message) + '</li>'); [/CODE] [CENTER]La faille XSS est désormais [B][COLOR=#929e13]p[/COLOR][COLOR=#96a310]a[/COLOR][COLOR=#9ba80e]t[/COLOR][COLOR=#9fad0b]c[/COLOR][COLOR=#a4b208]h[/COLOR][COLOR=#a8b705]é[/COLOR][COLOR=#adbc03]e [FA]fa fa-check[/FA][/COLOR] [/B]! [ATTACH=full]103025[/ATTACH] [/CENTER] [CENTER]Quand un utilisateur arrive sur la page, il tombe sur une page qui ne contient[B] [COLOR=#929e13]au[/COLOR][COLOR=#97a410]cu[/COLOR][COLOR=#9caa0d]n m[/COLOR][COLOR=#a2b00a]es[/COLOR][COLOR=#a7b506]sa[/COLOR][COLOR=#acbb03]ge[/COLOR][/B]. Je vais donc vous montrer comment stocker [B][COLOR=#929e13]les [/COLOR][COLOR=#97a310]5 de[/COLOR][COLOR=#9ba90d]rni[/COLOR][COLOR=#a0ae0a]ers [/COLOR][COLOR=#a5b308]mes[/COLOR][COLOR=#a9b805]sag[/COLOR][COLOR=#aebe02]es[/COLOR][/B] grand maximum afin de les placer dans la page du nouvel arrivant. Pour commencer, tout en haut là où nous définissons nos variables, nous allons rajouter :[/CENTER] [CODE]let lastMessage = new Array();[/CODE] [CENTER] Ensuite, nous allons [B][COLOR=#929e13]env[/COLOR][COLOR=#96a211]oye[/COLOR][COLOR=#9aa70e]r le [/COLOR][COLOR=#9eab0c]tab[/COLOR][COLOR=#a2b00a]lea[/COLOR][COLOR=#a5b407]u au [/COLOR][COLOR=#a9b805]cli[/COLOR][COLOR=#adbd02]ent [FA]fa fa-table[/FA][/COLOR][/B] dès qu'il se connecte, à la place du commentaire [B][COLOR=#929e13]nu[/COLOR][COLOR=#98a50f]mé[/COLOR][COLOR=#9eac0b]ro[/COLOR][COLOR=#a5b308]té [/COLOR][COLOR=#abba04]12[/COLOR][/B], placez cette ligne :[/CENTER] [CODE]client.emit('last message', lastMessage);[/CODE] [CENTER]Et maintenant à la place du [B][COLOR=#929e13]co[/COLOR][COLOR=#97a310]mm[/COLOR][COLOR=#9ca90d]en[/COLOR][COLOR=#a0ae0a]ta[/COLOR][COLOR=#a5b407]ir[/COLOR][COLOR=#aab904]e 1[/COLOR][COLOR=#afbe01]3[/COLOR][/B] mettez-y ceci :[/CENTER] [CODE] lastMessage.push(data.username + ' : ' + data.message); for(var i = lastMessage.length-1; i--;){ if(i == 4){ lastMessage.shift(); } } [/CODE] [CENTER]Ce code va insérer une nouvelle entrée à [B][COLOR=#929e13]l[/COLOR][COLOR=#96a211]'[/COLOR][COLOR=#9aa70e]i[/COLOR][COLOR=#9eab0c]n[/COLOR][COLOR=#a2b00a]d[/COLOR][COLOR=#a5b407]e[/COLOR][COLOR=#a9b805]x [/COLOR][COLOR=#adbd02]0[/COLOR][/B] contenant le message complet à insérer par la suite, ensuite on fait une [B][COLOR=#929e13]b[/COLOR][COLOR=#97a410]o[/COLOR][COLOR=#9caa0d]u[/COLOR][COLOR=#a2b00a]c[/COLOR][COLOR=#a7b506]l[/COLOR][COLOR=#acbb03]e [FA]fa fa-undo[/FA][/COLOR] [/B]qui va vérifier s'il n'y a pas plus de 5 entrées, si c'est le cas on supprime la [B][COLOR=#929e13]pr[/COLOR][COLOR=#96a310]em[/COLOR][COLOR=#9ba80e]iè[/COLOR][COLOR=#9fad0b]re [/COLOR][COLOR=#a4b208]en[/COLOR][COLOR=#a8b705]tr[/COLOR][COLOR=#adbc03]ée[/COLOR][/B]. Maintenant côté client (index.html), nous allons simplement rajouter une boucle qui va récupérer [B][COLOR=#929e13]to[/COLOR][COLOR=#96a211]ut[/COLOR][COLOR=#9aa70e]es [/COLOR][COLOR=#9eab0c]le[/COLOR][COLOR=#a2b00a]s e[/COLOR][COLOR=#a5b407]nt[/COLOR][COLOR=#a9b805]ré[/COLOR][COLOR=#adbd02]es[/COLOR][/B] du tableau afin de les ajouter à notre page HTML.[/CENTER] [CODE] socket.on('last message', function(arr){ for(i = 0;i < arr.length;i++){ $("#messages").append('<li>' + XSSPatcher(arr[i]) + '</li>'); } }); [/CODE] [CENTER] Et voilà, mettez un message, [B][COLOR=#929e13]ra[/COLOR][COLOR=#97a310]fr[/COLOR][COLOR=#9ca90d]aî[/COLOR][COLOR=#a0ae0a]ch[/COLOR][COLOR=#a5b407]is[/COLOR][COLOR=#aab904]se[/COLOR][COLOR=#afbe01]z[/COLOR] [/B]la page, que constatez-vous ? Eh oui les derniers messages [B][COLOR=#929e13]ap[/COLOR][COLOR=#97a410]pa[/COLOR][COLOR=#9caa0d]ra[/COLOR][COLOR=#a2b00a]is[/COLOR][COLOR=#a7b506]se[/COLOR][COLOR=#acbb03]nt [FA]fa fa-eye[/FA][/COLOR] [/B]! [ATTACH=full]103026[/ATTACH] Le tutoriel touche à sa fin, comme je l'ai dit en début il est probable que j'emploie [B][COLOR=#929e13]de [/COLOR][COLOR=#96a310]ma[/COLOR][COLOR=#9aa70e]uv[/COLOR][COLOR=#9eac0b]ai[/COLOR][COLOR=#a3b109]s t[/COLOR][COLOR=#a7b506]er[/COLOR][COLOR=#abba04]me[/COLOR][COLOR=#afbf01]s[/COLOR][/B], ou de mauvaises manières de coder, n'hésitez donc pas à me le reprocher ! Si vous avez des questions, n'hésitez pas à venir en [B][COLOR=#929e13]p[/COLOR][COLOR=#98a50f]r[/COLOR][COLOR=#9eac0b]i[/COLOR][COLOR=#a5b308]v[/COLOR][COLOR=#abba04]é[/COLOR] [/B]ou à poster vos questions dans les commentaires afin que la [B][COLOR=#929e13]co[/COLOR][COLOR=#98a50f]mm[/COLOR][COLOR=#9eac0b]un[/COLOR][COLOR=#a5b308]au[/COLOR][COLOR=#abba04]té [FA]fa fa-users[/FA][/COLOR] [/B]puisse vous répondre. Si vous voulez [B][COLOR=#929e13]l[/COLOR][COLOR=#96a310]a [/COLOR][COLOR=#9ba80e]s[/COLOR][COLOR=#9fad0b]u[/COLOR][COLOR=#a4b208]i[/COLOR][COLOR=#a8b705]t[/COLOR][COLOR=#adbc03]e[/COLOR] [/B]de ce tutoriel, dîtes-le moi dans les commentaires ! (membre est entrain d'écrire, membre a rejoint le salon ..) Merci à [USER=292225]@Louis[/USER] pour le [B][COLOR=#929e13]h[/COLOR][COLOR=#97a410]e[/COLOR][COLOR=#9caa0d]a[/COLOR][COLOR=#a2b00a]d[/COLOR][COLOR=#a7b506]e[/COLOR][COLOR=#acbb03]r[/COLOR] [/B]et les [B][COLOR=#929e13]sé[/COLOR][COLOR=#98a410]pa[/COLOR][COLOR=#9dab0c]ra[/COLOR][COLOR=#a3b109]te[/COLOR][COLOR=#a9b705]ur[/COLOR][COLOR=#aebe02]s[/COLOR][/B]. :tchuss:[/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Réaliser un chat instantanée avec NodeJs
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut