Creación de una cola para el EMF Roamer con la SMS API de Vonage y PHP

Si no ha oído hablar de Campo Electromagnético (CEM) Campamentoimagínate un campo en la pintoresca campiña inglesa, poblado temporalmente por 2.500 curiosos entusiastas de la tecnología y la fabricación; Internet de fibra, mástiles de radio, camareros robóticos, láseres que iluminan el cielo e inventos locos y salvajes hasta donde alcanza la vista.

Una de estas extravagantes invenciones fue el EMF Roamer, un cibercamión Tesla de madera a escala de un cuarto de galón, desplegado para vagar por los alrededores, ¡controlado por cualquiera a través de Internet!

The Roamer, photographed at dusk with RGB underglow lighting.

Crédito de la imagen VicHarkness.

No bastaba con permitir que la gente lo condujera en la línea de visión. Y menos en el mundo del Internet de las Cosas. El vídeo en directo de una cámara, junto con la ubicación en un mapa, se transmite al usuario mientras tiene el control del vehículo itinerante.

Un "todos contra todos" en términos de control habría sido un desastre, así que ideamos un sistema de colas. La gente puede unirse a la cola desde su navegador y esperar su turno, o dar un número de teléfono móvil para recibir un SMS cuando llegue su turno (¡gracias, Vonage!). El sistema de colas es "sin servidor", es decir, no requiere un servidor dedicado. En su lugar, se ejecuta en un sencillo alojamiento compartido, con PHP coordinando la cola bajo demanda, que se almacena en una base de datos MySQL.

Qué estamos construyendo

Este artículo describirá cómo configurar las bibliotecas y la base de datos necesarias y, a continuación, crear una cola sencilla de ejemplo, como la que se utiliza para controlar el EMF Roamer. Si los usuarios proporcionan un número de teléfono y cierran la página después de unirse a la cola, se les enviará un SMS utilizando Vonage cuando sea su turno. El sistema está escrito en PHP con un backend MySQL, diseñado para funcionar en alojamiento compartido. Si aún no tienes un alojamiento web, puedes seguirlo en tu propio ordenador utilizando programas como WAMP.

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

Instalación

Para aprovechar al máximo la entrega de SMS, necesitarás una cuenta de Vonage Developer. Puedes registrarte para obtener una hoy y seguir este tutorial usando crédito gratis. Encuentra tu clave/secreto de API en la parte superior del Panel de API de Vonage.

Deberá clonar el archivo PHP Web User Queue de GitHub.

También deberás instalar la biblioteca cliente PHP de Vonage. Esto se puede hacer usando Compositor.

composer require vonage/client

Si es la primera vez que utiliza Composer, puede que le resulte útil la sección de Composer Introducción de Composer.

Para instalar la librería PHP Web User Queue en su proyecto, copie PHPWebUserQueue a su servidor y renombrelo settings.template.php a settings.phpy edítelo:

$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";

Cree una base de datos en blanco utilizando el servidor MySQL con la configuración predeterminada y asocie un usuario con los permisos que se indican a continuación:

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

A continuación, ejecute el script de configuración para crear las tablas necesarias:

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

Si no conoce MySQL, consulte la documentación de su proveedor de alojamiento o utilice una herramienta como phpMyAdmin.

Se recomienda que configures tu servidor para que ejecute periódicamente el script worker como una tarea cron. Esto mantendrá el funcionamiento y el envío de mensajes de texto, incluso si todos los usuarios han cerrado la página. Si tu servidor no lo permite, no te preocupes. La cola también se "autodirige" cada vez que se accede a una página que llama a la biblioteca Web User Queue. Una técnica tomada de "wp-cron", la forma en que WordPress gestiona las tareas. Si su sitio es particularmente de alto tráfico, es posible que sólo desee ejecutar crons servidor y eliminar la sobrecarga en cada ejecución de la página. Esto se puede lograr mediante el establecimiento de la $selfdrive bandera FALSE.

Asegúrese de que el cronworker.php script es ejecutable:

Ejemplo de implementación ejecutando el worker cada minuto usando crontab:

Si es la primera vez que utiliza cron, consulte la documentación de su proveedor de alojamiento o utilice una herramienta como cron-job.org.

Construir un ejemplo

Vamos a construir una cola simple de ejemplo. Te unirás a la cola y esperarás tu turno en index.phpy finalmente llegarás a control.php cuando sea tu turno. Sigue el siguiente tutorial desde cero, o accede a el ejemplo completo en la carpeta "Example" en GitHub.

Uniones y colas

Cree el archivo index.phpincluye el archivo de la biblioteca y crea tu primera cola:

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

Nuestra cola también permitirá a la gente reanudar su posición siguiendo un enlace desde el SMS, así que cogemos esos valores ahora:

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

Comprobamos si el usuario ya tiene una sesión, o si ha enviado el formulario para unirse a la cola. Si no es así, le mostramos el formulario:

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 el usuario ha enviado el formulario, lo añadimos a la cola:

	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 el usuario tiene sesión y está en la cola, comprobamos sus datos y le indicamos cuánto tiempo debe esperar. Si es su turno, le enviamos a la página de control:

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

Llegar al frente

Cree el archivo control.phpincluye el archivo de la biblioteca y una cola:

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

Comprobar que la sesión del usuario es válida y que es su turno:

//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();
}
?>

Entonces, ¡déles la buena noticia!

<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

Próximos pasos

Enhorabuena por crear tu primera cola online. Ya estás listo para convertirla en tu propio robot controlado por Internet (además de un poco de electrónica). Este concepto podría aplicarse a una gran variedad de aplicaciones que se prestan a ser manejadas por un solo usuario a la vez, en lugar de la alternativa "todos contra todos" de múltiples usuarios enviando simultáneamente diferentes comandos. Véase Twitch juega a Pokémon para ver un divertido ejemplo.

Si desea ampliar este ejemplo con algunas herramientas administrativas para gestionar la cola, consulte el script 'bouncer' en el repositorio de repositorio de GitHub.

The queue bouncer (queue admin tool)

Esperamos volver a ver al EMF Roamer en el EMF Camp de 2024.

Recursos útiles

• Centro para desarrolladores de Vonage - ¡créditos gratis para comenzar!

• Documentación de Vonage

• Biblioteca de clientes de Vonage para PHP

• PHP Web User Queue en GitHub

• Campo electromagnético