Webserver-Applikationen mit dem Vert.x-Framework

Vert X ist ein Toolkit um reaktive Webapplikationen zu entwickeln. In diesem Beitrag zeigt Mirko Eberlein, wie man einen einfachen Währungsrechner erstellt.

Autor Mirko Eberlein
Datum 26.05.2017
Lesezeit 8 Minuten

Im Folgenden werde ich eine kleine Anleitung geben, wie man sehr einfach eine Webanwendung mit Vert.x erstellen kann. Als Beispiel wähle ich eine Applikation, in der es möglich ist, Währungen in andere Währungen umzurechnen.

Zur Umsetzung wähle ich im Frontend Bootstrap und Angular JS. Auf der Serverseite verwende ich Vert.x. Vert.x ist ein Toolkit, mit dem man reaktive Applikationen entwickeln kann. Mehr Infos zum Tool gibt’s unter http://vertx.io. Man benötigt also nicht extra einen Webserver, um eine Applikation auf dem Server auszuprobieren, sondern man kann dies mit einfachen Schritten in einer lokalen IDE tun. Ich arbeite in diesem Beispiel mit Eclipse Neon und zeige die Erstellung einer einfachen Webapplikation.

Projekt erstellen

Zum Start benötigt man Java 8 und Eclipse Neon auf dem Rechner. Wenn beides installiert ist, startet Eclipse.

Zuerst gehen wir auf File > New – Other. Dort suchen wir nach Maven Project.

VertextWebserver-graphics1
Mit new – Other suchen wir Maven Project

Wir klicken auf Next und kommen auf das Maven-Fenster zum Erstellen eines Projekts. Im nächsten Fenster wählen wir das Feld Create A Simple Maven Project und klicken auf Next

Als Group Id wähle ich me.digi als Artifact Id VertextCurrency.

VertextWebserver-graphics2
Maven Grundeinstellungen

Als Packaging wähle ich jar und die Version belasse ich bei dem vorgeschlagenen Snapshot.

Am Ende klicke ich auf Finish und das Projekt ist erstellt.

Package anlegen

Im nächsten Schritt lege ich mein Package an. Ich wähle hierfür me.digi als Name. Im Anschluss sollte das Projekt ungefähr so aussehen:

VertextWebserver-graphics3
Ordnerstruktur nach dem Erstellen

Im nächsten Schritt mache ich mich an das POM-File. Hier führe ich nur eine kleine Änderung durch. Ich hole das Vert x dependency in mein Projekt. Dies kann man entweder direkt in der xml machen oder im Tab Dependencies im geöffneten POM-File. Die beiden Zeilen in den Properties sorgen dafür, dass der Compiler für Java 1.8 verwendet wird.

VertextWebserver-graphics3b

<properties>
 <maven.compiler.source>1.8</maven.compiler.source>
 <maven.compiler.target>1.8</maven.compiler.target>
</properties>
<dependencies>
 <dependency>
   <groupId>io.vertx</groupId>
   <artifactId>vertx-web</artifactId>
   <version>3.3.3</version>
 </dependency>
</dependencies>

Nun fange ich mit dem eigentlichen Erstellen an.

Tip: Falls Fehler im Projekt angezeigt werden, geht mal mit Rechtsklick auf euer Projekt, dann auf Maven – Update Project.

Klassen erstellen

Im Package me.digi erstelle ich eine neue Klasse. Als Superklasse gebe ich AbstractVerticle an. Als Klassenname gebe ich ApplikationVerticle an.

Als Nächstes klicke ich auf Finish und die Klasse wird erstellt. Ich zeige nun zuerst die initiale Klasse und erkläre anschliessend, was die einzelnen Befehle bezwecken.

Wie man seht, ist die Klasse recht einfach aufgebaut. In Zeile 10 ist die erste Besonderheit.

Ich definiere einen http-Server. Dieser wird vom Framework gleich bereitgestellt. So ist keine gesonderte Installation von Webservern notwendig. Natürlich muss ich mich anschliessend auch selbst um die Features kümmern, die mir ein normal installierter Webserver wie Tomcat oder Glassfish mitbringt.

Funktionen

Weiter hat die Klasse zwei Funktionen: Eine Start-  und eine Stop-Funktion.

Diese sind beide schon in der AbstractVerticle-Klasse vorhanden und werden jeweils überschrieben. Ich definiere einen Router, mit dem ich dann zwei Handler initialisiere. Als Erstes den BodyHandler und anschliessend den StaticHandler. Für unser Beispiel ist der StaticHandler sehr wichtig. Dieser sorgt dafür, dass der Static-Ordner in unserer Applikation verwendet wird (dazu später mehr). Wir initialisieren nun in Zeile 16 unseren http-Server und geben an, dass dieser auf Port 8081 laufen soll.

Die Stop-Funktion kann 1 zu 1 übernommen werden.

Static Content

Kommen wir nun zum Erstellen unseres static contents. Ich gehe in der Ordnerstruktur im linken Menü zum Ordner src/main/ressources und erstelle darin einen Ordner webroot. Anschliessend erstellt man eine einfache HTML-Seite im Ordner webroot.

Ist die HTML-Seite erstellt und die Ordnerstruktur gleicht der auf meinem Screenshot?

Dann wollen wir die Applikation einmal starten.

Dazu erstelle ich eine neue Run Configuration. Ich gehe auf Run > Run Configurations.
Im Menü Rechtsklick auf Java Applications und new wählen.

Anschliessend sollte man folgende Ansicht haben:

Hier gibt man einen Namen an, trägt die Main-Klasse io.vertx.core.Launcher ein und wechselt in den Tab Arguments. Beim Start muss ich noch einen Parameter mitgeben, da ich ja in der Applikation keine Main-Klasse haben. Ich trage in Program arguments Folgendes ein:

run me.digi.ApplikationVerticle

Damit der Server in UTF 8 läuft, gebe ich in den VM arguments noch Folgendes ein:

-Dfile.encoding=UTF8

programm arguments

Wenn ich nun mit Run die Applikation starte, wird unter localhost:8081 im Browser meine Index-Datei aus dem webroot-Verzeichnis angezeigt.

Applikation testen

Wir haben nun die Applikation einmal erfolgreich gestartet. Jetzt wollen wir gleich einen Test dafür schreiben. Der Vorteil von Vert X ist, dass es gleich die passenden Client Klassen mitliefert. Wir schreiben also einen Test, der die gerade angelegte Webseite aufruft und den Inhalt prüft.

Dazu legen wir im Source Folder src/test/java ein neues Package an. Ich wähle als Namen me.digi.verttests. Auch hier darf man gerne wieder einen eigenen Namen wählen.

Nun wollen wir einen JUnit Test einbinden. Dazu benötigen wir die entsprechenden Klassen im Projekt.

vertex webserver

Zu unserer vertx-web Klasse nehmen wir deshalb noch Junit und vertx-unit mit auf.

Im neu angelegten Package erstelle ich eine Klasse, die ich VertXTestClass nenne. Hat man package und Klasse erstellt, müsste das Projekt so aussehen:

vertex webserver

Der Code der Klasse ist recht überschaubar aufgebaut.

vertex webserver

In der @Before Funktion initialisieren wir unser Verty Object und in der @After Funktion schliessen wir es wieder.

Der eigentliche Test wird in der @Test Function geschrieben.

Wir erstellen im Vertx einen http Client und holen mit getNow und er Angabe von Port, Host und Path die gewünschte Seite in das response Object. Mit response.handler(body -> holen wir uns das body Object aus der Response.

Achtung

Das body Object entspricht nicht dem HTML Body Object, sondern dem des Protokolls. Der Vertx Client sendet nicht die vollständige Antwort in einem Response. Es teilt die Antwort in Blöcke und man bekommt diese häppchenweise. So wird der Block im response.handler so oft durchlaufen, bis die gesamte Antwort gesendet ist.

Ich habe mir dafür die ArrayList angelegt. Ich fülle alle Antworten in diese Liste und lege mit response.endHandler die letzte Aktion fest. Hier konvertiere ich meine Antwort wieder zu einem durchgehenden String und überprüfe diesen dann auf den Inhalt meiner Testseite im Webroot.

Viel Spass beim Ausprobieren.


Über den Autor

Mirko Eberlein

Mirko Eberlein ist Senior Developer bei der Webgate Consulting AG und Trainer im Bereich Webentwicklung bei Digicomp. Er ist seit 17 Jahren im IT-Umfeld tätig und sich über die Jahre Wissen über verschiedene Programmiersprachen angeeignet. Er versucht sich stets neue Techniken und Trends anzusehen.