1. Die Webanwendung erhält eine Anfrage
2. Die Anwendung holt sich z.B. Daten aus der Datenbank, um die Anfrage beantworten zu können
3. Die Webanwendung bereitet die Daten auf und gibt sie als HTML aus, die der Browser hübsch dem Benutzer anzeigt

Das gute, alte EVA-Prinzip: Eingabe, Verarbeitung, Ausgabe

Bei Servern, die nicht sonderlich viele Anfragen erhalten, ist das ein bewertes Prinzip. Ein schon etwas in die Jahre gekommener 1-Kern-Webserver konnte beispielsweise locker 5.000 Besucher am Tag bedienen. Nimmt die Anfragefrequenz einer Webseite jedoch weiter zu, muss man sich etwas überlegen. Eine Möglichkeit ist, sich weitere Server anzumieten, um bestimmte Aufgaben auszugliedern – z.B. ein eigener Datenbankserver.

Man kann auch aufs Cachen setzen: Anstatt bei jeder Anfrage die gleichen Berechnungen durchzuführen und auf die DB zuzugreifen, speichert man das Ergebnis oder die auszugebende Seite im Arbeitsspeicher zwischen, so dass sie von dort ohne teure CPU-Zeit und merklich schneller ausgegeben werden kann.

Und wenn diese Maßnahmen nicht mehr ausreichen? Was dann?

Vor genau diesem Problem stand Steve Huffman bei reddit, die monatlich 270 Millionen Anfragen erhielten. In folgendem Vortrag spricht er über die sieben Lehren aus der Zeit bei reddit (eine Transkription gibt es bei ThinkVitamin):

Lessons Learned while at Reddit from Carsonified on Vimeo.

Neben dem “Open Schema” (oder Entity-Attribute-Value-Model) der Datenbankstruktur finde ich das Zusammenspiel zwischen Anwendung, Cache und Datenbank äußerst interessant. Sämtliche Inhalte von reddit liegen im Cache und sind vorberechnet, sodass die Inhalte ohne Berechnungen angezeigt werden können. Werden Inhalte verändert – etwa Upvote für ein Link, wird der Cache zur Anzeige der höheren Bewertung angelegt, sodass der Benutzer sofort die Rückmeldung bekommt, dass sein Vote erfolgreich war. Des weiteren wird in einer Queue vermerkt, dass der Link einen Vote erhalten hat. Im Hintergrund wird diese Queue abgearbeitet, sodass diese Berechnungen keinen Einfluss auf die Wartezeit des Anwenders haben. Der Vote-Eintrag in der Queue hat z.B. folgende Aktionen zur Folge

1. Upvote wird in der persistente DB gespeichert, sodass Cache & DB konsistent gehalten werden
2. Neuberechnung des Caches der betroffenen Übersichten (Listen)
3. Überarbeitung des Accounts (Cache)
4. etc.

Fazit

Diese Vorgehensweise der Programmierung einer Webanwendung unterscheidet sich also grundlegend von meiner bisherigen Programmierung: Daten werden redundant gehalten, weil Speicher billig, CPU aber teuer und ein schnell bedienter Kunde (Besucher) wichtig ist. Das Video mit den Einsichten von Steve Huffman in die Abläufe bei reddit stellen für mich einen Paradigmenwechsel dar.

Natürlich: Webanwendungen ohne den Ausblick auf viele Zugriffe, benötigen keine solche Programmierung. Wenn man jedoch auf Skalierbarkeit wert legt, sollte man sich die vorgestellten Lehren besser zu Herzen nehmen…

Die Überschrift hört sich etwas tricky an, aber ich denke, wenn wir das Problem auf ein praktisches Beispiel übertragen, wird es klar.

Nehmen wir an, wir haben eine Fußballstatistik-Seite, wo alle Statistiken zur 1. bis 3. Fußballbundesliga abrufbar sein sollen. Jeder Spieler hat eine eigene Seite und zu jedem Spieler müssen täglich aufwändige Statistik-Berechnungen durchgeführt werden, die mehrere Minuten dauern.

Eine Lösung wäre, dass man mit Cronjobs 1x täglich diese aufwändigen Berechnungen nachts durchführt und so die Ergebnisse bereit hält, wenn der Besucher eine Spielerseite auswählt. Das Problem an dieser Vorgehensweise ist allerdings, dass es so viele Spieler gibt, dass die Berechnungen zu lange dauern würden. Zudem werden eh nur 10% der Spielerseiten besucht und 2% der Spielerseiten haben 90% der Zugriffe. Man kann also für diese 2% (High Traffic-Seiten) Cronjobs anlegen, die restlichen Berechnungen aber, sollen quasi On-the-Fly erstellt werden. Das führt zwar zu teilweise langen Wartezeiten für die Besucher, aber die Ergebnisse dieser Berechnungen sind so großartig, dass die Besucher darauf auch bis zu mehreren Minuten warten würden.

Anforderungen an die “On the fly”-Berechnungen

1. Die Parameter für die Berechnung ändern sich nur 1x täglich
2. Die Ergebnisse liegen nach der Berechnung in einem Array vor und sollen als JSON zwischengespeichert werden, so dass dann die Anzeige der Ergebnisse schnell erfolgen kann
3. Wenn der Besucher auf die Ergebnisse warten muss, soll eine Warteseite mit einem Ajax-Loader angezeigt werden. Wenn die Berechnungen beendet sind, wird auf die eigentliche Seite weitergeleitet
4. Für einen Spieler darf die Statistik-Berechnung nur 1x ausgeführt werden.
   Ein Beispiel: Besucher 1 besucht die Seite von “Arjen Robben” und stößt die Berechnungen an. Besucher 2 besucht wenige Sekunden danach die Seite von “Arjen Robben”, es liegen keine Daten vor und trotzdem soll das Skript erkennen: “Moment! Die Berechnungen laufen schon, stoße die Berechnungen kein zweites Mal an.”
5. Sollten veraltete Berechnungen vorliegen, werden diese zwar angezeigt (mit einem Hinweis, dass die Daten veraltet sind), um keine Wartezeit zu haben, im Hintergrund wird allerdings die aufwändige Berechnung angestoßen. Hier gilt wieder: Die Berechnung darf nur 1x angestoßen werden.

Warteseite mit JQuery-Ajax

Die Warteseite wird nur dann ausgegeben, wenn noch nie Daten für den Spieler berechnet wurden.

Damit die Warteseite das Ende der Berechnung mitbekommt, muss diese über Ajax die Berechnungen anstoßen.

$(document).ready(function() {
	$.ajax({
	   type: 'GET',
	   url: 'spielerSeite.php',
	   cache: false,
	   data: 'do=ajax',
	   success: function(msg){
	   if (msg == 'true'){
			location.replace('http://localhost/spielerSeite.php');
		}
		else
		{
			$('div#responseAjax').empty();
			$('div#responseAjax').addClass('success');
			$('div#responseAjax').html(msg);
		}
	   }
	 });
});

Es wird also die Seite spielerSeite.php?do=ajax aufgerufen. Diese Seite führt die Berechnungen durch und gibt am Ende ‘true’ aus, so dass auf die eigentliche Seite spielerSeite.php weitergeleitet wird. Wenn nicht ‘true’ zurück gegeben wird, hat bereits ein anderer Benutzer die Berechnungen angestoßen und man gibt eine Meldung zurück.

Zwischenspeicherung der Berechnungen als JSON

Die fertigen Berechnungen, werden als json-Datei im Filesystem gespeichert:

function setJSON()
{
	file_put_contents($this->json_dir.$this->spieler_string.'.json', json_encode($this->berechnung_array));
}
function getJSON()
{
	$this->berechnung_array = json_decode(file_get_contents($this->json_dir.$this->spieler_string.'.json'), true);
}

Vorteil von json ist die absolut problemlose Konvertierung vom PHP-Array zu einem json-String, der in einer Datei gespeichert wird. Anhand des Änderungsdatums der Datei mit filemtime kann man zudem einfach feststellen, ob die Daten wieder aktualisiert werden müssen.

Lock-Mechanismus zur einmaligen Ausführung

Wie kann man mit PHP feststellen, ob bereits eine Berechnung für einen Spieler läuft? Gar nicht. Also muss man es sich merken!

In einem Execution Array ($this->execution_array) werden die $this->spieler_string gespeichert, deren Berechnungen zur Zeit ausgeführt werden. Damit alle Skripte, die gleichzeitig laufen, auf dieses Array zugreifen können, wird das Array als JSON gespeichert:

function setExJSON()
{
	file_put_contents('execution.json', json_encode($this->execution_array));
}
function getExJSON()
{
	if (!file_exists('execution.json'))
	{
		$this->execution_array = array();
	}
	elseif (file_get_contents('execution.json') === 'null')
	{
		$this->execution_array = array();
	}
	else
	{
		$this->execution_array = json_decode(file_get_contents('execution.json'), true);
	}
}

Nun muss bei jedem potentiellen Start der Berechnungen überprüft werden, ob für den Spieler schon Berechnungen laufen. Dabei ist darauf zu achten, dass $this->execution_array frisch aus der JSON-Datei geladen wurde. Sollte niemand die Berechnung gestartet haben, wird das Execution-Array um den entsprechenden Eintrag erweitert und als JSON gespeichert.
Nachdem die Berechnungen durchgeführt wurden, wird das Array wieder geladen, der entsprechende Eintrag gelöscht und das Array wieder gespeichert:

$this->getExJSON();
if (in_array($this->spieler_string,$this->execution_array))
{
	exit();
}
else
{
	$this->execution_array[] = $this->spieler_string;
	$this->setExJSON();
	$this->fuehreLangeBerechnungenDurch();
	$this->getExJSON();
	unset($this->execution_array[array_search($this->spieler_string, $this->execution_array)]);
	$this->setExJSON();
}

Das Problem an dieser Implementation ist natürlich, dass Schreiben und Lesen ins Execution-Array kein kritischer Abschnitt ist und z.B. zeitgleich mehrere Berechnungsvorgänge gestartet werden könnten.. Da aber schlimmstenfalls “nur” mehrere Berechnungen für einen Spieler gleichzeitig durchgeführt würden, ist das Problem vernachlässigbar.

Ablaufkontrolle

Und hier der komplette Ablauf des Skripts:

$this->execution_array = array();
if (isset($_GET['do']) AND $_GET['do'] === 'old')
{
	//Daten veraltet: Alten Daten laden und anzeigen
	$this->getJSON();
	$this->toHTML();
}
elseif (isset($_GET['do']) AND $_GET['do'] === 'wait')
{
	//Warteseite mit Ajax anzeigen
	$this->doWaitHTML();
}
elseif (isset($_GET['do']) AND $_GET['do'] === 'ajax')
{
	//Durch Ajax von Warteseite aus Berechnungen angestoßen
	$this->getExJSON();
	if (in_array($this->spieler_string,$this->execution_array))
	{
		//Anderer User hat Berechnungen schon angestoßen
		$this->ajaxFalseResponse();
	}
	else
	{
		//Berechnungen durchführen
		$this->execution_array[] = $this->spieler_string;
		$this->setExJSON();
		$this->fuehreLangeBerechnungenDurch();
		$this->getExJSON();
		unset($this->execution_array[array_search($this->spieler_string, $this->execution_array)]);
		$this->setExJSON();
	}
}
elseif (!file_exists($this->json_dir.$this->spieler_string.'.json'))
{
	//Es liegen noch keine Berechnungen vor! Weiterleiten auf Warteseite.
	$host  = $_SERVER['HTTP_HOST'];
	$uri   = $_SERVER['PHP_SELF'];
	$extra = '?do=wait';
	header("Location: http://$host$uri$extra");
	exit();
}
else
{
	$this->getJSON();
	if (filemtime($this->json_dir.$this->spieler_string.'.json') < strtotime(' -1 day'))
	{
		//Die Daten sind veraltet. Weiterleiten zum Anzeigen der alten Daten, aber Berechnungen der neuen Daten starten
		$host  = $_SERVER['HTTP_HOST'];
		$uri   = $_SERVER['PHP_SELF'];
		$extra = '?do=old';
		header("Location: http://$host$uri$extra");
		$this->getExJSON();
		if (in_array($this->spieler_string,$this->execution_array))
		{
			//Anderer User hat Berechnungen schon angestoßen
			exit();
		}
		else
		{
			//Berechnungen durchführen
			$this->execution_array[] = $this->spieler_string;
			$this->setExJSON();
			$this->fuehreLangeBerechnungenDurch();
			$this->getExJSON();
			unset($this->execution_array[array_search($this->spieler_string, $this->execution_array)]);
			$this->setExJSON();
		}
	}
	else
	{
		//Wenn Daten aktuell sind: Anzeigen!
		$this->toHTML();
	}
}

Die Colorbox mit Homer

Die Colorbox von Jack Moore ist großartig: Bilder, Videos, HTML: alles mögliche kann in dieser Lightbox dargestellt werden.

Was allerdings so nicht vorhanden ist, ist die Möglichkeit, dass Links, die innerhalb der Lightbox aufgerufen werden, auch innerhalb der Lightbox geöffnet werden.

Dazu muss innerhalb von $(document).ready(function(){}, in der die Colorbox an die Elemente gebunden werden, folgender Code eingefügt werden:

$("a.incolorbox").live('click', function(event) {
	event.preventDefault(); // native javascript function
	$.fn.colorbox({ href: $(this).attr("href"), open: true})
});

Wenn nun innerhalb der Colorbox ein Link zur Klasse “incolorbox” gehört, wird dieser innerhalb der Colorbox geöffnet.

Auch interessant:

1. JQuery Event Listener für hinzugefügten Inhalt
2. Wiki: Ein externes Bild mit einem internen Link

Möchte man nun die Schrift in der gleichen Zeile des Bildes (sagen wir) mittig positionieren, so muss man nicht den Absatz p-Tag per vertical-align:middle; mittig anordnen, sondern das Bild:

<p>
Etwas Text in der gleichen Zeile mit einem
großen Bild <img src="grossesBild.jpg" alt="Großes Bild" style="vertical-align:middle;" />
</p>

Das finde ich doch etwas eigenartig, denn so ordnet man ja nicht das Bild mittig an, sondern die Schrift drumherum…

Auch interessant:

1. PHP-Funktionen (II): Text nach Wort abschneiden

Ein HTML-Auszug sieht so aus:

<div id="posting_1234">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>
<!-- ... -->
<div id="posting_1235">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>

Nun will man mit CSS alle Links innerhalb des td-Tags, dessen id mit td_posting_ anfängt, anders darstellen. Das kann man umständlich mit der gestern vorgestellten JQuery-Funktion hinbekommen, aber einfacher und direkter ist es mit den CSS Attribut Selektoren:

td[id^="td_posting_"] a:link{
text-decoration: underline;
color: #032846;
}

Das ^-Zeichen hinter id dient dazu festzulegen, dass id mit der angegebenen Zeichenkette beginnen soll. Es wäre ja auch denkbar, dass id mit einer bestimmten Zeichenkette enden soll, denn müsste anstatt ^ ein $ Zeichen benutzt werden:

td[id$="ende"] a:link{
text-decoration: underline;
color: #032846;
}

Wenn nur überprüft werden soll, ob eine Zeichenkette irgendwo in der ID vorkommt muss ein *-Zeichen benutzt werden:

td[id*="zeichen"] a:link{
text-decoration: underline;
color: #032846;
}

Das deckt zwar viele Anwendungsfälle ab, aber wenn man auf einen komplizierteren regulären Ausdruck angewiesen ist, muss man auf die gestrige JQuery-Funktion zurück greifen.

Auch interessant:

1. JQuery Event Listener für hinzugefügten Inhalt