Браузерные api обмена данными: какие и зачем

БРАУЗЕРНЫЕ APIОБМЕНА ДАННЫМИ

какие и зачем

Павел Клименков

СЕТЕВАЯ БИБЛИЯ

ПЛАН НА ВЕЧЕР

Request

Response

Request

Response

Request

Response

Request

Response

MSXML2XMLHTTP

XMLHttpRequest

Классический XHR

ПРИМЕР

ОСОБЕННОСТИHTTP(S): GET, POST, PUT, DELETE

Только текст (либо base64)

Перезапись http headers

Sync/async

GZip, deflate компрессия

ПОДДЕРЖКА

ВЕЗДЕ!

ЧЕГО НЕ ХВАТАЕТ

Поддержки файлов

Кросс-доменных запросов

Удобных POST запросов

XML HTTP REQUEST LEVEL 2 (2011)

+ бинарные данные и файлы

+ поддержка html форм - объект FormData

+ кросс доменные запросы (CORS)

+ события о прогрессе загрузки

CORSЗАГОЛОВОК ЗАПРОСА

GET /secret.html HTTP/1.1

Host: microsoft.com

Origin:

http://google.com

CORSЗАГОЛОВОК ОТВЕТА

HTTP/1.1 200 OK

Access-Control-Allow-

Origin: http

://google.com

FORM DATA

ПОДДЕРЖКА

FETCH()

Пришел из service worker

Promise ориентированный

Почти как XMLHttpRequest

Сырой

FETCH()

ПОДДЕРЖКА

ПОДРЕЗЮМИРУЕМ

У нас есть XMLHttpRequest и fetch()

Они работают по HTTP(S)

Ориентированы на атомарный запрос: сделал - свободен

Работают как с текстом, так и с файлами

Поддержка кросс доменных запросов

ЧТО ПЛОХО

Минус одно TCP соединение

Не годится для real time доставки событий с сервера

> polling

> long polling

LONG POLLING

Request

Response

SERVER-SENT EVENTS(2006)

SSE

EVENT SOURCEОбъект, который получает URL на входе, а на выходе бросает передаваемые сервером события

ОСОБЕННОСТИHTTP(s)

Автоматические восстановление соединения

Отслеживание последнего полученного события

Простой polyfill

SSE ЗАПРОС

GET /users/updates HTTP/1.1

Host: myserver.com

Accept: text/event-stream

Last-Event-ID: 43

SSE ОТВЕТ

HTTP/1.1 200 OK

Connection: keep-alive

Content-Type: text/event-stream

Transfer-Encoding: chunked

SSE СОБЫТИЯdata: Simple message

data: {“message”: “JSON payload”}

event: user.updatedata: {“changed”: “firstName”}

id: 42event: broadcastdata: shutdown

1

2

3

4

ПРИМЕР ИСПОЛЬЗОВАНИЯ

Поток координат движущегоcя объекта на карте

Поток измененных ID объектов, для сброса клиентских кэшей

ПОДДЕРЖКА

ЧТО НЕ ОЧЕНЬНет поддержки IE (но простой polyfill)

Только текст (но есть base64)

Нельзя дополнить запрос

Request

Response

WEB SOCKET2010

WEB SOCKETWebSocket это API, который позволяет отправлять и получать текстовые и бинарные сообщения серверу сколько угодно раз и в любом порядке

ОСОБЕННОСТИ

Начинается как HTTP(S), но потом переходим на свой бинарный формат сообщений

ws:// и wss:// вместо http:// и https://

как текстовые, так и бинарные данные

ПРИМЕРЫ

Онлайн чат

Доставка серверных событий с обратной связью

Прогрессивная загрузка медиа

КАК Я ВНЕДРЯЛ WEB SOCKETВ СВОЙ СЕРВЕР

Более сложный протокол, чем HTTP

Управление состоянием соединения на клиенте

Различные спецификации (Hybi 13)

SSE был бы лучше

ПОДДЕРЖКА

ЧТО НЕ ТАК С WEBSOCKETСложный протокол (если придется внедрять)

Нет сжатия (что-то эксперементальное в Chrome)

ЧТО НЕ ТАК СО ВСЕМИ:XHR, SSE, WEBSOCKET

Нет мультиплексирования. Большой запрос тормозит все остальные

Всего 6 доступных TCP соединений. Каждый API сжирает по одному

WEBRTC2010

WebRTC это API для двунаправленной передачи текста и бинарного медиа напрямую между клиентами

ОСОБЕННОСТИ

UDP вместо TCP

Текст и банарные данные

Встроенная поддержка медиа данных

peer-to-peer

Обязательное шифрование не-медиа данных

ЭТО НЕ ТОЛЬКОSKYPE KILLER

ЗАЧЕМ ЭТО НУЖНО

Онлайновые игрушки

Обмен данными, которые важны клиенту, но не интересны серверу

Ок, сделать лучший скайп

ПОЧЕМУ WEBRTC

ТАКОЙ СЛОЖНЫЙ?

2 ПРИЧИНЫ

Клиентам как-то нужно найти друг друга

Нужно провести UDP траффик через NAT

SIGNALING CHANNELЧтобы начать соединение, нужно обменяться Offer и Answer через заранее известный канал

В КОМПЛЕКТЕ КАНАЛА НЕТ!Как signaling channel можно

использовать:

Сервер + WebSocket

Сервер + XHR,

Курьера

Отправить SMS товарищу

NAT TRAVERSALКуда слать UDP?

ВЫХОД: STUN, TURN

ВСЕ ОБХОДНЫЕ МАНЕВРЫЭТО ICE

ICE - interactive connectivity establishment

Используя STUN и TURN сервера, он перебирает пары IP:Port (ICE candidate), по которым можно подключиться снаружи

И ВСЁ ВМЕСТЕ1) Нам нужен signaling channel

2) Нам нужен список STUN/TURN серверов

3) RTCPeerConnection поможет создать Offer и найти ICE кандидатов

4) Всё это нужно передать через signaling channel другой стороне

5) Через signaling channel мы получим эти данные от второго клиента

ПОДДЕРЖКА

ЧТО ПЛОХО

Нет поддержки IE, Safari

Сложный polyfill

Сложно использовать

Сырая реализация

ИТАК

XMLHttpRequest Server-sent events

WebSocket WebRTC

fetch()

ЕЩЕ РАЗ О КНИГЕЗакрывает основные вопросы по сетям

Полная картина браузерных сетевых API

СПАСИБО!

/pasha.klimenkov

/in/pavelklimenkov

DotsAndBrackets.com