https://d226lax1qjow5r.cloudfront.net/blog/blogposts/building-a-queue-for-the-emf-roamer-with-the-vonage-sms-api-and-php/building-queue_roamer.png

Aufbau einer Warteschlange für den EMF Roamer mit der Vonage SMS API und PHP

Zuletzt aktualisiert am October 6, 2022

Lesedauer: 6 Minuten

Wenn Sie noch nichts von Elektromagnetisches Feld (EMF) Campgehört haben, stellen Sie sich ein Feld in der malerischen englischen Landschaft vor, das vorübergehend von 2 500 neugierigen Technik- und Maker-Enthusiasten bevölkert wird: Glasfaser-Internet, Funkmasten, Roboter-Barkeeper, Laser, die den Himmel erhellen, und wilde/verrückte Erfindungen, soweit das Auge reicht.

Eine dieser verrückten Erfindungen war der EMF Roamer, ein hölzerner Tesla-Cybertruck im Viertelmaßstab, der von jedermann über das Internet gesteuert werden kann!

The Roamer, photographed at dusk with RGB underglow lighting.The Roamer, photographed at dusk with RGB underglow lighting.

Bildnachweis VicHarkness.

Es reichte nicht aus, den Menschen zu erlauben, in Sichtweite zu fahren! Schon gar nicht in der Welt des Internets der Dinge. Live-Videos von einer Kamera werden zusammen mit dem Standort auf einer Karte an den Benutzer gestreamt, während er die Kontrolle über den Roamer hat.

Ein freier Zugang für alle, was die Kontrolle angeht, wäre ein Chaos gewesen, also haben wir ein Warteschlangensystem entwickelt. Die Nutzer können sich über ihren Webbrowser in die Warteschlange einreihen und warten, bis sie an der Reihe sind, oder eine Handynummer angeben, um eine SMS zu erhalten, wenn sie an der Reihe sind (danke Vonage!). Das Warteschlangensystem ist "serverlos", d. h. es benötigt keinen eigenen Server. Stattdessen läuft es auf einem einfachen Shared Hosting, wobei PHP die Warteschlange auf Abruf koordiniert, die in einer MySQL-Datenbank gespeichert ist.

Was wir bauen

In diesem Artikel wird beschrieben, wie man die erforderlichen Bibliotheken und die Datenbank einrichtet und dann eine einfache Beispiel-Warteschlange erstellt, wie sie für den EMF Roamer verwendet wird. Wenn Benutzer eine Telefonnummer angeben und die Seite schließen, nachdem sie sich in die Warteschlange eingereiht haben, wird ihnen eine SMS über Vonage geschickt, wenn sie an der Reihe sind. Das System wurde in PHP mit einem MySQL-Backend geschrieben und ist für den Betrieb auf einem gemeinsam genutzten Hosting-System ausgelegt. Wenn Sie noch keinen Webhoster haben, können Sie das System auch auf Ihrem eigenen Computer mit einer Software wie WAMP.

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

Einrichtung

Um die SMS-Zustellung in vollem Umfang nutzen zu können, benötigen Sie ein Vonage Developer Account. Sie können sich noch heute für ein solches Konto anmelden und diese Anleitung mit einem kostenlosen Guthaben durchführen. Ihren API-Schlüssel/Geheimnis finden Sie oben auf dem Vonage-API-Dashboard.

Sie müssen die PHP-Web-Benutzerwarteschlange von GitHub klonen.

Sie müssen auch die Vonage PHP-Client-Bibliothek installieren. Dies können Sie mit Composer.

composer require vonage/client

Wenn Sie neu in Composer sind, finden Sie vielleicht die Composer's Erste Schritte Seite nützlich sein.

Um die PHP Web User Queue Bibliothek in Ihrem Projekt zu installieren, kopieren Sie die PHPWebUserQueue auf Ihren Server und benennen Sie sie um in settings.template.php in um. settings.phpum und bearbeiten Sie sie dann:

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

Erstellen Sie eine leere Datenbank mit den Standardeinstellungen des MySQL-Servers und ordnen Sie einen Benutzer mit den unten aufgeführten Rechten zu:

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

Führen Sie dann das Setup-Skript aus, um die erforderlichen Tabellen zu erstellen:

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

Wenn Sie mit MySQL nicht vertraut sind, lesen Sie die Dokumentation Ihres Hosting-Providers oder verwenden Sie ein Tool wie phpMyAdmin.

Es wird empfohlen, Ihren Server so einzurichten, dass das Worker-Skript regelmäßig als Cron-Job ausgeführt wird. Auf diese Weise wird der Betrieb aufrechterhalten und die Textnachrichten werden gesendet, auch wenn alle Benutzer die Seite geschlossen haben. Wenn Ihr Webhost dies nicht unterstützt, machen Sie sich keine Sorgen. Die Warteschlange ist auch "selbstgesteuert", wenn eine Seite aufgerufen wird, die die Web User Queue-Bibliothek aufruft. Eine Technik, die von "wp-cron" übernommen wurde, der Art und Weise, wie WordPress Aufgaben erledigt. Wenn Ihre Website besonders stark frequentiert ist, möchten Sie vielleicht nur Server-Crons ausführen und den Overhead bei jeder Seitenausführung entfernen. Dies kann erreicht werden, indem man das $selfdrive Flagge FALSE.

Stellen Sie sicher, dass das cronworker.php Skript ausführbar ist:

chmod +x PHPWebUserQueue/cronworker.php

Beispielimplementierung, bei der der Worker jede Minute mit crontab ausgeführt wird:

* * * * * /path/to/site/PHPWebUserQueue/cronworker.php

Wenn Sie mit cron nicht vertraut sind, lesen Sie die Dokumentation Ihres Hosting-Anbieters oder verwenden Sie ein Tool wie cron-job.org.

Aufbau eines Beispiels

Wir werden ein einfaches Beispiel für eine Warteschlange erstellen. Sie werden der Warteschlange beitreten und warten, bis Sie an der Reihe sind. index.phpund erreichen dann schließlich control.php wenn Sie an der Reihe sind. Folgen Sie dem folgenden Tutorial von Anfang an, oder greifen Sie auf das vollständige Beispiel im Ordner "Example" auf GitHub.

Beitritt und Warteschlangenbildung

Erstellen Sie die Datei index.phpein, binden Sie die Bibliotheksdatei ein und erstellen Sie Ihre erste Warteschlange:

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

Unsere Warteschlange wird es den Leuten auch ermöglichen, ihre Position wieder aufzunehmen, indem sie einem Link in der SMS folgen, also erfassen wir diese Werte jetzt:

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

Wir prüfen, ob der Benutzer bereits eine Sitzung hat oder ob er das Formular zur Aufnahme in die Warteschlange ausgefüllt hat. Wenn nicht, zeigen wir ihm das Formular:

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.The form before joining the queue.Wenn der Benutzer das Formular abgeschickt hat, fügen wir es der Warteschlange hinzu:

	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 />";
		}
	}
}

Wenn der Benutzer eine Sitzung hat und sich in der Warteschlange befindet, überprüfen wir seine Angaben und teilen ihm mit, wie lange er warten muss. Wenn er an der Reihe ist, wird er zur Kontrollseite weitergeleitet:

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 queueWaiting in the queue

Nach vorne kommen

Erstellen Sie die Datei control.phpdie Bibliotheksdatei und eine Warteschlange ein:

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

Prüfen Sie, ob die Sitzung des Benutzers gültig ist und ob er an der Reihe ist:

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

Dann teilen Sie ihnen die gute Nachricht mit!

<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 queueAt the front of the queue

Nächste Schritte

Herzlichen Glückwunsch zum Einrichten Ihrer ersten Online-Warteschlange. Jetzt sind Sie bereit, Ihren eigenen internetgesteuerten Roboter daraus zu machen (plus ein wenig Elektronik)! Dieses Konzept lässt sich auf eine Vielzahl von Anwendungen anwenden, die sich dafür eignen, jeweils von einem einzigen Benutzer bedient zu werden, anstatt dass mehrere Benutzer gleichzeitig verschiedene Befehle senden. Siehe Twitch spielt Pokémon für ein amüsantes Beispiel!

Wenn Sie dieses Beispiel mit einigen administrativen Tools zur Verwaltung der Warteschlange weiter ausbauen möchten, sehen Sie sich das Skript 'bouncer' im GitHub-Repositorium.

The queue bouncer (queue admin tool)The queue bouncer (queue admin tool)

Wir hoffen, den EMF Roamer im EMF Camp 2024 wiederzusehen!

Nützliche Ressourcen

Teilen Sie:

https://a.storyblok.com/f/270183/400x300/58ce070338/chris-stubbs.png
Chris Stubbs

Chris is an engineer with an interest in DIY, electronics, embedded software and web applications. He lives in England, enjoys building wacky creations and attending hacker camps.