Aller au contenu
Calypso

Utiliser Socket.IO avec Nginx

Messages recommandés

Hello tout le monde !

 

Aujourd'hui, plus question de coder son site internet en PHP: c'est dépassé et on peut faire beaucoup mieux.

Multiplier ses stacks (PHP + JS + Node + Nginx FIle Serving) n'est pas une solution fiable.

 

Faites plutôt que du Javascript pour le front-end et que du NodeJS pour le back-end.

Couplez-le avec Socket.IO et obtenez un site 100% interactif et faites des instructions côté serveur sans avoir besoin à rafraîchir la page dans le navigateur.

 

     I. Socket.IO ? C'est quoi ?!

 

Socket.IO permet de créer un canal de communication entre le client et le serveur principalement par l'API WebSocket.

Cela permet donc de communiquer simplement entre le serveur et le client (ou l'inverse) sans avoir à effectuer une requête au serveur. Ce qui rend le site interactif !

 

Cependant, il est parfois compliqué de l'installer sur une machine pour le coupler avec son site Internet. Je parlerai ici de Nginx. Je vous encourage à utiliser ce serveur http pour ce genre d'utilisation.II. Socket.IO avec Nginx

 

 

     II. Socket.IO avec Nginx

 

Pour que Socket.io puisse fonctionner correctement, on va tout simplement "proxifier" notre application NodeJS. C'est-à-dire que nous allons faire en sorte que notre application NodeJS (qui est par exemple sur le port 3000) utilise le même port que notre serveur Web. Ainsi, cette configuration nous permettra facilement de faire communiquer le client et le serveur ainsi que d'utiliser le certificat SSL si celui-ci a lieu.

 

Dans la configuration de votre vhost, il suffit d'ajouter un " Location ". C'est l'endroit où vous souhaitez mettre votre application Node. Dans mon cas, je souhaite que mon application soit localisée dans /app (mon_domaine.fr/app)

 

Location /app
{
      ## On set le HEADER ici
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy true;

	  ## On indique l'emplacement de l'app (ici, sur le port 3000)
      proxy_pass http://localhost:3000;
	  ## On desactive la redirection
      proxy_redirect off;

	  ## On donne des informations au header nottament la version de HTTP
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
}

 

Il suffit maintenant de redémarrer votre serveur Nginx et Socket.IO est apte à fonctionner.

 

     III. La base de Socket.IO

 

Voici la base d'une application NodeJS utilisant Socket.io avec Express:

 

// On inclut le module Express
var app = require('express')();
// On inclut le module http et on créé un mini serveur http à partir d'Express
var http = require('http').Server(app);
// On inclut Socket.IO et on l'initialise avec notre mini serveur HTTP
var io = require('socket.io')(http);

// On envoie le fichier index.html au serveur
// J'ai précisé /app car c'est ici que je souhaite placer mon application !
app.get('/app', function(req, res){
  res.sendFile('./index.html');
});

// Attends la connexion d'un client et affiche un message
io.on('connection', function(socket){
  console.log('Un utilisateur s\'est connecté sur le site');
});

// On écoute le serveur HTTP sur le port 3000
http.listen(3000, function(){
  console.log('Listening on *:3000');
});

 

Côté client rien de plus simple:

 

// On inclut notre librairie socket.io.js. Attention ! Socket.io utilise ce chemin pour la librairie client
<script src="/socket.io/socket.io.js"></script>

<script>
  // On créé une socket côté client avec le serveur
  var socket = io.connect();
</script>

 

C'est tout bon ! Lorsque vous vous rendez sur votre site (mon_domaine.fr/app), on obtient bien un message côté serveur: Un client s'est connecté

Vous pouvez maintenant alors facilement communiquer entre le client et le serveur.

 

 

N'hésitez pas si vous avez des questions !

A bientôt :)

Calypso

Partager ce message


Lien à poster
Partager sur d’autres sites

@Mei S'il ose dire encore une fois que PHP est dépassé, je l'assassine ! C'est lui qui ralentit FE ! xD

Bon OK donne moi un exemple de site en NodeJS s'il te plait et quid de HTML / CSS alors ?

Partager ce message


Lien à poster
Partager sur d’autres sites

Plein d'exemple possible. Facebook utilise React mais ça reste le même principe. Tout est interactif.

Voici un site que je connais bien qui utilise Socket.IO: 

Contenu Masqué

    Répondez au message pour visualiser le contenu

 

Le HTML / CSS reste toujours présent bien entendu.

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 16 heures, Calypso a dit :

Voici un site que je connais bien qui utilise Socket.IO: 

Contenu Masqué

    Répondez au message pour visualiser le contenu

Ce site utilise réellement Socket.io, a la limite du nodejs, du react, vuejs, angular ou autre et une simple requête sur une base de données est largement suffisant.

Après dire que ça rend le site interactif, je suis pas trop d'accord surtout dans le cas de soundslikeyou.

 

J'utiliserai socket.io sur des jeux en ligne ou des chats, des applications collaboratives (ex: google sheets, ...)

 

Mais en tout cas merci pour les explications de l'utilisation de socket.io avec nginx.

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 17 heures, ASIKOO a dit :

@Mei S'il ose dire encore une fois que PHP est dépassé, je l'assassine ! C'est lui qui ralentit FE ! xD

Bon OK donne moi un exemple de site en NodeJS s'il te plait et quid de HTML / CSS alors ?

 

Paypal, Netflix, GitHub, Magic Leap, avocode

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 23 heures, ASIKOO a dit :

@Mei S'il ose dire encore une fois que PHP est dépassé, je l'assassine ! C'est lui qui ralentit FE ! xD

Bon OK donne moi un exemple de site en NodeJS s'il te plait et quid de HTML / CSS alors ?

Je suis d'accord avec toi astico ! Le PHP n'est pas fini ! Moi je code encore en HTML/CSS/PHP et j'évite au maximum le JS tout simplement car si on désactive le js dans son navigateur on l'a dans le cul

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 15/05/2018 à 18:40, Sgt Fatality a dit :

En même temps si tu désactives le JS dans ton navigateur tu fais plus grand chose ^^

Pas forcément tu peux faire beaucoup de choses en désactivant ton JS et en ayant un site en PHP :D

Partager ce message


Lien à poster
Partager sur d’autres sites

Eheh, fier de toi mon petit Caly, c'est de bons sentiers du web que tu es en train de prendre là :D

Ta partie sur l'intégration avec nginx est un peu trop vulgarisée à mon goût mais c'est plus mon soucis de précision qui est en cause, c'est quand même un sympa partage, qui aurait pu être encore mieux avec un exemple concret d'utilisation (où l'on voit vraiment en quoi on peut rendre un site plus 'interactif' ;) ) mais c'est encore moi qui fais des chichis. 

 

Le PHP, c'était bien, mais pour moi le JS qui a été si longtemps moqué lui a clairement volé la vedette à tous les niveaux. Puis bon, des Jean Michel Lambda qui désactivent (et donc connaissent) le JS de leur navigateur, j'pense qu'on peut dire qu'il y en a peu. 

 

Merci Caly !

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×

Information importante

By using this site, you agree to our Conditions d’utilisation.