browser apis for data exchange: types and application

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