WebsSocket
Principes généraux
Le protocole WebSocket permet d'ouvrir un canal de communication bidirectionnel sur un socket TCP pour les navigateurs et les serveurs web.
Il permet donc :
la notification au client d'un changement d'état du serveur,
l'envoi de données du serveur vers le client, sans que ce dernier ait à effectuer une requête.
Méthode : Envoi de données du serveur vers le client (navigateur Web)
Sur l'exemple ci-dessous :
la première ligne envoie au site web connecté une variable nommée 'codePostal' qui contient la valeur 87280.
la deuxième ligne envoie au site web connecté une variable nommée 'distance' qui contient le contenu de la variable 'km'.
io.emit('codePostal',87000);
io.emit('distance',km);
Méthode : Réception des messages coté navigateur
Le code est aussi écrit en JavaScript et fait appel à une fonction de callback :
un exemple est donné ci-dessous :
Lorsqu'un message nommé "codePostal" arrive , il déclenche l'exécution de la fonction (affiche "vous habitez à Limoges" sur la console si la valeur reçue est égale à 87000)
socket.on('codePostal',function(message){
if (message==87000")
console.log("vous habitez à Limoges");
});
Méthode : Envoi de données de la page web vers le serveur.
Ce code est toujours du JavaScript, il utilise les bibliothèques 'jQuery' et 'WebSocket'
la première ligne fait appel à la fonction click de jQuery (noté '$') pour détecter l'appui sur le bouton 'bpR' (le bouton à été créé avec un identifiant id="bpR")
la deuxième ligne envoie au serveur une variable nommée 'couleur' qui contient la valeur 1 .
$('#bpR').click(function () {
socket.emit('couleur',1);})
Méthode : Réception des messages coté serveur
Nous avons à nouveau une fonction de callback :
Lorsque le message nommé "couleur" arrive , il déclenche l'exécution de la fonction et affiche "couleur choisie : 1" .
socket.on('couleur',function(col){
console.log("couleur choisie :"+col);
});
Remarque : Un petit bout de code pour répéter régulièrement une action...
Un peu plus de précision --> ici
setInterval(function(){
//le code écrit dans cette fonction se répetera en toute les 600ms // //la durée de répétition (en ms) est à écrire aprés "}," ici 600 //},600);