Créer une interaction serveur/client avec SOCKET.IO

Hichxm

Membre
Inscription
15 Octobre 2013
Messages
1 118
Réactions
227
Points
5 721
RGCoins
0
472149Sanstitre1.png

Socket.io est une librairie Node.js qui nous permet de créer
des applications en temps réel.

Plusieurs site web utilise cette librairie

comme agar.io, wings.io.....

Le système est assez simple pour commencez
le client envoie une requête au serveur Node.js
qui lui lui renvoie toute les informations, les pages html...
et surtout renvoie la librairie client de Socket.io


Lorsque le client reçois toute les librairies nécessaire
il peut entamé la connexion Serveur/Client

660023jkl.png

Dans se tutoriel nous allons voir comment
utilisé
Socket.io avec un
.

HTTP SERVER & SOCKET.IO

Tout d'abord nous allons taper cette commande

à la racine de votre dossier contenant votre serveur:
Code:
npm install socket.io --save
Une fois cette commande tapé vous allé
le voir qu'un dossier va apparaitre contenant un
sous-dossier nommé soket.io

Puis nous allons pouvoir commencé concrètement

à codé notre serveur en créer un fichier
JavaScript (serveur.js) avec ses lignes:
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);
  });
}
Sur ses lignes de code on crée un serveur http, on dit à socket.io
de se référer à se serveur http puis on lance le serveur.
On envoie au client via la fonction handler
la page index.html contenant tout le code nécessaire
à socket.io.

Désormais nous allons passé au code JavaScript du fichier
index.html qui sera pas si compliqué avec seulement ses ligne de code:
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>
Maintenant nous allons utilisé socket.io
pour envoyer des messages à la console
Node.js

Premièrement nous ajoutons ses lignes de commande
au fichier serveur.js qui vont nous permettre de

récupéré chaque connexion.
Code:
io.on('connection', function(socket){
 
});
Maintenant nous allons dire à socket.io
d'écouter seulement les requête où
le nom de la requête est 'message'
Code:
io.on('connection', function(socket){

  socket.on('message', function(data){
    console.log(data);
  })

});
Pour que le serveur reçoive une requête il faut
que le client en envoie une grâce à ses ligne de code:
Code:
socket.emit('message', "SALUT");
321509Screenshot1.png


Mais je vous conseille la
documentation de ou celle
de
qui sont bien plus complète que se tutoriel.


FICHIER SERVEUR.JS:
FICHIER INDEX.HTML:
 
Haut