Beemoon and Co

Voici une méthode pour recharger automatiquement la page de votre site coté utilisateur. Contrairement à la balise meta qui fixe un délai pour recharger ici on va déterminer quand on veut la période!

il faut pour cela que la page à recharger soit en php et inclure ce code

 
// Reload page
// a une date et heure donnée
//Date(year, month, day, hours, minutes, seconds, milliseconds);
refreshPageNextDayAt(new Date(2015,11,15,12,05));
// a une heure donnée vi un fichier inclu contenant un timestamp
//refreshPageNextDayAt(<?php include_once('refreshtime.inc'); ?>);
// Recharge la page
function refreshPageNextDayAt(_date) {
    var _now = new Date();
    
    if (typeof _date === "object"){
        
        var refreshDate = _date;
    }
    
    if (typeof _date === "number" && _date < 24){
        var refreshDate = new Date(_now.getFullYear(), _now.getMonth(), _now.getDate()+1,_date);
    } else {
        var refreshDate = new Date(_now.getFullYear(), _now.getMonth(), _now.getDate()+1,3);
    }
    
    if (typeof _date === "number" && _date > _now){
        var refreshDate = _date;
    }
    
    //alert(refreshDate);
    if (typeof _date === "object"){
        setTimeout(function() { window.location.reload(true); }, refreshDate.getTime()-_now.getTime());
    } else {
        setTimeout(function() { window.location.reload(true); }, refreshDate -_now.getTime());
    }
}

La fonction refreshPageNextDayAt() prend en paramètre une date (et heure) qui sera la date de reload de la page. Si vous mettez cette date dans un fichier via votre interface d’admin ou autre vous pouvez forcer le reload de la page de votre visiteur.

C’est quoi le event-stream??? Ben je ne connaissais pas jusqu’à hier!!! Je l’ai découvert en cherchant une solution pour pousser la mise à jour d’une page vers le visiteur qui est en train de la consulter. Et ceci sans faire un timing de reload mais en realtime.

A la base je bossais sur un projet d’écran d’affichage. L’idée est que l’écran doit être automatiquement mise à jour quand le gestionnaire de l’écran modifiait les slides qui défilent. (Je vais bientôt mettre le projet sur GitHub).

Comment ça marche le event-stream?

C’est un peut comme du client-serveur. Le browser du visiteur (dans mon cas le panneau d’affichage) est le client. Le site hébergé sur le serveur est la partie serveur. Jusque là normal. Mais habituellement si on veut que les informations s’actualisent le visiteur doit faire un F5 ou Ctrl+R ou Ctrl+F5. Problème… moi je n’ai personne pour faire à la mano cette action sur mon écran sans clavier à 3 mètres de haut sur le mur! Et bien là c’est le serveur qui pousse (en continue) les modifications vers le browser qui lui reste à l’écoute en permanence. Il n’y a pas de connexion comme le WebSocket. Voici les sites qui m’ont permis de comprendre le fonctionnement:

https://developer.mozilla.org/fr/docs/Server-sent_events/Using_server-sent_events

http://www.html5rocks.com/en/tutorials/eventsource/basics/?redirect_from_locale=fr

http://www.developerdrive.com/2012/03/pushing-updates-to-the-web-page-with-html5-server-sent-events/

Pour aller au plus simple, un example. On va créer 3 pages: client.php, sendMsg.php et admin.php. Le répertoire qui contient ces pages devra être en lecture et écriture par le serveur web (www-data, apache…)

On va modifier du contenu à partir de la page admin.php, ce contenue sera poussé par sendMsg.php vers la page visitée (client.php) par un utilisateur.

Le serveur (sendMsg.php)

<?php

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

/**
 * Constructs the SSE data format and flushes that data to the client.
 *
 * @param string $id Timestamp/id of this connection.
 * @param string $msg Line of text that should be transmitted.
 * 
 */
function sendMsg($id, $event,$retry,$msg) {
  echo "id: $id" . PHP_EOL;
  echo "event: $event" . PHP_EOL;
  echo "retry: $retry" .PHP_EOL;
  echo "data: $msg\n\n" . PHP_EOL;
  echo PHP_EOL;
  ob_flush();
  flush();
}

if (is_file('check.txt')) {
    $serverTime = time();
    sendMsg($serverTime,'refreshMe','1000','1');
    sleep(5);
    unlink('check.txt');
}

?>

Que fait ce script:

il envoie (stream) le message ($msg) en continue en demandant au client de le consulter toutes les secondes (1000).
Il émet pendant 5 secondes (sleep) , c’est l’existence du fichier check.txt qui déclenche ou arrête le stream.

Le client (client.php)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    
    <?php include_once('include.inc'); ?>
    
    <script type="text/javascript">
        if (!!window.EventSource) {
          var source = new EventSource("sendMsg.php");
        } else {
          alert('Navigateur incompatible!!');
        }

        source.addEventListener('refreshMe', function(e) {
          if (e.data == 1){
              source.close();
              setTimeout(function(){location.reload()},5000);
            }
        }, false);
    </script>
</body>
</html>

Que fait ce script:

Il affiche le contenu du fichier include.inc. Ce fichier étant modifié par admin.php, il le recharge à chaque fois que la page est actualisée (reload). Le rechargement est déclenché quand la valeur ‘1’ est envoyée par sendMsg.php qu’il écoute en continue (grâce à EventSource)

La page d’admin (admin.php)

<?php
if($_POST['check'] == 1){
    touch('check.txt');
    file_put_contents('include.inc', $_POST['message']);
}
?>


<!DOCTYPE>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
    
<form action="#" method="post">
    <input id="message" name="message" type="text">
    <input id="check" name="check" type="hidden" value="1"> 
    <input id="input" type="submit" value="refresh">          
</form>

</body>
</html>

Que fait le script:

On saisi du texte qui sera écrit dans include.inc qui sera chargé par la page vue par le visiteur ET déclenchera le stream en créant le fichier check.txt.

Et voilà, à vous de tester et l’intégrer à vos besoins.