Браузерные api обмена данными: какие и зачем
TRANSCRIPT
![Page 1: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/1.jpg)
БРАУЗЕРНЫЕ APIОБМЕНА ДАННЫМИ
какие и зачем
Павел Клименков
![Page 2: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/2.jpg)
СЕТЕВАЯ БИБЛИЯ
![Page 3: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/3.jpg)
![Page 4: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/4.jpg)
ПЛАН НА ВЕЧЕР
Request
Response
Request
Response
Request
Response
![Page 5: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/5.jpg)
Request
Response
![Page 6: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/6.jpg)
MSXML2XMLHTTP
XMLHttpRequest
Классический XHR
![Page 7: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/7.jpg)
ПРИМЕР
![Page 8: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/8.jpg)
ОСОБЕННОСТИHTTP(S): GET, POST, PUT, DELETE
Только текст (либо base64)
Перезапись http headers
Sync/async
GZip, deflate компрессия
![Page 9: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/9.jpg)
ПОДДЕРЖКА
ВЕЗДЕ!
![Page 10: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/10.jpg)
ЧЕГО НЕ ХВАТАЕТ
Поддержки файлов
Кросс-доменных запросов
Удобных POST запросов
![Page 11: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/11.jpg)
XML HTTP REQUEST LEVEL 2 (2011)
+ бинарные данные и файлы
+ поддержка html форм - объект FormData
+ кросс доменные запросы (CORS)
+ события о прогрессе загрузки
![Page 12: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/12.jpg)
CORSЗАГОЛОВОК ЗАПРОСА
GET /secret.html HTTP/1.1
Host: microsoft.com
Origin:
http://google.com
![Page 13: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/13.jpg)
CORSЗАГОЛОВОК ОТВЕТА
HTTP/1.1 200 OK
Access-Control-Allow-
Origin: http
://google.com
![Page 14: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/14.jpg)
FORM DATA
![Page 15: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/15.jpg)
ПОДДЕРЖКА
![Page 16: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/16.jpg)
FETCH()
Пришел из service worker
Promise ориентированный
Почти как XMLHttpRequest
Сырой
![Page 17: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/17.jpg)
FETCH()
![Page 18: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/18.jpg)
ПОДДЕРЖКА
![Page 19: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/19.jpg)
ПОДРЕЗЮМИРУЕМ
У нас есть XMLHttpRequest и fetch()
Они работают по HTTP(S)
Ориентированы на атомарный запрос: сделал - свободен
Работают как с текстом, так и с файлами
Поддержка кросс доменных запросов
![Page 20: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/20.jpg)
ЧТО ПЛОХО
Минус одно TCP соединение
Не годится для real time доставки событий с сервера
> polling
> long polling
![Page 21: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/21.jpg)
LONG POLLING
![Page 22: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/22.jpg)
Request
Response
![Page 23: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/23.jpg)
SERVER-SENT EVENTS(2006)
SSE
![Page 24: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/24.jpg)
EVENT SOURCEОбъект, который получает URL на входе, а на выходе бросает передаваемые сервером события
![Page 25: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/25.jpg)
ОСОБЕННОСТИHTTP(s)
Автоматические восстановление соединения
Отслеживание последнего полученного события
Простой polyfill
![Page 26: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/26.jpg)
SSE ЗАПРОС
GET /users/updates HTTP/1.1
Host: myserver.com
Accept: text/event-stream
Last-Event-ID: 43
![Page 27: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/27.jpg)
SSE ОТВЕТ
HTTP/1.1 200 OK
Connection: keep-alive
Content-Type: text/event-stream
Transfer-Encoding: chunked
![Page 28: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/28.jpg)
SSE СОБЫТИЯdata: Simple message
data: {“message”: “JSON payload”}
event: user.updatedata: {“changed”: “firstName”}
id: 42event: broadcastdata: shutdown
1
2
3
4
![Page 29: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/29.jpg)
ПРИМЕР ИСПОЛЬЗОВАНИЯ
Поток координат движущегоcя объекта на карте
Поток измененных ID объектов, для сброса клиентских кэшей
![Page 30: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/30.jpg)
ПОДДЕРЖКА
![Page 31: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/31.jpg)
ЧТО НЕ ОЧЕНЬНет поддержки IE (но простой polyfill)
Только текст (но есть base64)
Нельзя дополнить запрос
![Page 32: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/32.jpg)
Request
Response
![Page 33: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/33.jpg)
WEB SOCKET2010
![Page 34: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/34.jpg)
WEB SOCKETWebSocket это API, который позволяет отправлять и получать текстовые и бинарные сообщения серверу сколько угодно раз и в любом порядке
![Page 35: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/35.jpg)
ОСОБЕННОСТИ
Начинается как HTTP(S), но потом переходим на свой бинарный формат сообщений
ws:// и wss:// вместо http:// и https://
как текстовые, так и бинарные данные
![Page 36: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/36.jpg)
ПРИМЕРЫ
Онлайн чат
Доставка серверных событий с обратной связью
Прогрессивная загрузка медиа
![Page 37: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/37.jpg)
КАК Я ВНЕДРЯЛ WEB SOCKETВ СВОЙ СЕРВЕР
Более сложный протокол, чем HTTP
Управление состоянием соединения на клиенте
Различные спецификации (Hybi 13)
SSE был бы лучше
![Page 38: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/38.jpg)
ПОДДЕРЖКА
![Page 39: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/39.jpg)
ЧТО НЕ ТАК С WEBSOCKETСложный протокол (если придется внедрять)
Нет сжатия (что-то эксперементальное в Chrome)
![Page 40: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/40.jpg)
ЧТО НЕ ТАК СО ВСЕМИ:XHR, SSE, WEBSOCKET
Нет мультиплексирования. Большой запрос тормозит все остальные
Всего 6 доступных TCP соединений. Каждый API сжирает по одному
![Page 41: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/41.jpg)
![Page 42: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/42.jpg)
![Page 43: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/43.jpg)
![Page 44: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/44.jpg)
WEBRTC2010
WebRTC это API для двунаправленной передачи текста и бинарного медиа напрямую между клиентами
![Page 45: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/45.jpg)
ОСОБЕННОСТИ
UDP вместо TCP
Текст и банарные данные
Встроенная поддержка медиа данных
peer-to-peer
Обязательное шифрование не-медиа данных
![Page 46: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/46.jpg)
ЭТО НЕ ТОЛЬКОSKYPE KILLER
![Page 47: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/47.jpg)
ЗАЧЕМ ЭТО НУЖНО
Онлайновые игрушки
Обмен данными, которые важны клиенту, но не интересны серверу
Ок, сделать лучший скайп
![Page 48: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/48.jpg)
ПОЧЕМУ WEBRTC
ТАКОЙ СЛОЖНЫЙ?
![Page 49: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/49.jpg)
2 ПРИЧИНЫ
Клиентам как-то нужно найти друг друга
Нужно провести UDP траффик через NAT
![Page 50: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/50.jpg)
SIGNALING CHANNELЧтобы начать соединение, нужно обменяться Offer и Answer через заранее известный канал
![Page 51: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/51.jpg)
В КОМПЛЕКТЕ КАНАЛА НЕТ!Как signaling channel можно
использовать:
Сервер + WebSocket
Сервер + XHR,
Курьера
Отправить SMS товарищу
![Page 52: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/52.jpg)
NAT TRAVERSALКуда слать UDP?
![Page 53: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/53.jpg)
ВЫХОД: STUN, TURN
![Page 54: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/54.jpg)
ВСЕ ОБХОДНЫЕ МАНЕВРЫЭТО ICE
ICE - interactive connectivity establishment
Используя STUN и TURN сервера, он перебирает пары IP:Port (ICE candidate), по которым можно подключиться снаружи
![Page 55: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/55.jpg)
И ВСЁ ВМЕСТЕ1) Нам нужен signaling channel
2) Нам нужен список STUN/TURN серверов
3) RTCPeerConnection поможет создать Offer и найти ICE кандидатов
4) Всё это нужно передать через signaling channel другой стороне
5) Через signaling channel мы получим эти данные от второго клиента
![Page 56: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/56.jpg)
![Page 57: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/57.jpg)
ПОДДЕРЖКА
![Page 58: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/58.jpg)
ЧТО ПЛОХО
Нет поддержки IE, Safari
Сложный polyfill
Сложно использовать
Сырая реализация
![Page 59: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/59.jpg)
ИТАК
XMLHttpRequest Server-sent events
WebSocket WebRTC
fetch()
![Page 60: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/60.jpg)
ЕЩЕ РАЗ О КНИГЕЗакрывает основные вопросы по сетям
Полная картина браузерных сетевых API
![Page 61: Браузерные API обмена данными: какие и зачем](https://reader033.vdocuments.pub/reader033/viewer/2022061523/55c2ab18bb61eb81508b47b9/html5/thumbnails/61.jpg)
СПАСИБО!
/pasha.klimenkov
/in/pavelklimenkov
DotsAndBrackets.com