browser apis for data exchange: types and application
TRANSCRIPT
BROWSER APISFOR DATA EXCHANGE
types and application
Pavel Klimenkov
HOLY NETWORK BIBLE
AGENDA
Request
Response
Request
Response
Request
Response
Request
Response
MSXML2XMLHTTP
XMLHttpRequest
Classic XHR
EXAMPLE
FEATURESHTTP(S): GET, POST, PUT, DELETE
Text only (base64 for binary)
Access to certain http headers
Sync/async
GZip, deflate compression
SUPPORT
EVERYWHERE!
SOMETHING’S MISSING
Files and binary support
Cross domain requests
Convenient POST requests
XML HTTP REQUEST LEVEL 2 (2011)
+ binary data and files
+ html forms support - FormData object
+ cross domain requests (CORS)
+ upload/download events
CORSREQUEST HEADERS
GET /secret.html HTTP/1.1
Host: microsoft.com
Origin:
http://google.com
CORSRESPONSE HEADERS
HTTP/1.1 200 OK
Access-Control-Allow-
Origin:
http://google.com
FORM DATA
SUPPORT
FETCH()
Came from service worker
Promise-oriented
Almost like XMLHttpRequest, but simpler
Still in development
FETCH()
SUPPORT
SUMMARY
There’s XMLHttpRequest & fetch()
They both work over HTTP(S)
Request - response - stop
Text and binary support
Cross domain requests
WHAT’S WRONG
Minus one TCP connection (out of 6 per domain)
Not designed for real time server events streaming
> polling
> long polling
LONG POLLING
Request
Response
SERVER-SENT EVENTS(2006)
SSE
EVENT SOURCE
EventSource is an API that allows listening for server sent events in DOM manner
FEATURES
HTTP(s)
Automatic reconnect
Tracking last delivered event id (supplements auto reconnect)
Simple polyfill
SSE REQUEST
GET /users/updates HTTP/1.1
Host: myserver.com
Accept: text/event-stream
Last-Event-ID: 43
SSE RESPONSE
HTTP/1.1 200 OK
Connection: keep-alive
Content-Type: text/event-stream
Transfer-Encoding: chunked
SSE MESSAGESdata: Simple message
data: {“message”: “JSON payload”}
event: user.updatedata: {“changed”: “firstName”}
id: 42event: broadcastdata: shutdown
1
2
3
4
USE CASES
GPS stream for real time vehicle animation on map
Stream of modified objects IDs for invalidating client cache
SUPPORT
WHAT’S BADNo IE support (yet polyfill is simple)
Text only (we still can use base64)
Initial request arguments cannot be changed
Request
Response
WEB SOCKET2010
WEB SOCKET
WebSocket is an API, which allows sending text and binary messages between client and server in both directions
FEATURES
Starts over HTTP(S), but falls back to own binary protocol after a handshake
ws:// and wss:// instead of http:// and https://
Text and binary
USE CASES
Browser chat application
Server events stream with adjustable subscriptions list
Progressive media download
SUPPORT
WHAT TO CONSIDERMore complex protocol (if you ever going to implement it)
No compression (something experimental in Chrome)
WHAT’S WRONG WITHXHR, SSE, WEBSOCKET
No request/response multiplexingCan’t use transport until current request/response ends
There’re only 6 TCP connections per domainEach API takes one of those
WEB RTC2010
WebRTC is an API peer-to-peer exchange of text and binary messages
FEATURES
UDP instead of TCP
Text and binary
Built in audio/video transmission support
peer-to-peer
Mandatory encryption for non-media data
IT’S NOT JUSTSKYPE KILLER
USE CASES
Browser games
Exchange of data that is needed by clients, but not going to be saved on the server
Ok, better Skype
WHY IS WEB RTC
SO DIFFICULT?
2 REASONS
Clients have to find each other
UDP traffic must be delivered through NAT
SIGNALING CHANNELBefore connection could start, peers must exchange Offer/Answer messages over some sort of signaling channel
YOU HAVE TO BUILD ONE!
Offer/Answer can be delivered by
Courier
SMS
more realistically, dedicated server that
peers can connect to via XHR or WebSocket
NAT TRAVERSALWhere UDP traffic should be sent to? You don’t know your public IP
WORKAROUND: STUN, TURN
WORKAROUND IS CALLED“ICE”
ICE - interactive connectivity establishment
Using network card, STUN and TURN servers, ICE gets pairs of IP:Port (ICE candidates), which can be sent to the second peer
ALL TOGETHER1) We need signaling channel
2) We need addresses of STUN/TURN servers
3) RTCPeerConnection can create Offer and find ICE candidates
4) We should pass all from above through signaling channel to the second peer
5) Second peer will use signaling channel to send his Answer and ICE candidates to us
SUPPORT
WHAT’S WRONG
No IE and Safari support
Complex polyfill
Difficult to use and understand
Cross browser issues and vendor prefixes
WRAPPING UP
XMLHttpRequest Server-sent events
WebSocket WebRTC
fetch()
ABOUT THE BOOKCovers all basic questions about the networkProvides full picture of browser networking APIs
THANK YOU!
/pasha.klimenkov
/in/pavelklimenkov
DotsAndBrackets.com