Echtzeitergebnisanzeige für Motorsportrennen mit JavaScript

Inhaltsverzeichnis

Während eines laufenden Wettkampfs den Stand der Teilnehmer im Internet aktuell anzuzeigen ist eine größere Herausforderung, wenn viele Tausend Browser angeschlossen sind. Ein Projektbericht über die Livetiming-Website einer europäischen Motorsportrennserie zeigt, dass eine Umsetzung mit JavaScript sowohl auf dem Client als auch auf dem Server möglich ist.

Die Motorsportrennserie, für die das Livetiming modernisiert wurde, gilt als populärste Tourenwagen-Rennserie der Welt, in der sich gleich drei deutsche Premium-Automobilhersteller dem direkten Wettkampf stellen. Pro Kalenderjahr finden in der Rennserie zehn Automobilrennen in Europa statt. Neben deutschen Traditionsrennstrecken wie Hockenheim-, Nürburg- und Norisring werden Rennen in England, Österreich, den Niederlanden und Spanien ausgetragen. 22 Piloten aus zehn Nationen kämpfen um den Meistertitel.

An einem Rennwochenende finden vor dem eigentlichen Rennen zwei freie Trainings, vier Qualifikationsteile und ein Warm-up statt. Jedes Fahrzeug verfügt über einen eindeutigen Transponder zur Ermittlung von Sektor- und Rundenzeiten. Als Gegenstück sind auf jeder Rennstrecke drei Messschleifen installiert: eine bei Start/Ziel und zwei weitere für Sektoren zur Zwischenzeitnahme. So gibt es pro Fahrzeug und je gefahrene Runde insgesamt drei Zeiten. Die sogenannte Zeitnahme erfasst die Messsignale und wertet sie aus. Die ermittelten Zeiten dienen zur Klassifizierung der Fahrzeuge und stehen dem Fernsehen, Journalisten und den Teams als Information zur Verfügung. Typischerweise werden die ermittelten Zeiten auf Displays an die Kommandostände an den Boxenmauern, in den Garagen der Teams und im Mediacenter verteilt.

Während eines Rennwochenendes sind die aktuellen Zeitnahmeergebnisse und Rennstände aller teilnehmenden Fahrzeuge über eine Website abrufbar (s. Abb. 1). Verschiedene Farben bei der tabellarischen Darstellung der Zeitnahmedaten sollen helfen, bestimmte Zustände leichter zu erkennen. So präsentiert der Bildschirm die Fahrer, die sich in derselben Runde wie der Führende befinden, in weißer Schrift. Fahrer, die die Ziellinie noch nicht überfahren haben, also jene mit mindestens einer Runde Rückstand, erscheinen gelb gefärbt. Befindet sich ein Pilot beim oder auf dem Weg zum Boxenstopp, ist eine rote Färbung zu sehen. Die schnellsten Sektor- und Rundenzeiten eines Fahrers werden ebenfalls farbig hervorgehoben, grün bei persönlicher und pinkfarben bei absoluter Bestzeit. Neben den Zeiten laufen Informationen über die höchste erreichte Geschwindigkeit in einem Sektor und dem Fahrernamen auf, der sie erzielte. Für jedes Rennwochenende gibt es eigene Darstellungen, die angezeigten Daten und somit Spalten unterscheiden sich dadurch.

Die Renn-Website zeigte bislang die Zeitnahmetabelle in einer sich zyklisch aktualisierenden Webseite an, die serverseitig mit PHP erzeugt wurde. Das Zeitnahmesystem generierte eine CSV-Datei, die der Webserver mit PHP auslas und aufbereitete. Alle 30 Sekunden riefen alle aufgeschalteten Clients, das heißt Webbrowser, per AJAX-Polling die aktuellen Werte vom Webserver ab.

Die Rundenzeiten liegen bei den meisten befahrenen Rennstrecken bei deutlich über einer Minute, sodass die langen Aktualisierungsintervalle akzeptabel waren. Auf einer Rennstrecke, Brands Hatch in England, liegt die Rundenzeit jedoch mit circa 42 Sekunden deutlich unter einer Minute. Der Umstand führte zu erheblichen Differenzen zwischen der realen Position, der Rundenanzahl und -zeit eines Fahrzeugs und der eigentlichen Visualisierung. Im schlimmsten Fall hinkte die Anzeige auf der Website eine knappe Runde hinterher, wenn sich der Browser knapp vor Erreichen einer Messschleife aktualisierte. Dann durchfuhr das Fahrzeug die nächsten beiden Zeitschleifen ohne entsprechende Aktualisierung der Webseite. Daraus ergab sich der Bedarf, eine Echtzeitanwendung zu schaffen.

Ziele der neuen Entwicklung

Die wichtigsten Anforderungen an die neue, "Livetiming" genannte Entwicklung waren:

• schnellstmögliche Aktualisierung der beiden Sektoren- und der Rundenzeiten
• Unterstützung vieler unterschiedlicher Endgeräte und Betriebssysteme
• kein Neuladen der gesamten Seite bei Aktualisierung der Daten
• zuverlässige Anbindung und Versorgung vieler Clients (Skalierbarkeit)
• Vermeidung einer clientseitigen Installation von Software
• einfache, schnelle und kostengünstige Implementierung, bedingt durch engen Zeitplan und Budgetgrenzen
• niedrige Lizenzkosten bei den eingesetzten Komponenten

Eine spannende Frage war die der einzusetzenden Technik. Ein Blick in die Königsklasse des automobilen Motorsports, die Formel 1, zeigte eine seit Jahren eingesetzte Technik mit Java-Applet und Sockets. Ein gravierender Nachteil bei einer Java-Anwendung ist jedoch, dass auf jedem Client die Java Runtime Environment (JRE) installiert sein muss. Das erscheint jedoch nicht mehr zeitgemäß, insbesondere vor dem Hintergrund, dass Besitzer von Mobiltelefonen oder Tablet-PCs die Installation häufig nicht wünschen oder ihr Gerät Java gar nicht unterstützt.

Es war also eine Technik gefragt, die ohne Zusatzinstallationen auf allen Endgeräten lauffähig ist und Echtzeitaktualisierungen unterstützt. Nach ausführlicher Erörterung fiel die Entscheidung auf eine HTML5 Webanwendung, die sowohl client- als auch serverseitig JavaScript verwendet und die Daten via REST API und WebSockets transportiert. Als Abstraktion von JavaScript sollte CoffeeScript zum Einsatz kommen.