HTML5 Grundkurs

Kommunikation (WebSockets)

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Kommunikation mit dem Server ist heutzutage eine der Hauptaufgaben von JavaScript. Mit WebSockets geht das deutlich performanter, als mit reinen HTTP-Anfragen. Die JavaScript-API ist noch dazu sehr überschaubar.
08:37

Transkript

Kommunikation ist ein immer wichtiger werdender Aspekt von vielen modernen Webanwendungen. Daten werden mit dem Server ausgetauscht, sehr viel Logik passiert auf dem Client im Browser, und der Server ist sozusagen nur noch datenlieferant. Und genau diese Datenlieferung soll natürlich so effizient, wie möglich sein. Jetzt haben wir natürlich Ajax, also XMLHttprequest, was immer noch das HTTP-Protokol verwendet, keinen Rückkanal hat und auch bei Cross-domain-Anfragen einiges umschiffen muss, ist also nicht ganz perfekt. Es gibt jetzt mehrere Ansätze, diese Situation etwas besser zu machen. Und der, der meiste Aufmerksamkeit bekommen hat in den letzten Monaten und Jahren, ist Websocket, separate Spezifikation, etwas, was zum HTML5-Universum sozusagen dazu gehört, aber nicht Teil der HTML5-Spek ist, sondern was Eigenständiges. Was sind Websockets? Es geht da um Full-Duplex bidirektionale Kommunikation mit einem Server, das heißt, Daten werden sehr effizient ausgetauscht, und soll der Server kann Daten einen Client schicken, also der Client Daten an den Server, und zwar innerhalb von einer Verbindung. Nicht wie im klassischen HTTP-Model, ich schicke eine Anfrage einem Server, der schickt mir eine Antwort, und das war es. Ich habe die Website websocket.org aufgerufen. Ich setze keine offizielle WebSockets-Website, aber der Anbieter hat einen Test-WebSocket-Service am Laufen, und den wollen wir jetzt auch anprogrammieren, damit Sie sehen, wie einfach die JavaScript an Programmierung ist. Unser Fokus ist hier natürlich die JavaScript-Programmier-Schnittstelle, denn serverseitig hängt es sehr stark davon ab, was für eine Technologie Sie verwenden. Je nachdem, ob Sie PAP einsetzen, oder Node.js oder as python.net oder etwas anderes. es gibt da jeweils spezifische Frameworks, die Sie dann vermutlich verwenden möchten. Da wir ansonsten technologisch in diesem Video-Training unabhängig sind von irgendeiner Server-Technologie, bleiben wir deswegen bei diesem einfachen Echo-Service und brauchen aber jetzt nartürlich trotzdem den lokalen Test-Webserver zum Aufruf, damit es auch in allen Browser funktioniert. Dieser Echo-Testservice hat eine bestimmte URL, und zwar echo.websocket.org, und das Präfix ist nicht das http, sondern ws, ws für websocket. Es gäbe auch wss für https gesichert oder tls gesichert, um genau zu sein. Verbindung zur WebSocket-Empfangstelle. Ich kopiere jetzt mal diese URL in Zwischenablage, und wir wollen das dann per JavaScript anprogrammieren. Klicke also eine neue Datei an, nenne die websocket.html, und mache einen Script-Block, in dem entsprechend die Programmierung integriere, brauche ein Formular ein mit einem Textfeld, und dieses Textfeld bekommt eine ID für den einfachen Zugriff und eine Schaltfläche zum, ja, Senden in Daten. Die Idee ist, ich gebe jetzt in Textfeld einen Text ein, klicke auf die Schaltfläche, dann wird der Text an den WebSocket-Server geschickt, und der WebSocket-Service in Echo-Server, das heißt, der gibt einfach zurück, und das war es. Gut genug für uns, um eben die Schnittstelle von JavaScript zu sehen, denn dies ist sehr, sehr einfach eigentlich und überschauber. Das ganze komplizierte Protokol, Datenaustausch mit dem Server, Handshake etc. Das ist alles im Browser alles intergriert, dann müssen wir uns nicht drum kümmern. Uns bleibt nur die JavaScript-API, wie gesagt, die ist überschaubar. Ich lege eine neue Instanz der WebSockets-Klasse an. so fern man von Klasse sprechen kann in JavaScript, und als URL gebe ich genau die von dem WebSocket-Server. Und jetzt wenn die Verbindung entsprechend aufgebaut und wenn wir eine Nachricht an den WebSocker-Server schicken wollen, verwenden wir einfach die send-Methode und schicken wir dann eine Nachricht. Dann bekommen wir eine Nachricht wohl irgendwann zurück. Dazu gibt es das Message-Ereignis. Ja, und dann geben wir die Nachricht aus. Das ist sozusagen das prinzipielle "Hallo Welt!" Beispiel. Wir erzeugen eine neue WebSocket-Instanz, schicken eine Nachricht hin, und wenn wir was zurückbekommen, geben wir das aus. So funktioniert es prinzipiell. Jetzt müssen wir das Ganze nur noch einbauen in unser kleines Beispiel hier. Also warten wir wieder mal das Laden der Seite ab. Und sobald die Seite vollständig geladen worden ist, legen wir los und zwar fangen wir an mit dem Event-Handler für die Schaltfläche, also, document.getElementById von btn ist die Schaltfläche, addEventListener, das Ereignis heißt "click". Und da soll dann etwas passieren und genau das. Implementieren wir jetzt, was passieren soll, nämlich, was soll passieren, es soll eine Nachricht an den WebSocker-Dienst geschickt werden, das heißt, wir übernehmen hier das ws.send aber statt test nehmen wir den tatsächlichen Text aus dem Textfeld und schicken wir dann. So. Das heißt also, beim Klick auf die Schaltfäche "btn" wird der Text aus dem Textfeld geschickt. ID von der Schaltfäche ist btn. ID vom Textfeld ist txt. Wir effizieren das noch einmal txt, btn. Passt! Ja, und jetzt müssen wir eigentlich noch dafür sorgen, dass die Verbindung beim Laden der Seite aufgebaut wird. Das machen wir, kopieren wir nach oben und eigentlich auch, dass der Event-Handler, wenn eine Nachricht kommt, schon eingerichtet ist. Also, auch das wird jetzt hier hineingepackt. Und jetzt sorgen wir eben dafür, dass wenn eine Nachricht vom Service zurückkommt, dass wir da eben auf diese Nachricht zugreifen, wir erhalten jetzt automatisch so ein Parameter e und dieser Parameter e enthält alle Information, die wir vom Service zurückerhalten. Die Eigenschaft, in der die eigentliche Nachricht steht, heißt genau wie beim Webworker, eigentlich data, das heißt, von dem data aus, und vielleicht direkt als modales Fenster, dann müssen wir die console entsprechend nicht aufmachen. Und das ist es im Wesentlichen. Schauen wir uns es noch einmal an. Also, wir haben ein Eingabefeld, wir haben eine Schaltfläche. Wenn auf die Schaltfläche geklickt wird, nehmen wir die Daten aus dem Eingabefeld und schicken die an den WebSocket-Server. Die Verbindung haben wir bereits eingebaut. Wenn wir vom WebSocket-Server Daten erhalten, dann geben wir die direkt eins zu eins aus. Machen wir die Probe auf das Example! Gehen wir in Google Chrome, rufen webbsocket.html auf, bekommen unser Eingabefeld, geben irgendwas ein, klicken auf "Senden". Und tatsächlich, es werden die Daten an den Server geschickt, denn wir bekommen eine Nachricht zurück: Test 123, das heißt, dass die Kommunikation hat geklappt. Und wie gesagt, das ist jetzt alles sehr, sehr performant, vor allem, wenn wir mehr Daten schicken und eben zwischen Client-Server immer wieder hin und her Daten austauschen möchten. Wenn wir nur einmal Daten abrufen, dann ist es natürlich nicht ganz so spannend, aber wenn wir immer wieder Daten hin und her schicken, dann müssen wir nicht jedes Mal wieder extra eine Verbindung aufbauen. Die bleibt nämlich bestehen. Kann natürlich gut sein, dass der Browser oder der Server die Verbindung irgenwann kappt, aber dann wir sie automatisch für uns wieder aufgebaut, denn das, ja, Heavy-Lifting, ja, also die komplizierten Vorgehensweisen und Protokol aus Handlungen etc, darum kümmern sich alles der Browser und der Server. Als JavaScript-Entwickler haben wir eigentlich nur die Programmier-Schnittstelle, und dies wirklich sehr, sehr einfach gehalten, und das ermöglicht jetzt sehr, sehr spannende Anwendungen. Nicht ohne Grund sind WebSockets eins der Highlights rund um HTML5, auch wenn es eine Spezifikation ist. Es gab bei Webbrowsern anfangs gewisse Umsetzungsprobleme. Es gab nämlich verschiedene Versionen, verschiedene Protokole für WebSockets. Und teilweise haben dann Browser ältere, vermeidlich unsichere Protokolversionen deaktiviert, aber mittlerweile sieht es von der Browser-Unterstützung sehr gut aus. Wenn wir mal auf caniuse.com gehen und dann den Punkt "WebSockets" heraussuchen, da befindet sich bei dem JavaScript Programmier-Schnittstellen. Dann sehen wir auch immerhin, ab IE 10 ist das Ganze mit dabei, und bei den anderen Browsern sieht es auch ganz gut aus. Beim Android Browser, lediglich da, braucht man tatsächlich die aktuelle neueste Version, nämlich 4.4, aber ansonsten gute Browser-Unterstützung bei modernen Browsern, je nachdem, was sie für eine Server-Komponente nehmen, gibt es da auch Möglichkeiten,dass sie mit einer zusätzlichen JavaScript-Bibliothek eine Art von Vollbackmechanismus für ältere Browser haben, dass die dann beispielsweise herkömmliches HTTP oder einen anderen Ansatz wählen.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 Videos)
html5 crashk. Christian Wenz
Anonym
Gute Kurzschulung - hervorragender Überblick.Bitte so weitermachen. Herzliche Grüße F.M.

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!