Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Wiki
Pages
Dernière activité
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
Créer une interaction serveur/client avec SOCKET.IO
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="Hichxm" data-source="post: 6919445" data-attributes="member: 332285"><p style="text-align: center"><span style="font-family: 'Poppins'"><img src="http://img15.hostingpics.net/pics/472149Sanstitre1.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px"><strong>Socket.io</strong> est une librairie <strong>Node.js</strong> qui nous permet de créer</span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px">des <strong>applications </strong>en temps réel.</span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px">Plusieurs site web utilise <strong>cette librairie</strong></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'">comme agar.io, wings.io.....</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'"></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'">Le système est assez simple pour commencez</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'">le client envoie une requête au serveur <strong>Node.js</strong></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'">qui lui lui renvoie <strong>toute les informations</strong>, les pages html...</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'">et surtout renvoie la librairie client de <strong>Socket.io</strong></span></span></p> <p style="text-align: center"><span style="font-size: 12px"></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'">Lorsque le client reçois toute les librairies nécessaire</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'">il peut entamé la connexion <strong>Serveur/Client</strong></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><strong><span style="font-family: 'Poppins'"><img src="http://img15.hostingpics.net/pics/660023jkl.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></strong></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px">Dans se tutoriel nous allons voir comment</span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px">utilisé </span><strong><span style="font-size: 12px">Socket.io</span></strong><span style="font-size: 12px"> avec</span> <span style="font-size: 12px">un <a href="https://nodejs.org/api/http.html" target="_blank">serveur http</a></span></span><span style="font-size: 12px"><span style="font-family: 'Poppins'">.</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'"></span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 18px">HTTP SERVER & SOCKET.IO</span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 18px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px">Tout d'abord nous allons taper <strong>cette commande</strong></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'">à la racine de votre dossier contenant votre serveur:</span></span></p><p><span style="font-family: 'Poppins'">[CODE]npm install socket.io --save[/CODE]</span></p><p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px">Une fois cette commande tapé vous allé </span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px">le voir qu'un <strong>dossier va apparaitre</strong> contenant un</span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px"><strong>sous-dossier</strong> nommé soket.io</span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px">Puis nous allons pouvoir commencé concrètement</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Poppins'">à codé notre serveur en créer un fichier </span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 12px"><strong>JavaScript </strong>(serveur.js) avec ses lignes:</span></span></p> <p style="text-align: left">[CODE]var server = require('http').createServer(handler);</p> <p style="text-align: left">var io = require('socket.io')(server);</p> <p style="text-align: left">var fs = require('fs');</p> <p style="text-align: left"></p> <p style="text-align: left">server.listen(80);</p> <p style="text-align: left"></p> <p style="text-align: left">function handler(req, res){</p> <p style="text-align: left"> fs.readFile(__dirname + '/index.html', function(err, data){</p> <p style="text-align: left"> res.writeHead(200);</p> <p style="text-align: left"> res.end(data);</p> <p style="text-align: left"> });</p> <p style="text-align: left">}</p> <p style="text-align: left">[/CODE]</p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">Sur ses lignes de code on crée un serveur <strong>http</strong>, on dit à <strong>socket.io</strong></span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">de se référer à se serveur <strong>http </strong>puis on lance le serveur.</span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">On envoie au client via la fonction <em>handler</em></span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">la page <strong><em>index.html</em></strong> contenant tout le code nécessaire</span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">à <strong>socket.io</strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">Désormais nous allons passé au code <strong>JavaScript </strong>du fichier</span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px"><strong><em>index.html </em></strong>qui sera pas si compliqué avec seulement ses ligne de code:</span></span></p> <p style="text-align: left">[HTML]</p> <p style="text-align: left"><script src="https://cdn.socket.io/socket.io-1.4.5.js"></script></p> <p style="text-align: left"><script type="text/javascript"></p> <p style="text-align: left"></p> <p style="text-align: left">var socket = io('127.0.0.1:80');</p> <p style="text-align: left"></p> <p style="text-align: left"></script>[/HTML]</p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">Maintenant </span></span><span style="font-size: 12px"><span style="font-family: 'Verdana'">nous allons utilisé <strong>socket.io</strong></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Verdana'">pour envoyer des messages à la console </span><span style="font-size: 12px"><span style="font-family: 'Verdana'"><strong>Node.js</strong></span></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-size: 12px"><span style="font-family: 'Verdana'"></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">Premièrement</span></span><span style="font-size: 12px"><span style="font-family: 'Verdana'"> nous ajoutons ses lignes de commande</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Verdana'">au fichier <strong><em>serveur.js </em></strong>qui vont nous permettre de</span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">récupéré</span></span><span style="font-size: 12px"><span style="font-family: 'Verdana'"> chaque connexion.</span></span></p> <p style="text-align: left">[CODE]</p> <p style="text-align: left">io.on('connection', function(socket){</p> <p style="text-align: left"></p> <p style="text-align: left">});</p> <p style="text-align: left">[/CODE]</p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">Maintenant nous allons dire à <strong>socket.io</strong></span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">d'écouter seulement les requête où</span></span></p> <p style="text-align: center"><span style="font-family: 'Verdana'"><span style="font-size: 12px">le nom de la <strong>requête </strong>est '<em>message</em>'</span></span></p> <p style="text-align: left">[CODE]io.on('connection', function(socket){</p> <p style="text-align: left"></p> <p style="text-align: left"> socket.on('message', function(data){</p> <p style="text-align: left"> console.log(data);</p> <p style="text-align: left"> })</p> <p style="text-align: left"></p> <p style="text-align: left">});</p> <p style="text-align: left">[/CODE]</p> <p style="text-align: left"></p> <p style="text-align: center"><span style="font-size: 12px">Pour que le <strong>serveur reçoive une requête</strong> il faut</span></p> <p style="text-align: center"><span style="font-size: 12px">que le client en envoie une grâce à <strong>ses ligne de code:</strong></span></p> <p style="text-align: left">[CODE]socket.emit('message', "SALUT");[/CODE]</p> <p style="text-align: center"><img src="http://img15.hostingpics.net/pics/321509Screenshot1.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-size: 12px">Mais je vous conseille la</span></p> <p style="text-align: center"><span style="font-size: 12px">documentation de <a href="http://socket.io/docs/" target="_blank">SOCKET.IO</a> ou celle </span></p> <p style="text-align: center"><span style="font-size: 12px">de </span><a href="http://devdocs.io/socketio/" target="_blank"><span style="font-size: 12px">DevDocs</span></a> <span style="font-size: 12px">qui sont bien plus complète que se tutoriel.</span></p> <p style="text-align: center"><span style="font-size: 12px"></span></p> <p style="text-align: center"><span style="font-size: 12px"></span></p> <p style="text-align: center"><span style="font-size: 12px">FICHIER <em>SERVEUR.JS</em>: <a href="http://pastebin.com/QpndD9ie" target="_blank">pastebin.com/QpndD9ie</a></span></p> <p style="text-align: center"><span style="font-size: 12px">FICHIER <em>INDEX.HTML</em>: <a href="http://pastebin.com/dJpCZ1Rz" target="_blank">pastebin.com/dJpCZ1Rz</a></span></p></blockquote><p></p>
[QUOTE="Hichxm, post: 6919445, member: 332285"] [CENTER][FONT=Poppins][IMG]http://img15.hostingpics.net/pics/472149Sanstitre1.png[/IMG] [SIZE=3][B]Socket.io[/B] est une librairie [B]Node.js[/B] qui nous permet de créer des [B]applications [/B]en temps réel. Plusieurs site web utilise [B]cette librairie[/B][/SIZE][/FONT] [SIZE=3][FONT=Poppins]comme agar.io, wings.io..... Le système est assez simple pour commencez le client envoie une requête au serveur [B]Node.js[/B] qui lui lui renvoie [B]toute les informations[/B], les pages html... et surtout renvoie la librairie client de [B]Socket.io[/B][/FONT] [FONT=Poppins]Lorsque le client reçois toute les librairies nécessaire il peut entamé la connexion [B]Serveur/Client[/B][/FONT] [B][FONT=Poppins][IMG]http://img15.hostingpics.net/pics/660023jkl.png[/IMG][/FONT][/B][/SIZE] [FONT=Poppins][SIZE=3]Dans se tutoriel nous allons voir comment utilisé [/SIZE][B][SIZE=3]Socket.io[/SIZE][/B][SIZE=3] avec[/SIZE] [SIZE=3]un [URL='https://nodejs.org/api/http.html']serveur http[/URL][/SIZE][/FONT][SIZE=3][FONT=Poppins]. [/FONT][/SIZE] [FONT=Poppins][SIZE=5]HTTP SERVER & SOCKET.IO [/SIZE] [SIZE=3]Tout d'abord nous allons taper [B]cette commande[/B][/SIZE][/FONT] [SIZE=3][FONT=Poppins]à la racine de votre dossier contenant votre serveur:[/FONT][/SIZE][/CENTER] [FONT=Poppins][CODE]npm install socket.io --save[/CODE][/FONT] [CENTER][FONT=Poppins][SIZE=3]Une fois cette commande tapé vous allé le voir qu'un [B]dossier va apparaitre[/B] contenant un [B]sous-dossier[/B] nommé soket.io Puis nous allons pouvoir commencé concrètement[/SIZE][/FONT] [SIZE=3][FONT=Poppins]à codé notre serveur en créer un fichier [/FONT][/SIZE] [FONT=Poppins][SIZE=3][B]JavaScript [/B](serveur.js) avec ses lignes:[/SIZE][/FONT][/CENTER] [LEFT][CODE]var server = require('http').createServer(handler); var io = require('socket.io')(server); var fs = require('fs'); server.listen(80); function handler(req, res){ fs.readFile(__dirname + '/index.html', function(err, data){ res.writeHead(200); res.end(data); }); } [/CODE][/LEFT] [CENTER][FONT=Verdana][SIZE=3]Sur ses lignes de code on crée un serveur [B]http[/B], on dit à [B]socket.io[/B] de se référer à se serveur [B]http [/B]puis on lance le serveur. On envoie au client via la fonction [I]handler[/I] la page [B][I]index.html[/I][/B] contenant tout le code nécessaire à [B]socket.io[/B]. Désormais nous allons passé au code [B]JavaScript [/B]du fichier [B][I]index.html [/I][/B]qui sera pas si compliqué avec seulement ses ligne de code:[/SIZE][/FONT][/CENTER] [LEFT][HTML] <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> <script type="text/javascript"> var socket = io('127.0.0.1:80'); </script>[/HTML][/LEFT] [CENTER][FONT=Verdana][SIZE=3]Maintenant [/SIZE][/FONT][SIZE=3][FONT=Verdana]nous allons utilisé [B]socket.io[/B] pour envoyer des messages à la console [/FONT][SIZE=3][FONT=Verdana][B]Node.js[/B] [/FONT][/SIZE][/SIZE] [FONT=Verdana][SIZE=3]Premièrement[/SIZE][/FONT][SIZE=3][FONT=Verdana] nous ajoutons ses lignes de commande au fichier [B][I]serveur.js [/I][/B]qui vont nous permettre de[/FONT][/SIZE] [FONT=Verdana][SIZE=3]récupéré[/SIZE][/FONT][SIZE=3][FONT=Verdana] chaque connexion.[/FONT][/SIZE][/CENTER] [LEFT][CODE] io.on('connection', function(socket){ }); [/CODE][/LEFT] [CENTER][FONT=Verdana][SIZE=3]Maintenant nous allons dire à [B]socket.io[/B] d'écouter seulement les requête où le nom de la [B]requête [/B]est '[I]message[/I]'[/SIZE][/FONT][/CENTER] [LEFT][CODE]io.on('connection', function(socket){ socket.on('message', function(data){ console.log(data); }) }); [/CODE] [/LEFT] [CENTER][SIZE=3]Pour que le [B]serveur reçoive une requête[/B] il faut que le client en envoie une grâce à [B]ses ligne de code:[/B][/SIZE][/CENTER] [LEFT][CODE]socket.emit('message', "SALUT");[/CODE][/LEFT] [CENTER][IMG]http://img15.hostingpics.net/pics/321509Screenshot1.png[/IMG] [SIZE=3]Mais je vous conseille la documentation de [URL='http://socket.io/docs/']SOCKET.IO[/URL] ou celle de [/SIZE][URL='http://devdocs.io/socketio/'][SIZE=3]DevDocs[/SIZE][/URL] [SIZE=3]qui sont bien plus complète que se tutoriel. FICHIER [I]SERVEUR.JS[/I]: [URL='http://pastebin.com/QpndD9ie']pastebin.com/QpndD9ie[/URL] FICHIER [I]INDEX.HTML[/I]: [URL='http://pastebin.com/dJpCZ1Rz']pastebin.com/dJpCZ1Rz[/URL][/SIZE][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Créer une interaction serveur/client avec SOCKET.IO
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut