Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2016 Fall)

180 views

Published on

Kommunikation mit JavaScript war lange Zeit sehr überschaubar: HTTP-Anfragen waren dank Ajax möglich, aber auch nur an den Ursprungsserver und mit weiteren Einschränkungen. Dies hat sich mittlerweile geändert: JavaScript-Code kann jetzt auch mit fremden Browsertabs und Servern reden, sofern diese mögen; ebenfalls ist eine bidirektionale Kommunikation anstelle des altbackenen Pull-Modells möglich. Auch Zugriff auf Kamera und Mikrofon sind (nach Nutzerbestätigung) möglich. Diese Session zeigt zahlreiche bekannte und weniger bekannte Kommunikationsmöglichkeiten mit JavaScript und HTML5 auf und beleuchtet Vor- und Nachteile aus dem Projektalltag.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2016 Fall)

  1. 1. Christian Wenz | Arrabiata Solutions GmbH @chwenz Kommunikations-APIs von JavaScript und HTML5
  2. 2. Agenda • Wider der Same-Origin Policy – CORS • Kommunikation im Browser – Messaging API – Worker • Performante Kommunikation – SSE, WebSockets, WebRTC, …
  3. 3. Status Quo • GET-Requests mit src-Attribut möglich – Ohne Einschränkungen – Kein Zugriff auf Rückgabe • Jedes (vom Browser unterstützte) HTTP- Verb via XMLHttpRequest – HTTP-Header und -Body können angegeben werden – Beschränkt durch SOP (Same-Origin Policy) • Protokoll, Domain, Port • Verwendet immer noch HTTP
  4. 4. Same-Origin Policy (SOP) • Origin: vgl. http://tools.ietf.org/html/rfc6454 • Protokoll, Domain, Port • Ausgenommen: src-Attribut – etwa bei <script>!
  5. 5. Same-Origin Policy (SOP) (2) • http://example.com/ • http://example.com:80/ • http://example.com/path/file • http://example.com/ • http://example.com:8080/ • http://www.example.com/ • https://example.com:80/ • https://example.com/ • http://example.org/ • http://webtechcon.de/
  6. 6. CORS • Cross-Origin Resource Sharing • Umgeht die Same Origin Policy • Es gibt allerdings Einschränkungen – Spezifischer Content-type-Header (teilweise) – Origin-Header wird automatisch gesetzt – Server verwendet den Header Access- Control-Allow-Origin (Wert muss * sein oder der des Origin-Headers)
  7. 7. Lessons Learned Opfer (Client) Angreifer (Website) Andere Website 1) HTTP-Anfrage 2) Schickt JavaScript 3) HTTP-Anfrage
  8. 8. CORS (2) • Fortgeschrittener Ansatz: Preflighted Requests (z.B. für POST-Anfragen, um CSRF zu vermeiden) • Nettes Flussdiagramm bei HTML5Rocks: http://www.html5rocks.com/static/images /cors_server_flowchart.png
  9. 9. Messaging API • Einfacher Cross-Domain-Mechanismus, um Daten zu senden und zu empfangen • Funktioniert überall ab IE8+ • Senden: – Auf anderes Fenster zugreifen (z.B. contentWindow-Eigenschaft eines Iframes) – Daten senden mit der Methode postMessage() – Aus Sicherheitsgründen muss der Ursprung der Zielsite als zweiter Parameter angegeben werden
  10. 10. Messaging API (2) • Empfangen: – Auf das message-Ereignis warten. – Eventparameter enthält die gesendeten Daten (Eigenschaft data) und denn Ursprung des Senders (Eigenschaft origin) – Mit postMessage() können Daten zurück an den Sender geschickt werden – Dort analog auf das Ereignis message lauschen
  11. 11. Shared Worker • Client: – new SharedWorker – port.start() – port.postMessage() • Worker: – self.onconnect = function(e) { var port = e.ports[0]; } • Aktuell nur Firefox/Chrome
  12. 12. Service Worker • Worker als Basis für Push-Notifications, Background-Sync und mehr • Firefox und Chrome – bald Edge • Aktueller Stand: https://jakearchibald.github.io/ isserviceworkerready/
  13. 13. Lebenszyklus • https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
  14. 14. Push API • Senden von Informationen an eine Webanwendung • Auch wenn Seite nicht im Vordergrund (oder gar nicht geladen) • Basiert auf Service Worker • Firefox/Chrome (jeweils Desktop)
  15. 15. Notification API • „Toast“-Anzeige einer Meldung • Bestimmte, aber eingeschränkte Layoutmöglichkeiten • Häufig mit zugehörigem Service Worker • Demo: https://github.com/chrisdavidmills/push- api-demo
  16. 16. Server-Sent Events • JavaScript-API für Long Polling Requests • Server schickt dauernd Daten, der Browser verarbeitet sie sukzessive • Schritt 1: Datenquelle abonnieren – var es = new EventSource("polling.ext"); • Schritt 2: auf das Ereignis message lauschen – es.onmessage = function(ev) { console.log(ev.data); }; • Klappt überall – außer im IE 
  17. 17. Stream-Format • Content-type: text/event-stream • Felder: id, data, event, retry (alle optional!) • Format: <field>: <value> • Leerzeilen zwischen Feldern • id: 123 data: abc id: 456 event: def
  18. 18. Wiederaufbau der Verbindung • Browser verbindet sich alle paar Sekunden neu (außer der Streamwert retry gibt etwas anderes an) • Browser schickt den HTTP-Header Last-Event-ID falls der Server zuvor eine ID verschickt hatte • Ermöglicht es dem Server nur neue Daten zu schicken
  19. 19. Web Sockets • Full-Duplex-Kommunikation • Umgeht ein paar der Nachteile von HTTP (Metadaten werden mit jeder Anfrage verschickt, Neuaufbau der Verbindung, etc.) • Klappt in allen modernen Browsern (IE ab Version 10)
  20. 20. HTTP-Handshake • Request: GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com • Response: HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat
  21. 21. API für Web Sockets • Server: hängt von der jeweiligen Technologie ab • Client: – var w = new WebSocket("ws://server:1234"); – w.onopen = function(ev) { w.send("Hi!"); } w.onmessage = function(ev) { console.log(ev.data); }
  22. 22. Websocket-Server mit node.js var webSocketServer = require("websocket").server; server.listen(webSocketsServerPort); var wsServer = new webSocketServer({ httpServer: server }); wsServer.on('request', function(request) { … });
  23. 23. Socket.IO • Es gibt zahlreiche Protokollversionen von Web Sockets • In dem Fall bietet es sich an eine Abstraktionsschicht zu nutzen, die auch Polyfills für ältere Browser bietet, z.B. Socket.IO (http://socket.io/). • Server: – var io = require("socket.io").listen(1234); • Client: – var ws = io.connect("http://127.0.0.1:1234");
  24. 24. WebRTC • http://www.webrtc.org/ • Ursprünglich Open-Source-Projekt von Google • Mittlerweile im W3C- Standardisierungsprozess (http://www.w3.org/2011/04/webrtc/) • Anwendungsfälle: Sprach- und Videokommunikation, P2P
  25. 25. WebRTC-APIs • MediaStream/getUserMedia(): Zugriff auf Daten-Streams • RTCDataChannel: Datenkanal • RTCPeerConnection: P2P-Verbindung für Audio und Video
  26. 26. getUserMedia() • Beispiel Video: navigator.getUserMedia( { video: true }), function(stream) { videoElement.src = window.URL.createObjectURL(stream); // oder: srcObject }, function (error) {});
  27. 27. Screenshots • Aktueller Video-Frame kann in Canvas „gezeichnet“ werden • ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
  28. 28. WebRTC-Beispiele • Firefox Hello • http://apprtc.appspot.com/ • Plugin-basierte Dienste (Skype innerhalb von Facebook, Google Hangouts)
  29. 29. Danke! • Email: christian.wenz@arrabiata.de • Twitter: @chwenz

×