push php en 15 lignes de code

Push php en 15 lignes de code

L’objet de ce court article est de montrer comment faire du push en php depuis un serveur http. On entend par push, le fait que le serveur envoie, à sa propre initiative, une information au client. Nous réaliserons notre exemple en php côté serveur, en javascript, ajax ainsi que la librairie javascript jquery côté client. distincts. XHR2 rend les choses beaucoup plus simples et faciles.

Prérequis

– des connaissances de base en php
– un serveur http correctement configuré avec php
– un navigateur
– la librairie javascript jquery

Intérêt du push

Lors d’une connexion http classique, le client initie une requête (http), à laquelle répond, immédiatement, le serveur. Si l’on souhaite obtenir des informations en temps réel, sans savoir si celles-ci ont changé, le client doit faire, sans arrêt, des requêtes (http) au serveur.

Dans ce cadre, de nombreuses requêtes (http) seront inutiles, puisque les informations reçues ou demandées n’auront pas nécessairement changé depuis la dernière requête. On a donc, dans ce cas, une consommation de bande passante qui est inutile.

Dans le cadre du mode push, seule de la bande passante utile (qui renvoie des données utiles) est consommée, puisque le serveur ne renverra une données que si elle a changé, à sa propre initiative.

Long Polling

Le long polling est une technique parmi d’autres (comet, pushlet…) permettant de faire du push. Le push http consiste en l’envoi de données au client à l’initiative du serveur. Technique qui consiste à initier une connexion avec le serveur http qui ne répondra qu’à partir du moment où il aura une information à transmettre.

Entre le moment de l’initialisation de la connexion, et celui de la réponse, la connexion entre le client et le serveur est maintenue via une boucle infinie. Lorsqu’une donnée est renvoyée par le serveur, la connexion est rompue, le client doit alors réinitier une connexion qui sera maintenue jusqu’à la prochaine donnée envoyée, et ainsi de suite.

Notre exemple

L’exemple va consister à envoyer au client l’heure uniquement lorsque la minute aura changé. Notre exemple se décompose en deux parties, une côté client en javascript, ajax et jquery et l’autre côté serveur en php.

Le script côté serveur

Ce script est relativement simple, puisqu’il renvoie l’heure courante uniquement lorsque la minute change. On utilise donc une boucle infinie qui s’arrête lorsque la minute du temps courant change. Avant l’arrêt de la boucle, le script renvoie une chaine de caractères contenant l’heure courante.

<?php
$minute = date("i");
 
while(1) {


  if(isMinuteChanged($minute)) {
    echo json_encode(date("G").":".date("i"));
    break;
  }
 

  sleep(3);
}
 
function isMinuteChanged(&$savedMinute) {
  $currentMinute = date("i");
  if ( $savedMinute != $currentMinute ) {
    $savedMinute = $currentMinute;
    return true;
  }
  return false;
}
?>

Le script côté client en javascript

Nous créons ici une page html comportant une balise div dans laquelle sera affichée l’heure envoyée par le script côté serveur.

L’heure est envoyée par le serveur uniquement lorsque celle-ci change. Le script appelle une appelle la fonction connect() lorsque la page html est chargée via:

$(document).ready( function() {
  $("#textDiv").empty(); 
  $("#textDiv").append("HEURE"); // On colle la chaine "HEURE" dans le div textDiv
  connect(); 
});

La fonction connect() initialise une connexion avec le serveur http et plus particulièrement le script longPolling.php chargé de renvoyer l’heure lorsqu’elle change.

Lorsque le script php renvoie un résultat (ici l’heure), notre script côté client appelle la fonction callComplete().

function connect() {


  $.post('longPolling.php', {}, callComplete, 'json');
}

La fonction callComplete() est chargée de mettre à jour le contenu de la balise div avec l’heure qu’a renvoyée le script php, puis de se reconnecter avec ce même script php jusqu’au prochain renvoi de l’heure.

function callComplete(response) {

  $("#textDiv").empty();

  $("#textDiv").append(response);

  connect();
};

Le fichier complet côté client

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>;
<script type="text/javascript">
  function callComplete(response) {
    $("#textDiv").empty();
    $("#textDiv").append(response);
    connect();
  };
 
  function connect() {
    $.post('longPolling.php', {}, callComplete, 'json');
  };
 
  $(document).ready( function() {
    $("#textDiv").empty();
    $("#textDiv").append("HEURE");
    connect();
  });
</script>
</head>
<body>
LONG POLLING TEST
<div id="textDiv" style="width:300; height:180; overflow:auto; border:solid 1px black;">
</div>
</body>
</html>

Conclusion

Cet exemple montre la facilité de mise en oeuvre du push http.

Bien entendu, d’autres techniques existent et devraient faire l’objet de prochains articles. J’espère que cet article vous sera utile.
N’hésitez pas à poser vos questions par le biais des commentaires.

push php en 15 lignes de code