Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Java EE 7: Web Services

WebSockets per JavaScript nutzen

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die ersten Client-Implementierungen für WebSockets gab es für Browser. Aus diesem Grund zeigt dieses Video, wie Sie einen WebSocket per JavaScript ansprechen und die notwendige Logik implementieren können.

Transkript

Wie der Name WebSocket schon andeutet, kommen WebSockets aus der Javascript-Welt. Das bedeutet, dass es im Javascript-Umfeld eine sehr weitreichende Unterstützung für WebSockets gibt. In diesem Video werden wir uns damit auseinandersetzen, wie wir auf Javascript-Seite WebSockets implementieren und nutzen könnten. Zunächst einmal müssen wir allerdings das leidige Thema Browser-Kompatibilität ansprechen. Es ist so, dass die modernen Browser allesamt WebSockets unterstützen, allerdings noch nicht so sonderlich lange. Zum Beispiel unterstützt der Internet Explorer WebSockets erst seit Version 10. Chrome und Firefox waren da schon etwas weiter. Beide unterstützen die WebSockets schon seit ihren Versionen 31 und die sind schon eine ganze Weile alt. Auch Safari unterstützt WebSockets seit Version 7. Das bedeutet, ich kann diese Technologie entspannt dort einsetzen, wo ich ein kontrolliertes Umfeld habe. Übrigens funktioniert sie auch wundervoll mit mobilen Browsern. Diese sind meistens sogar moderner als die Desktop-Browser. Wenn wir mit WebSockets arbeiten wollen, arbeiten wir auf Ebene von Javascript, mit einer Instanz der WebSocket-Klasse. Diese Instanz erlaubt es uns, einige Methoden zu überschreiben, nämlich onmessage, diese Methode wird aufgerufen, wenn eine Nachricht reinkommt. onerror, diese Methode wird aufgerufen, wenn ein Fehler in der Verbindung auftritt und onclose, diese Methode wird aufgerufen, wenn der serverseitige WebSocket geschlossen ist. Diese Methoden können wir, wie gesagt, mit eigener Funktionalität überschreiben, wir müssen es allerdings nicht. Schauen wir uns nun an, wie wir mithilfe der Javascript-EPI eine WebSocket-Anbindung herstellen können. Wir befinden uns hier in einer Webseite. Diese Webseite ist eine statische HTML-Webseite, verfügt über ein Eingabefeld, mit dem eine Nachricht an den Chat geschickt wird, einen Button über den die Nachricht versendet werden soll, der Button hat die id Button, den müssen wir uns merken, genauso wie die id message des Eingabefeldes und es gibt hier einen Platzhalter im Moment mit der id messages. Und in diesem Platzhalter werden die empfangenen Nachrichten vom Server dann eingespielt. Wir wenden uns nun der Implementierung dieses Chat-Clients zu. Wir machen das hier in diesem Fall per JQuery. Das heißt, wir verbinden uns zunächst mal an das Ready-Ereignis des Dokumentes. Nun erzeugen wir zunächst die WebSocket.url, die wir ansprechen wollen. Das Protokoll einer WebSocket.url ist immer WS oder WSS. WS steht für eine unsichere Verbindung und WSS für eine sichere Verbindung. Wir binden uns hier an die Eigenschaft Location. Host des Dokumentes und tragen dann den Pfad zur Web-Applikation nach. Der eigentliche WebSocket heißt Chat. Nun können wir den WebSocket erzeugen und das machen wir mithilfe einer neuen WebSocket-Instanz. Diese Instanz erlaubt es uns nun, die Methoden entsprechend zu überschreiben. Zunächst einmal überschreiben wir die onmessage-Methode mit einer eigenen Funktionalität und zwar werden wir hier dem Platzhalterelement mit der id messages jedes Mal eine Zeile hinzufügen und da drin die Nachricht ausgeben. Die eigentliche Nachricht erreichen wir über die Eigenschaft Data des uns übergebenden Objektes. Das was wir öffnen, müssen wir auch wieder schließen und wenn wir das erledigt haben, ist diese Funktionalität bereits implementiert. Als nächstes implementieren wir die Methode onerror. Im Grunde machen wir hier das gleiche, was wir auch bei der anderen Methode gemacht hatten, wir fügen etwas ein, als einzigen Unterschied werden wir dies hier noch rot kennzeichnen. Und exakt analog gehen wir vor bei der Methode onclose, sodass wir diesen Code einfach nur kopieren. Hier haben wir keinen Parameter und hier geben wir einfach einen entsprechenden Text aus, nämlich Verbindung wurde geschlossen. Damit sind die Implementierungen auf Ebene der WebSocket-Klasse abgeschlossen und wir können uns nun noch darum kümmern, dass die entsprechenden Informationen dann auch versandt werden. Dies machen wir, indem wir uns an den Button binden, der Button hatte die id button und wir binden uns an dessen Klick-Ereignis und registrieren dann wieder eine Funktion, die dann eben entsprechend aufgerufen wird. Und hier nutzen wir die send-Methode des WebSockets, und zwar geben wir den Wert des Feldes message an den Server und zuletzt löschen wir das Feld. Das war‘s, damit haben wir die entsprechenden Funktionalitäten implementiert und können nun die Webseite starten. Zu diesem Zweck wechsle ich zurück in die HTML-Seite und starte sie auf dem Server. Nach einigen Sekunden kann ich die Webseite benutzen. Und jetzt kann ich eine Nachricht eingeben und diese Nachricht kommt dann an. In der Zwischenzeit habe ich auch noch mal parallel einen Internet Explorer aufgemacht und dann werden wir mal gucken, was da jetzt passiert. Auch hier ist die entsprechende Nachricht schon angekommen. Und wenn ich jetzt hier eine entsprechende Nachricht eingebe und dann in meine Eclipse-Ansicht zurückwechsel, ist dort auch die Nachricht da. Das geht augenblicklich und sofort. Ich verfüge hier in diesem Projekt darüber hinaus noch über einen Java-Konsolen-Client. Den werde ich jetzt auch mal starten und dann haben wir drei Ebenen, auf denen wir kommunizieren können. Dieser Java-Konsolen-Client läuft jetzt im Hintergrund und wenn ich jetzt eine Nachricht eingebe, dann kommt diese Nachricht sowohl auf der Konsole an als auch im integrierten Browser in den Eclipse, als auch im Internet Explorer. Und sie sehen, alle Clients werden automatisch von unserem WebSocket benachrichtigt. In diesem Video haben wir geklärt und besprochen, wie wir bei Javascript einen WebSocket ansprechen können. Das Ganze geschieht über das WebSocket-Objekt, dem wir die entsprechende Adresse übergeben und dann überschreiben wir die entsprechenden Methoden, also onmessage, onerror und onclose auf Ebene unserer lokalen Javascript-Implementierung. Sobald das Server-Socket läuft, können sich alle Clients damit verbinden und wir können dann die entsprechende übergreifende Benachrichtigungs- Funktionalität bewundern.

Java EE 7: Web Services

Steigen Sie ein in die Java-Enterprise-Welt und lernen Sie, wie Nachrichten ausgetauscht und Dienste definiert werden.

5 Std. 13 min (30 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!