LinuxFr.org : les journaux  -  Reveal.js et plugin phpsync

 -  Mai 2023 - 

Bonjour Nal,

Je suis surpris qu'on ne t'ait jamais parlé de reveal.js, je m'en vais donc arranger ça.

reveal.js est une application javascript permettant de réaliser des diaporamas (comme Impress que tu connais déjà). Cette application est destinée aux geeks comme toi qui écrivent du HTML à longueur de journée. On crée donc des diapositives simplement avec quelques lignes de code:

Ma zolie diapo

des trucs intéressants ici

L'avantage de ce système est qu'on peut lire le diaporama partout: sur tout appareil disposant d'un navigateur web. On peut bien sûr l'enregistrer sur une clé usb, mais on peut aussi facilement l'héberger en ligne (c'est du HTML et du JS!). Ça s'adapte à tous les écrans, c'est beau, parfait!

Le moment où on réinvente la roue

Ce serait quand même sympa si on pouvait synchroniser le déroulement du diaporama sur plusieurs écrans. Ça tombe bien, il y a un plugin qui s'appelle multiplex qui fait ça. Pour l'installer c'est très simple, tu fais npm install reveal-multiplex et puis tu configures un serveur node.js et…

J'aime pas Node.js

Bon ça a l'air bien, mais je n'ai pas envie faire tourner un serveur Node.js pour ça, encore plus si il y a des dépendances hors des dépôts de ma distribution. J'ai déjà un serveur Apache équipé avec PHP, on ne pourrait pas s'en servir?

À première vue c'est pas évident, car quand un utilisateur affiche une page PHP dans son navigateur, le script PHP est exécuté sur le serveur indépendamment des autres scripts. Par défaut, un script PHP ne peut pas partager une variable avec un autre script, ni même avec le même script exécuté par quelqu'un d'autre. Pour partager des données entre les scripts on utilise généralement une base de donnée voire des fichiers, mais j'aimerai éviter de faire des écritures sur le disque juste pour ça.

Après une brève recherche j'ai trouvé qu'il existe le module php_apcu permettant partager une variable de manière globale sur le serveur. Ce module est packagé dans toutes les bonnes distributions, sous Debian on pourra alors faire apt install php-apcu.

phpsync

J'ai donc commis un petit programme que j'ai appelé phpsync. Il tient en quatre fichier, le plus gros faisant 83 lignes de JS.

Pour la connexion serveur->client ça utilise les Server Send Events. C'est une connexion unidirectionnelle qui est super simple à mettre en place et qui se reconnecte toute seule en cas de coupure.

Pour la connexion client->serveur, j'utilise le plus classique XMLHttpRequest en faisant une requête à chaque changement de diapo.

La mise en place est simple: on place le dossier phpsync dans le dossier plugin, puis on ajoute la ligne <script src='https://linuxfr.org/plugin/phpsync/phpsync.js'></script> dans le code du diaporama.

Pour contrôler le diaporama, il faut aller à la dernière diapo et entrer le mot de passe du boss. À partir de là, toutes les autres personnes affichant le diaporama verront la même slide que le boss.

génial je veux tester!

Le code est disponible ici: https://framagit.org/lkiefer/phpsync.

J'ai mis une demo en ligne, mais ça risque d'être inutilisable si plusieurs personnes s’amusent avec avec en même temps. C'est là: http://lkiefer.org/phpsync/demo.html

How "open" is your open-source?

Les sources sont sous licence MIT. Je ne prévois pas de faire évoluer ce logiciel en dehors d'éventuelles corrections qui s'imposeraient: il fonctionne suffisamment bien pour mon usage et il y a déjà une version Node.js pour ceux qui voudraient quelque chose de plus évolué.

Commentaires : voir le flux Atom ouvrir dans le navigateur

par ted