Download - Браузерные 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