Création d'une file d'attente pour le EMF Roamer avec l'API SMS de Vonage et PHP

Si vous n'avez pas entendu parler du Camp des champs électromagnétiques (CEM)imaginez un champ dans la campagne anglaise pittoresque, temporairement peuplé de 2 500 curieux enthousiastes de la technologie et de la fabrication ; internet par fibre optique, pylônes radio, barmen robotisés, lasers illuminant le ciel et inventions sauvages et farfelues à perte de vue.

L'une de ces inventions farfelues était l'EMF Roamer, un Cybertruck Tesla en bois à l'échelle un quart, déployé pour se déplacer sur le côté, contrôlé par n'importe qui via l'internet !

The Roamer, photographed at dusk with RGB underglow lighting.

Crédit photo VicHarkness.

Permettre aux gens de conduire en ligne de mire n'était pas suffisant ! Surtout pas dans le monde de l'internet des objets. La vidéo en direct d'une caméra, ainsi que l'emplacement sur une carte, sont diffusés à l'utilisateur pendant qu'il a le contrôle du roamer.

Un système libre pour tous en termes de contrôle aurait été un véritable gâchis, c'est pourquoi nous avons conçu un système de file d'attente. Les gens pouvaient rejoindre la file d'attente dans leur navigateur web et attendre leur tour, ou fournir un numéro de téléphone portable pour recevoir un SMS lorsque leur tour est passé (merci Vonage !). Le système de file d'attente est "sans serveur", c'est-à-dire qu'il ne nécessite pas de serveur dédié. Il fonctionne sur un simple hébergement partagé, avec PHP qui coordonne la file d'attente à la demande, stockée dans une base de données MySQL.

Ce que nous construisons

Cet article décrit comment mettre en place les bibliothèques et la base de données nécessaires, puis créer un exemple simple de file d'attente, comme celle utilisée pour piloter l'EMF Roamer. Si les utilisateurs fournissent un numéro de téléphone et ferment la page après avoir rejoint la file d'attente, ils recevront un SMS utilisant Vonage lorsque ce sera leur tour. Le système est écrit en PHP avec un backend MySQL, conçu pour fonctionner sur un hébergement partagé. Si vous n'avez pas encore d'hébergeur, vous pouvez le suivre sur votre propre ordinateur à l'aide d'un logiciel tel que WAMP.

Flowchart illustrating the queueing process (Start > Wait until at the front > Control until time is up > Leave

Installation

Pour utiliser pleinement la livraison de SMS, vous aurez besoin d'un Compte de développeur Vonage. Vous pouvez vous inscrire dès aujourd'hui et suivre ce tutoriel en utilisant un crédit gratuit. Trouvez votre clé/secret API en haut du tableau de bord de l'API de tableau de bord de l'API de Vonage.

Vous devrez cloner le fichier PHP Web User Queue depuis GitHub.

Vous devrez également installer la bibliothèque du client PHP de Vonage. Ceci peut être fait en utilisant Composer.

composer require vonage/client

Si vous n'avez jamais utilisé Composer, vous trouverez peut-être que la page d'accueil de Composer est une bonne source d'informations. Mise en route de Composer.

Pour installer la bibliothèque PHP Web User Queue dans votre projet, copiez la bibliothèque PHPWebUserQueue sur votre serveur et renommez-la settings.template.php en settings.phppuis modifiez-le :

$selfdrive = TRUE; //Allow user page requests to self drive the worker in order to keep things running faster
$timeout =3*60; //Time in seconds, how long a session lasts
$noshowtimeout = 2*60; //Time in seconds their place at the front of the queue will be held
$sqlserver = "localhost";
$sql_db = "queuetest";
$sql_user = "queuetest";
$sql_pass = "abab";
$vonagekey = "abab";
$vonagesecret = "abab";
$composerpath = __DIR__ . "/../vendor/autoload.php";
$sitepath = "https://your.site";

Créez une base de données vierge en utilisant le serveur MySQL avec les paramètres par défaut et associez un utilisateur avec les autorisations ci-dessous :

Minimum required MySQL permissions are SELECT, INSERT, UPDATE, DELETE, CREATE, ALTER, INDEX.

Exécutez ensuite le script d'installation pour créer les tables nécessaires :

http://[your site]/PHPWebUserQueue/setup.php

Si vous ne connaissez pas MySQL, consultez la documentation de votre hébergeur ou utilisez un outil tel que phpMyAdmin.

Il est recommandé de configurer votre serveur pour qu'il exécute périodiquement le script de travail en tant que tâche cron. Cela permet de maintenir le rythme et d'envoyer des messages textuels, même si tous les utilisateurs ont fermé la page. Si votre hébergeur ne prend pas en charge cette fonction, ne vous inquiétez pas. La file d'attente est également "autogérée" chaque fois que l'on accède à une page qui fait appel à la bibliothèque Web User Queue. Une technique empruntée à "wp-cron", la façon dont WordPress gère les tâches. Si votre site a un trafic particulièrement élevé, vous pouvez souhaiter n'exécuter que des crons de serveur et supprimer la surcharge à chaque exécution de page. Ceci peut être réalisé en définissant l'option $selfdrive drapeau FALSE.

Assurez-vous que le cronworker.php est exécutable :

Exemple de mise en œuvre de l'exécution du travailleur toutes les minutes à l'aide de la crontab :

Si vous ne connaissez pas encore cron, consultez la documentation de votre hébergeur ou utilisez un outil tel que cron-job.org.

Construire un exemple

Nous allons construire un exemple simple de file d'attente. Vous rejoindrez la file d'attente et attendrez votre tour sur index.phppuis atteindrez finalement control.php lorsque c'est votre tour. Suivez le tutoriel ci-dessous à partir de zéro, ou accédez à l'exemple complet dans le dossier "Example" sur GitHub. l'exemple complet dans le dossier "Example" sur GitHub.

Jonction et mise en file d'attente

Créez le fichier index.phpPour la première fois, vous pouvez créer une file d'attente, inclure le fichier de la bibliothèque et créer votre première file d'attente :

<?php
include '../PHPWebUserQueue/WebUserQueue.php';
$q = new WebUserQueue();

Notre file d'attente permettra également aux personnes de reprendre leur position en suivant un lien à partir du SMS, nous saisissons donc ces valeurs maintenant :

if (isset($_GET["i"]) and isset($_GET["s"]))
{
    $_SESSION["i"] = $_GET["i"];
    $_SESSION["s"] = $_GET["s"];
}

Nous vérifions si l'utilisateur a déjà une session ou s'il a soumis le formulaire pour rejoindre la file d'attente. Si ce n'est pas le cas, nous lui montrons le formulaire :

if (!isset($_SESSION["i"])){ 
	//User is not already in the queue.
	if(!isset($_POST['name'])){
		//User has not posted the form, so show them the form.
		echo "<form method=\"post\"><input type=\"text\" name=\"name\" placeholder=\"Name\"> (optional)<br />";
		echo "<input type=\"text\" name=\"phone\" placeholder=\"Phone # e.g. 07712345678\"> (optional)<br />";
		echo "We can send you an SMS when it's your turn.<br /><button>Put me in the queue</button></form>";
	}

The form before joining the queue.Si l'utilisateur a envoyé le formulaire, nous l'ajoutons à la file d'attente :

	else{
		//user has posted the form, add them to the queue.
		if($q->join($_POST["name"],$_POST["phone"])){
			echo "<head><meta http-equiv=\"refresh\" content=\"2\" ></head>";
            echo "Welcome to the queue, your ID is: " . $_SESSION["i"] . " <br />";
		}
	}
}

Si l'utilisateur a une session et se trouve dans la file d'attente, nous vérifions ses coordonnées et lui indiquons combien de temps il doit attendre. Si c'est son tour, nous l'envoyons à la page de contrôle :

else{//User is in the queue
	if($q->checkValid($_SESSION["i"],$_SESSION["s"])) { //Their session matches the database
		if(isset($_GET["end"])){ //Request to end their session
			if($q->kick($_SESSION["i"],$_SESSION["s"])){
        		echo "Thank you for queueing.<br /><a href='index.php'>Click here to enter the queue again</a>";
    		}
		}
		else{
	        list($queuePos,$waitTime) = $q->checkWait($_SESSION["i"],$_SESSION["s"]);
	        if ($queuePos == 0){ //It's their turn
	            header("Location: control.php");
	        }
	        else{ //They're waiting
	            echo "<head><meta http-equiv=\"refresh\" content=\"5\" ></head>";
	            echo "There are " . $queuePos . " people in front of you. This will take about ". $waitTime . "  seconds.<br />";
	        }
    	}
	} else { //Session is not valid
	    echo "Your session has expired. Please refresh the page to queue again!";
	    unset($_SESSION['i']);
	    unset($_SESSION['s']);
	}
}
?>

Waiting in the queue

Atteindre le front

Créer le fichier control.phpLe fichier de bibliothèque et la file d'attente sont inclus dans le fichier de bibliothèque :

<?php
include '../PHPWebUserQueue/WebUserQueue.php';
$q = new WebUserQueue();

Vérifier que la session de l'utilisateur est valide et que c'est son tour :

//User already has a session. Check it's not already used, all their details are valid, and they are first in the queue.
if (isset($_SESSION["i"]))
{
    if($q->checkFirst($_SESSION["i"],$_SESSION["s"])){

    } else {
        echo "<a href='index.php'>Your session is not valid or has expired. Please click here to join the queue</a>";
        die();
    }
} else {
    header("Location: index.php");
    echo "<a href='index.php'>Your session is not valid. Please go back to the home page</a>";
    die();
}
?>

Ensuite, faites-leur part de la bonne nouvelle !

<html>
  <head>
    <title>Front of queue</title>
    <script>
      var secondsleft = <?php echo $q->checkRemaining($_SESSION["i"],$_SESSION["s"]);?>;
      var countdowncaller = setInterval(function(){countdown()}, 1000);//Update the countdown every second.
      function countdown() {
            secondsleft = secondsleft - 1;
            document.getElementById('timeleft').innerHTML = secondsleft + " seconds remaining.";
            if (secondsleft < 10) {
              document.body.style.backgroundColor = "red";//warn them
            }
            if (secondsleft <= 0) {
              window.location.replace("index.php?end");//kick them
            }
          }
    </script>
  </head>
  <body>
    You are at the front of the queue! <br />
    <div id="timeleft">Loading...</div>
    <button onclick="window.location.href='index.php?end'">End session</button>
  </body>
</html>

At the front of the queue

Prochaines étapes

Félicitations pour avoir créé votre première file d'attente en ligne. Vous êtes maintenant prêt à en faire votre propre robot contrôlé par l'internet (avec un peu d'électronique) ! Ce concept pourrait être appliqué à toute une série d'Applications qui se prêtent à être commandées par un seul utilisateur à la fois, plutôt que par une multitude d'utilisateurs qui envoient simultanément des commandes différentes. Voir Twitch joue à Pokémon pour un exemple amusant !

Si vous souhaitez développer cet exemple en y ajoutant des outils d'administration pour gérer la file d'attente, consultez le script "bouncer" sur le dépôt GitHub.

The queue bouncer (queue admin tool)

Nous espérons revoir l'EMF Roamer à l'EMF Camp en 2024 !

Ressources utiles

• Centre des développeurs de Vonage - des crédits gratuits pour commencer !

• Documentation Vonage

• Bibliothèque client Vonage pour PHP

• PHP Web User Queue sur GitHub

• Champ électromagnétique