SlideShare ist ein Scribd-Unternehmen logo
Christian Wenz | Arrabiata Solutions GmbH
@chwenz
Kommunikations-APIs von
JavaScript und HTML5
Agenda
• Wider der Same-Origin Policy
– CORS
• Kommunikation im Browser
– Messaging API
– Worker
• Performante Kommunikation
– SSE, WebSockets, WebRTC, …
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
Same-Origin Policy (SOP)
• Origin: vgl.
http://tools.ietf.org/html/rfc6454
• Protokoll, Domain, Port
• Ausgenommen: src-Attribut – etwa bei
<script>!
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/
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)
Lessons Learned
Opfer
(Client)
Angreifer
(Website)
Andere
Website
1) HTTP-Anfrage
2) Schickt JavaScript
3) HTTP-Anfrage
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
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
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
Shared Worker
• Client:
– new SharedWorker
– port.start()
– port.postMessage()
• Worker:
– self.onconnect = function(e) {
var port = e.ports[0];
}
• Aktuell nur Firefox/Chrome
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/
Lebenszyklus
• https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
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)
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
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 
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
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
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)
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
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);
}
Websocket-Server mit node.js
var webSocketServer = require("websocket").server;
server.listen(webSocketsServerPort);
var wsServer = new webSocketServer({
httpServer: server
});
wsServer.on('request', function(request) {
…
});
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");
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
WebRTC-APIs
• MediaStream/getUserMedia(): Zugriff
auf Daten-Streams
• RTCDataChannel: Datenkanal
• RTCPeerConnection: P2P-Verbindung
für Audio und Video
getUserMedia()
• Beispiel Video:
navigator.getUserMedia(
{ video: true }),
function(stream) {
videoElement.src =
window.URL.createObjectURL(stream);
// oder: srcObject
},
function (error) {});
Screenshots
• Aktueller Video-Frame kann in Canvas
„gezeichnet“ werden
• ctx.drawImage(video, 0, 0,
video.clientWidth, video.clientHeight);
WebRTC-Beispiele
• Firefox Hello
• http://apprtc.appspot.com/
• Plugin-basierte Dienste (Skype
innerhalb von Facebook, Google
Hangouts)
Danke!
• Email: christian.wenz@arrabiata.de
• Twitter: @chwenz

Weitere ähnliche Inhalte

Was ist angesagt?

Synology Workshop07 06
Synology Workshop07 06Synology Workshop07 06
Synology Workshop07 06
Jens-Christian Fischer
 
Einfuehrung in die Erstellung von Software-Paketen mit dem RPM Package Manager
Einfuehrung in die Erstellung von Software-Paketen mit dem RPM Package ManagerEinfuehrung in die Erstellung von Software-Paketen mit dem RPM Package Manager
Einfuehrung in die Erstellung von Software-Paketen mit dem RPM Package Manager
Lenz Grimmer
 
Inside HTTP: Webdebugging mit FIddler
Inside HTTP: Webdebugging mit FIddlerInside HTTP: Webdebugging mit FIddler
Inside HTTP: Webdebugging mit FIddler
Max Nowack
 
Offline Arbeiten
Offline ArbeitenOffline Arbeiten
Offline Arbeiten
Jens-Christian Fischer
 
Skalieren einer Web Anwendung
Skalieren einer Web Anwendung Skalieren einer Web Anwendung
Skalieren einer Web Anwendung
Jonathan Weiss
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress Multisite
Walter Ebert
 
Fehlersuche in Joomla
Fehlersuche in JoomlaFehlersuche in Joomla
Fehlersuche in Joomla
formativ.net oHG
 
Docker Workbench
Docker WorkbenchDocker Workbench
Docker Workbench
Patrick Paechnatz
 
Feedbox - ServerPush Implementierung
Feedbox - ServerPush ImplementierungFeedbox - ServerPush Implementierung
Feedbox - ServerPush Implementierung
Martin Wöginger
 
Typo3 und Varnish
Typo3 und VarnishTypo3 und Varnish
Typo3 und Varnish
Oliver Thiele
 
Grundlagen puppet
Grundlagen puppetGrundlagen puppet
Grundlagen puppet
inovex GmbH
 
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
NETWAYS
 
Web 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface LibraryWeb 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface Library
Stephan Schmidt
 
MK2014 FileMaker Server 13 by Thomas Hahn
MK2014 FileMaker Server 13 by Thomas HahnMK2014 FileMaker Server 13 by Thomas Hahn
MK2014 FileMaker Server 13 by Thomas Hahn
Verein FM Konferenz
 
Exchange 2013 Migration und Koexistenz
Exchange 2013 Migration und KoexistenzExchange 2013 Migration und Koexistenz
Exchange 2013 Migration und Koexistenz
GWAVA
 
Skalieren von WordPress & WooCommerce
Skalieren von WordPress & WooCommerceSkalieren von WordPress & WooCommerce
Skalieren von WordPress & WooCommerce
Robert Windisch
 
PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3
marco-huber
 
Bestehende WordPress-Seiten auf Multisite migrieren
Bestehende WordPress-Seiten auf Multisite migrierenBestehende WordPress-Seiten auf Multisite migrieren
Bestehende WordPress-Seiten auf Multisite migrieren
Walter Ebert
 
Automatisierte Linux Administration mit (R)?ex
Automatisierte Linux Administration mit (R)?ex Automatisierte Linux Administration mit (R)?ex
Automatisierte Linux Administration mit (R)?ex
Jan Gehring
 
Vagrant - Einführung & Verwendung
Vagrant - Einführung & VerwendungVagrant - Einführung & Verwendung
Vagrant - Einführung & Verwendung
Tilo Baller
 

Was ist angesagt? (20)

Synology Workshop07 06
Synology Workshop07 06Synology Workshop07 06
Synology Workshop07 06
 
Einfuehrung in die Erstellung von Software-Paketen mit dem RPM Package Manager
Einfuehrung in die Erstellung von Software-Paketen mit dem RPM Package ManagerEinfuehrung in die Erstellung von Software-Paketen mit dem RPM Package Manager
Einfuehrung in die Erstellung von Software-Paketen mit dem RPM Package Manager
 
Inside HTTP: Webdebugging mit FIddler
Inside HTTP: Webdebugging mit FIddlerInside HTTP: Webdebugging mit FIddler
Inside HTTP: Webdebugging mit FIddler
 
Offline Arbeiten
Offline ArbeitenOffline Arbeiten
Offline Arbeiten
 
Skalieren einer Web Anwendung
Skalieren einer Web Anwendung Skalieren einer Web Anwendung
Skalieren einer Web Anwendung
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress Multisite
 
Fehlersuche in Joomla
Fehlersuche in JoomlaFehlersuche in Joomla
Fehlersuche in Joomla
 
Docker Workbench
Docker WorkbenchDocker Workbench
Docker Workbench
 
Feedbox - ServerPush Implementierung
Feedbox - ServerPush ImplementierungFeedbox - ServerPush Implementierung
Feedbox - ServerPush Implementierung
 
Typo3 und Varnish
Typo3 und VarnishTypo3 und Varnish
Typo3 und Varnish
 
Grundlagen puppet
Grundlagen puppetGrundlagen puppet
Grundlagen puppet
 
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
 
Web 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface LibraryWeb 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface Library
 
MK2014 FileMaker Server 13 by Thomas Hahn
MK2014 FileMaker Server 13 by Thomas HahnMK2014 FileMaker Server 13 by Thomas Hahn
MK2014 FileMaker Server 13 by Thomas Hahn
 
Exchange 2013 Migration und Koexistenz
Exchange 2013 Migration und KoexistenzExchange 2013 Migration und Koexistenz
Exchange 2013 Migration und Koexistenz
 
Skalieren von WordPress & WooCommerce
Skalieren von WordPress & WooCommerceSkalieren von WordPress & WooCommerce
Skalieren von WordPress & WooCommerce
 
PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3
 
Bestehende WordPress-Seiten auf Multisite migrieren
Bestehende WordPress-Seiten auf Multisite migrierenBestehende WordPress-Seiten auf Multisite migrieren
Bestehende WordPress-Seiten auf Multisite migrieren
 
Automatisierte Linux Administration mit (R)?ex
Automatisierte Linux Administration mit (R)?ex Automatisierte Linux Administration mit (R)?ex
Automatisierte Linux Administration mit (R)?ex
 
Vagrant - Einführung & Verwendung
Vagrant - Einführung & VerwendungVagrant - Einführung & Verwendung
Vagrant - Einführung & Verwendung
 

Andere mochten auch

Open Educational Resources in Higher education
Open Educational Resources in Higher education Open Educational Resources in Higher education
Open Educational Resources in Higher education
Ulf-Daniel Ehlers
 
JavaScript QA Tools
JavaScript QA ToolsJavaScript QA Tools
JavaScript QA Tools
Sebastian Springer
 
Qualität von MOOCs
Qualität von MOOCsQualität von MOOCs
Qualität von MOOCs
Ulf-Daniel Ehlers
 
Qualität von MOOCs - Folien zum GMW Workshop mit Rolf Schulmeister, Claudia B...
Qualität von MOOCs - Folien zum GMW Workshop mit Rolf Schulmeister, Claudia B...Qualität von MOOCs - Folien zum GMW Workshop mit Rolf Schulmeister, Claudia B...
Qualität von MOOCs - Folien zum GMW Workshop mit Rolf Schulmeister, Claudia B...
Ulf-Daniel Ehlers
 
Beschleunigung via Twitter (Input)
Beschleunigung via Twitter (Input)Beschleunigung via Twitter (Input)
Beschleunigung via Twitter (Input)
Tine Nowak
 
Quaity of MOOCs - Results of "The MOOC Quality Project"
Quaity of MOOCs - Results of "The MOOC Quality Project"Quaity of MOOCs - Results of "The MOOC Quality Project"
Quaity of MOOCs - Results of "The MOOC Quality Project"
Ulf-Daniel Ehlers
 
Weblogs im Museum
Weblogs im MuseumWeblogs im Museum
Weblogs im Museum
Tine Nowak
 
E-Learning im Museum
E-Learning im MuseumE-Learning im Museum
E-Learning im Museum
Tine Nowak
 

Andere mochten auch (8)

Open Educational Resources in Higher education
Open Educational Resources in Higher education Open Educational Resources in Higher education
Open Educational Resources in Higher education
 
JavaScript QA Tools
JavaScript QA ToolsJavaScript QA Tools
JavaScript QA Tools
 
Qualität von MOOCs
Qualität von MOOCsQualität von MOOCs
Qualität von MOOCs
 
Qualität von MOOCs - Folien zum GMW Workshop mit Rolf Schulmeister, Claudia B...
Qualität von MOOCs - Folien zum GMW Workshop mit Rolf Schulmeister, Claudia B...Qualität von MOOCs - Folien zum GMW Workshop mit Rolf Schulmeister, Claudia B...
Qualität von MOOCs - Folien zum GMW Workshop mit Rolf Schulmeister, Claudia B...
 
Beschleunigung via Twitter (Input)
Beschleunigung via Twitter (Input)Beschleunigung via Twitter (Input)
Beschleunigung via Twitter (Input)
 
Quaity of MOOCs - Results of "The MOOC Quality Project"
Quaity of MOOCs - Results of "The MOOC Quality Project"Quaity of MOOCs - Results of "The MOOC Quality Project"
Quaity of MOOCs - Results of "The MOOC Quality Project"
 
Weblogs im Museum
Weblogs im MuseumWeblogs im Museum
Weblogs im Museum
 
E-Learning im Museum
E-Learning im MuseumE-Learning im Museum
E-Learning im Museum
 

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

Internet Information Services (deutsch)
Internet Information Services (deutsch)Internet Information Services (deutsch)
Internet Information Services (deutsch)
Joerg Krause
 
XML-Socket-Server zur Kommunikation mit Flash
XML-Socket-Server zur Kommunikation mit FlashXML-Socket-Server zur Kommunikation mit Flash
XML-Socket-Server zur Kommunikation mit Flash
Stephan Schmidt
 
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-ApplikationenWebsockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
SpeedPartner GmbH
 
Sockets – Theorie und Implementierung
Sockets – Theorie und ImplementierungSockets – Theorie und Implementierung
Sockets – Theorie und Implementierung
Andreas Roth
 
Sockets – Theorie und Implementierung
Sockets – Theorie und ImplementierungSockets – Theorie und Implementierung
Sockets – Theorie und Implementierung
Andreas Roth
 
Ist GraphQL das bessere REST
Ist GraphQL das bessere RESTIst GraphQL das bessere REST
Ist GraphQL das bessere REST
Martin Abraham
 
node.js - Eine kurze Einführung
node.js - Eine kurze Einführungnode.js - Eine kurze Einführung
node.js - Eine kurze Einführung
nodeio
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
A. LE
 
HTTP und Java Servlets Programmierung
HTTP und Java Servlets ProgrammierungHTTP und Java Servlets Programmierung
HTTP und Java Servlets Programmierung
Christian Baranowski
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
Jens Siebert
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
SEARCH ONE
 
Interaktives Web
Interaktives WebInteraktives Web
Interaktives Web
Peter Micheuz
 
Citrix Day 2013: Citirx Networking
Citrix Day 2013: Citirx NetworkingCitrix Day 2013: Citirx Networking
Citrix Day 2013: Citirx Networking
Digicomp Academy AG
 
Rest
RestRest
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
Kai Donato
 
Grundlagen des World Wide Web
Grundlagen des World Wide WebGrundlagen des World Wide Web
Grundlagen des World Wide Web
Jakob .
 
Webanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationWebanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und Administration
Thomas Siegers
 
Backend-Services mit Rust
Backend-Services mit RustBackend-Services mit Rust
Backend-Services mit Rust
Jens Siebert
 
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleOSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
NETWAYS
 

Ähnlich wie Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2016 Fall) (20)

Internet Information Services (deutsch)
Internet Information Services (deutsch)Internet Information Services (deutsch)
Internet Information Services (deutsch)
 
XML-Socket-Server zur Kommunikation mit Flash
XML-Socket-Server zur Kommunikation mit FlashXML-Socket-Server zur Kommunikation mit Flash
XML-Socket-Server zur Kommunikation mit Flash
 
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-ApplikationenWebsockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
 
Sockets – Theorie und Implementierung
Sockets – Theorie und ImplementierungSockets – Theorie und Implementierung
Sockets – Theorie und Implementierung
 
Sockets – Theorie und Implementierung
Sockets – Theorie und ImplementierungSockets – Theorie und Implementierung
Sockets – Theorie und Implementierung
 
Ist GraphQL das bessere REST
Ist GraphQL das bessere RESTIst GraphQL das bessere REST
Ist GraphQL das bessere REST
 
node.js - Eine kurze Einführung
node.js - Eine kurze Einführungnode.js - Eine kurze Einführung
node.js - Eine kurze Einführung
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
 
HTTP und Java Servlets Programmierung
HTTP und Java Servlets ProgrammierungHTTP und Java Servlets Programmierung
HTTP und Java Servlets Programmierung
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
Interaktives Web
Interaktives WebInteraktives Web
Interaktives Web
 
Citrix Day 2013: Citirx Networking
Citrix Day 2013: Citirx NetworkingCitrix Day 2013: Citirx Networking
Citrix Day 2013: Citirx Networking
 
Rest
RestRest
Rest
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
 
Grundlagen des World Wide Web
Grundlagen des World Wide WebGrundlagen des World Wide Web
Grundlagen des World Wide Web
 
Webanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationWebanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und Administration
 
GWT
GWTGWT
GWT
 
Backend-Services mit Rust
Backend-Services mit RustBackend-Services mit Rust
Backend-Services mit Rust
 
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleOSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
 

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

  • 1. Christian Wenz | Arrabiata Solutions GmbH @chwenz Kommunikations-APIs von JavaScript und HTML5
  • 2. Agenda • Wider der Same-Origin Policy – CORS • Kommunikation im Browser – Messaging API – Worker • Performante Kommunikation – SSE, WebSockets, WebRTC, …
  • 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. Same-Origin Policy (SOP) • Origin: vgl. http://tools.ietf.org/html/rfc6454 • Protokoll, Domain, Port • Ausgenommen: src-Attribut – etwa bei <script>!
  • 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. 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)
  • 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. 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. 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. Shared Worker • Client: – new SharedWorker – port.start() – port.postMessage() • Worker: – self.onconnect = function(e) { var port = e.ports[0]; } • Aktuell nur Firefox/Chrome
  • 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/
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. WebRTC-APIs • MediaStream/getUserMedia(): Zugriff auf Daten-Streams • RTCDataChannel: Datenkanal • RTCPeerConnection: P2P-Verbindung für Audio und Video
  • 26. getUserMedia() • Beispiel Video: navigator.getUserMedia( { video: true }), function(stream) { videoElement.src = window.URL.createObjectURL(stream); // oder: srcObject }, function (error) {});
  • 27. Screenshots • Aktueller Video-Frame kann in Canvas „gezeichnet“ werden • ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
  • 28. WebRTC-Beispiele • Firefox Hello • http://apprtc.appspot.com/ • Plugin-basierte Dienste (Skype innerhalb von Facebook, Google Hangouts)