SlideShare a Scribd company logo
1 of 18
Download to read offline
www.arrabiata.co.uk
HTML5/JavaScript Communication APIs
Dutch PHP Conference, 27.06.2014
Christian Wenz
christian.wenz@arrabiata.co.uk
Arrabiata Solutions
::
As a specialist for digital solutions we offer our clients all services from
conception to realization, support and optimization. Our focus is international
with offices in Munich and London. Arrabiata Solutions was founded in 2006
and has more than 30 employees with a combined experience of over 100
successful projects. ::
Arrabiata is a full-service digital agency.
AGENDA
STATUS QUO
WORKING AROND SOP
MESSAGING API
SSE & WEB SOCKETS
CONCLUSION
Status Quo
• GET requests via anything with an src attribute
– No restrictions
– Only possible to provide URL
• Any (browser-supported) HTTP verb via
XMLHttpRequest
– Can set headers and HTTP body
– Restricted by SOP (same-origin policy)
• Protocol, domain, port
• Still using HTTP
Working around SOP: JSONP
• JSON with padding
• Ajax call:
– <script src="http://domain/file.ashx?jsonp=func">
</script>
• Return value:
– func([1, 2, 3]);
• „Padding“ is „func“
• Works in virtually any browser
• Still is kinda hackish
CORS
• Cross-Origin Resource Sharing
• Works around the Same Origin Policy
• Restrictions must be met, though
– Specific Content-type header
– Origin header
– Server uses Access-Control-Allow-Origin header
(value must be * or Origin header for the browser
to proceed)
• Advanced approach: preflighted requests (e.g.
for POST requests to avoid CSRF)
Messaging API
• Simple cross-domain mechanism to
send/receive data
• Works everywhere except IE7-, and limited in
IE8+
• Sending:
– Access other window (e.g. contentWindow
property of an iframe)
– Use postMessage() method to send data (1st
argument)
– For security reasons, use origin of target site as
2nd argument
Messaging API (2)
• Receiving:
– Wait for window‘s message event.
– Event arguments contain the data sent (data
property) and the origin of the sender (origin
property)
– Use postMessage() to send data back to the
origin
– Sender may use the message event as well to
process the data from the receiver.
Server-Sent Events
• JavaScript API for long polling requests
• Server continously sends data, the client just
receives and processes them
• Step 1: subscribe to source
– var es = new EventSource("polling.ext");
• Step 2: listen to message event
– es.onmessage = function(ev) {
console.log(ev.data);
};
• Works almost everywhere except IE
Stream Format
• Content-type: text/event-stream
• Fields: id, data, event, retry (all optional!)
• Format: <field>: <value>
• Blank lines between fields
• id: 123
data: abc
id: 456
event: def
Reconnecting to the Server
• Browser reconnects the connection every
few seconds (unless changed by retry
stream value)
• Browser sends Last-Event-ID HTTP header if
server sent ID before
• Allows server to only send new events
Web Sockets
• Full duplex communication
• Circumvents a few of the disadvantages of
HTTP (metadata sent with each request, re-
establishment of the connection, etc.)
• Works in all recent browsers except IE9-
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 for Web Sockets
• Server: depends on the technology used; node.js is the
poster child of the month
• 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 with node.js
var server = require('http');
var webSocketServer = require("websocket").server;
server.listen(1234);
var wsServer = new webSocketServer({
httpServer: server
});
wsServer.on('request', function(request) {
…
});
Socket.IO
• There are countless protocol versions for Web Sockets
• Better use an abstraction layer that also provides polyfills
for browsers that use an older API version, e.g. Socket.IO
(http://socket.io/).
• Server:
– var io = require("socket.io").listen(1234);
• Client:
– var ws = io.connect("http://127.0.0.1:1234");
Decision Chart
Technique X-Domain Return data Backchannel Long running High Performance
src     
XHR     
JSONP     
CORS     
Messaging     
Workers     
Server-Sent
Events
    
Web Sockets     
Thank You!
• christian.wenz@arrabiata.co.uk
• http://www.arrabiata.co.uk/
• @chwenz
• Rate this session:
http://joind.in/talk/view/10857

More Related Content

What's hot

Php & web server performace
Php & web server performacePhp & web server performace
Php & web server performaceTuyển Đoàn
 
IT Operations for Web Developers
IT Operations for Web DevelopersIT Operations for Web Developers
IT Operations for Web DevelopersMahmoud Said
 
Are we security yet
Are we security yetAre we security yet
Are we security yetCristian Vat
 
20180714 workshop - Ethereum decentralized application with truffle framework
20180714 workshop - Ethereum decentralized application with truffle framework20180714 workshop - Ethereum decentralized application with truffle framework
20180714 workshop - Ethereum decentralized application with truffle frameworkHu Kenneth
 
JavaScript Service Worker Design Patterns for Better User Experience
JavaScript Service Worker Design Patterns for Better User ExperienceJavaScript Service Worker Design Patterns for Better User Experience
JavaScript Service Worker Design Patterns for Better User Experiencereeder29
 
Ускоряем загрузку картинок вебсокетами
Ускоряем загрузку картинок вебсокетамиУскоряем загрузку картинок вебсокетами
Ускоряем загрузку картинок вебсокетами2ГИС Технологии
 
My adventure with WebSockets
My adventure with WebSocketsMy adventure with WebSockets
My adventure with WebSocketsMichiel De Mey
 
CNIT 124: Ch 8: Exploitation
CNIT 124: Ch 8: ExploitationCNIT 124: Ch 8: Exploitation
CNIT 124: Ch 8: ExploitationSam Bowne
 
Eclipse Dirigible WebIDE - Deep Dive
Eclipse Dirigible WebIDE - Deep DiveEclipse Dirigible WebIDE - Deep Dive
Eclipse Dirigible WebIDE - Deep DiveNedelcho Delchev
 
Cloud Hosted mongodb
Cloud Hosted mongodbCloud Hosted mongodb
Cloud Hosted mongodbPrem Sanil
 
Communicating on the web
Communicating on the webCommunicating on the web
Communicating on the webAdrian Cardenas
 
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2Load Impact
 
Build RPC for PHP
Build RPC for PHPBuild RPC for PHP
Build RPC for PHPHuqiu Liao
 
What HTTP/2.0 Will Do For You
What HTTP/2.0 Will Do For YouWhat HTTP/2.0 Will Do For You
What HTTP/2.0 Will Do For YouMark Nottingham
 

What's hot (20)

Php & web server performace
Php & web server performacePhp & web server performace
Php & web server performace
 
IT Operations for Web Developers
IT Operations for Web DevelopersIT Operations for Web Developers
IT Operations for Web Developers
 
Are we security yet
Are we security yetAre we security yet
Are we security yet
 
20180714 workshop - Ethereum decentralized application with truffle framework
20180714 workshop - Ethereum decentralized application with truffle framework20180714 workshop - Ethereum decentralized application with truffle framework
20180714 workshop - Ethereum decentralized application with truffle framework
 
JavaScript Service Worker Design Patterns for Better User Experience
JavaScript Service Worker Design Patterns for Better User ExperienceJavaScript Service Worker Design Patterns for Better User Experience
JavaScript Service Worker Design Patterns for Better User Experience
 
Intro to Web Sockets
Intro to Web Sockets Intro to Web Sockets
Intro to Web Sockets
 
Ускоряем загрузку картинок вебсокетами
Ускоряем загрузку картинок вебсокетамиУскоряем загрузку картинок вебсокетами
Ускоряем загрузку картинок вебсокетами
 
Html5
Html5Html5
Html5
 
My adventure with WebSockets
My adventure with WebSocketsMy adventure with WebSockets
My adventure with WebSockets
 
CNIT 124: Ch 8: Exploitation
CNIT 124: Ch 8: ExploitationCNIT 124: Ch 8: Exploitation
CNIT 124: Ch 8: Exploitation
 
HTTP/2
HTTP/2HTTP/2
HTTP/2
 
Eclipse Dirigible WebIDE - Deep Dive
Eclipse Dirigible WebIDE - Deep DiveEclipse Dirigible WebIDE - Deep Dive
Eclipse Dirigible WebIDE - Deep Dive
 
Cloud Hosted mongodb
Cloud Hosted mongodbCloud Hosted mongodb
Cloud Hosted mongodb
 
Communicating on the web
Communicating on the webCommunicating on the web
Communicating on the web
 
Http/2 lightning
Http/2   lightningHttp/2   lightning
Http/2 lightning
 
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2
 
Excellent rest using asp.net web api
Excellent rest using asp.net web apiExcellent rest using asp.net web api
Excellent rest using asp.net web api
 
Build RPC for PHP
Build RPC for PHPBuild RPC for PHP
Build RPC for PHP
 
ASP.NET WEB API
ASP.NET WEB APIASP.NET WEB API
ASP.NET WEB API
 
What HTTP/2.0 Will Do For You
What HTTP/2.0 Will Do For YouWhat HTTP/2.0 Will Do For You
What HTTP/2.0 Will Do For You
 

Similar to HTML5/JavaScript Communication APIs - DPC 2014

Using communication and messaging API in the HTML5 world - GIl Fink, sparXsys
Using communication and messaging API in the HTML5 world - GIl Fink, sparXsysUsing communication and messaging API in the HTML5 world - GIl Fink, sparXsys
Using communication and messaging API in the HTML5 world - GIl Fink, sparXsysCodemotion Tel Aviv
 
Using Communication and Messaging API in the HTML5 World
Using Communication and Messaging API in the HTML5 WorldUsing Communication and Messaging API in the HTML5 World
Using Communication and Messaging API in the HTML5 WorldGil Fink
 
Synapseindia dot net development web applications with ajax
Synapseindia dot net development  web applications with ajaxSynapseindia dot net development  web applications with ajax
Synapseindia dot net development web applications with ajaxSynapseindiappsdevelopment
 
Lecture 6 Web Sockets
Lecture 6   Web SocketsLecture 6   Web Sockets
Lecture 6 Web SocketsFahad Golra
 
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)Ericom Software
 
Presentation on Application layer_201.pdf
Presentation on Application layer_201.pdfPresentation on Application layer_201.pdf
Presentation on Application layer_201.pdfprince2412001
 
2. application layer
2. application layer2. application layer
2. application layerTageleBerihun
 
Websocket vs SSE - Paris.js - 24/06/15
Websocket vs SSE - Paris.js - 24/06/15Websocket vs SSE - Paris.js - 24/06/15
Websocket vs SSE - Paris.js - 24/06/15streamdata.io
 
Dev con kolkata 2012 websockets
Dev con kolkata 2012   websocketsDev con kolkata 2012   websockets
Dev con kolkata 2012 websocketsSANKARSAN BOSE
 
Webservices
WebservicesWebservices
Webservicess4al_com
 
Building interactivity with websockets
Building interactivity with websocketsBuilding interactivity with websockets
Building interactivity with websocketsWim Godden
 
Websocket technology for XPages
Websocket technology for XPagesWebsocket technology for XPages
Websocket technology for XPagesCsaba Kiss
 
11.Open Data Protocol(ODATA)
11.Open Data Protocol(ODATA) 11.Open Data Protocol(ODATA)
11.Open Data Protocol(ODATA) Nguyen Tuan
 
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsNaresh Chintalcheru
 
Windows Phone 8 - 12 Network Communication
Windows Phone 8 - 12 Network CommunicationWindows Phone 8 - 12 Network Communication
Windows Phone 8 - 12 Network CommunicationOliver Scheer
 
009577496.pdf
009577496.pdf009577496.pdf
009577496.pdfEidTahir
 
SignalR: Add real-time to your applications
SignalR: Add real-time to your applicationsSignalR: Add real-time to your applications
SignalR: Add real-time to your applicationsEugene Zharkov
 
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...Sencha
 

Similar to HTML5/JavaScript Communication APIs - DPC 2014 (20)

Using communication and messaging API in the HTML5 world - GIl Fink, sparXsys
Using communication and messaging API in the HTML5 world - GIl Fink, sparXsysUsing communication and messaging API in the HTML5 world - GIl Fink, sparXsys
Using communication and messaging API in the HTML5 world - GIl Fink, sparXsys
 
Using Communication and Messaging API in the HTML5 World
Using Communication and Messaging API in the HTML5 WorldUsing Communication and Messaging API in the HTML5 World
Using Communication and Messaging API in the HTML5 World
 
Synapseindia dot net development web applications with ajax
Synapseindia dot net development  web applications with ajaxSynapseindia dot net development  web applications with ajax
Synapseindia dot net development web applications with ajax
 
Lecture 6 Web Sockets
Lecture 6   Web SocketsLecture 6   Web Sockets
Lecture 6 Web Sockets
 
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
 
Presentation on Application layer_201.pdf
Presentation on Application layer_201.pdfPresentation on Application layer_201.pdf
Presentation on Application layer_201.pdf
 
2. application layer
2. application layer2. application layer
2. application layer
 
Websocket vs SSE - Paris.js - 24/06/15
Websocket vs SSE - Paris.js - 24/06/15Websocket vs SSE - Paris.js - 24/06/15
Websocket vs SSE - Paris.js - 24/06/15
 
Dev con kolkata 2012 websockets
Dev con kolkata 2012   websocketsDev con kolkata 2012   websockets
Dev con kolkata 2012 websockets
 
Webservices
WebservicesWebservices
Webservices
 
Building interactivity with websockets
Building interactivity with websocketsBuilding interactivity with websockets
Building interactivity with websockets
 
Websocket technology for XPages
Websocket technology for XPagesWebsocket technology for XPages
Websocket technology for XPages
 
11.Open Data Protocol(ODATA)
11.Open Data Protocol(ODATA) 11.Open Data Protocol(ODATA)
11.Open Data Protocol(ODATA)
 
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using Websockets
 
Windows Phone 8 - 12 Network Communication
Windows Phone 8 - 12 Network CommunicationWindows Phone 8 - 12 Network Communication
Windows Phone 8 - 12 Network Communication
 
signalr
signalrsignalr
signalr
 
009577496.pdf
009577496.pdf009577496.pdf
009577496.pdf
 
SignalR: Add real-time to your applications
SignalR: Add real-time to your applicationsSignalR: Add real-time to your applications
SignalR: Add real-time to your applications
 
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...
 
ITI006En-AJAX
ITI006En-AJAXITI006En-AJAX
ITI006En-AJAX
 

Recently uploaded

A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 

Recently uploaded (20)

A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 

HTML5/JavaScript Communication APIs - DPC 2014

  • 1. www.arrabiata.co.uk HTML5/JavaScript Communication APIs Dutch PHP Conference, 27.06.2014 Christian Wenz christian.wenz@arrabiata.co.uk
  • 2. Arrabiata Solutions :: As a specialist for digital solutions we offer our clients all services from conception to realization, support and optimization. Our focus is international with offices in Munich and London. Arrabiata Solutions was founded in 2006 and has more than 30 employees with a combined experience of over 100 successful projects. :: Arrabiata is a full-service digital agency.
  • 3. AGENDA STATUS QUO WORKING AROND SOP MESSAGING API SSE & WEB SOCKETS CONCLUSION
  • 4. Status Quo • GET requests via anything with an src attribute – No restrictions – Only possible to provide URL • Any (browser-supported) HTTP verb via XMLHttpRequest – Can set headers and HTTP body – Restricted by SOP (same-origin policy) • Protocol, domain, port • Still using HTTP
  • 5. Working around SOP: JSONP • JSON with padding • Ajax call: – <script src="http://domain/file.ashx?jsonp=func"> </script> • Return value: – func([1, 2, 3]); • „Padding“ is „func“ • Works in virtually any browser • Still is kinda hackish
  • 6. CORS • Cross-Origin Resource Sharing • Works around the Same Origin Policy • Restrictions must be met, though – Specific Content-type header – Origin header – Server uses Access-Control-Allow-Origin header (value must be * or Origin header for the browser to proceed) • Advanced approach: preflighted requests (e.g. for POST requests to avoid CSRF)
  • 7. Messaging API • Simple cross-domain mechanism to send/receive data • Works everywhere except IE7-, and limited in IE8+ • Sending: – Access other window (e.g. contentWindow property of an iframe) – Use postMessage() method to send data (1st argument) – For security reasons, use origin of target site as 2nd argument
  • 8. Messaging API (2) • Receiving: – Wait for window‘s message event. – Event arguments contain the data sent (data property) and the origin of the sender (origin property) – Use postMessage() to send data back to the origin – Sender may use the message event as well to process the data from the receiver.
  • 9. Server-Sent Events • JavaScript API for long polling requests • Server continously sends data, the client just receives and processes them • Step 1: subscribe to source – var es = new EventSource("polling.ext"); • Step 2: listen to message event – es.onmessage = function(ev) { console.log(ev.data); }; • Works almost everywhere except IE
  • 10. Stream Format • Content-type: text/event-stream • Fields: id, data, event, retry (all optional!) • Format: <field>: <value> • Blank lines between fields • id: 123 data: abc id: 456 event: def
  • 11. Reconnecting to the Server • Browser reconnects the connection every few seconds (unless changed by retry stream value) • Browser sends Last-Event-ID HTTP header if server sent ID before • Allows server to only send new events
  • 12. Web Sockets • Full duplex communication • Circumvents a few of the disadvantages of HTTP (metadata sent with each request, re- establishment of the connection, etc.) • Works in all recent browsers except IE9-
  • 13. 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
  • 14. API for Web Sockets • Server: depends on the technology used; node.js is the poster child of the month • Client: – var w = new WebSocket("ws://server:1234"); – w.onopen = function(ev) { w.send("Hi!"); } w.onmessage = function(ev) { console.log(ev.data); }
  • 15. Websocket Server with node.js var server = require('http'); var webSocketServer = require("websocket").server; server.listen(1234); var wsServer = new webSocketServer({ httpServer: server }); wsServer.on('request', function(request) { … });
  • 16. Socket.IO • There are countless protocol versions for Web Sockets • Better use an abstraction layer that also provides polyfills for browsers that use an older API version, e.g. Socket.IO (http://socket.io/). • Server: – var io = require("socket.io").listen(1234); • Client: – var ws = io.connect("http://127.0.0.1:1234");
  • 17. Decision Chart Technique X-Domain Return data Backchannel Long running High Performance src      XHR      JSONP      CORS      Messaging      Workers      Server-Sent Events      Web Sockets     
  • 18. Thank You! • christian.wenz@arrabiata.co.uk • http://www.arrabiata.co.uk/ • @chwenz • Rate this session: http://joind.in/talk/view/10857