Download to read offline
Uploaded byPavel Klimiankou
Браузерные API обмена данными: какие и зачем
Документ описывает различные браузерные API для обмена данными, включая XMLHttpRequest, Fetch, Server-Sent Events (SSE), WebSockets и WebRTC. Он рассматривает их особенности, применение и ограничения, такие как поддержка кросс-доменных запросов, проблемы с реальным временем доставки и сложность интеграции. В заключение, автор подчеркивает важность понимания данных технологий для эффективного сетевого взаимодействия.
More Related Content
Similar to Браузерные API обмена данными: какие и зачем
Браузерные API обмена данными: какие и зачем
- 1. БРАУЗЕРНЫЕ API ОБМЕНА ДАННЫМИ какиеи зачем Павел Клименков
- 2.
- 4.
- 5.
- 6.
- 7.
- 8. ОСОБЕННОСТИ HTTP(S): GET, POST,PUT, DELETE Только текст (либо base64) Перезапись http headers Sync/async GZip, deflate компрессия
- 9.
- 10. ЧЕГО НЕ ХВАТАЕТ Поддержкифайлов Кросс-доменных запросов Удобных POST запросов
- 11. XML HTTP REQUEST LEVEL2 (2011) + бинарные данные и файлы + поддержка html форм - объект FormData + кросс доменные запросы (CORS) + события о прогрессе загрузки
- 12. CORS ЗАГОЛОВОК ЗАПРОСА GET /secret.htmlHTTP/1.1 Host: microsoft.com Origin: http://google.com
- 13. CORS ЗАГОЛОВОК ОТВЕТА HTTP/1.1 200OK Access-Control-Allow-Origin: http://google.com
- 14.
- 15.
- 16. FETCH() Пришел из serviceworker Promise ориентированный Почти как XMLHttpRequest Сырой
- 17.
- 18.
- 19. ПОДРЕЗЮМИРУЕМ У нас естьXMLHttpRequest и fetch() Они работают по HTTP(S) Ориентированы на атомарный запрос: сделал - свободен Работают как с текстом, так и с файлами Поддержка кросс доменных запросов
- 20. ЧТО ПЛОХО Минус одноTCP соединение Не годится для real time доставки событий с сервера > polling > long polling
- 21.
- 22.
- 23.
- 24. EVENT SOURCE Объект, которыйполучает URL на входе, а на выходе бросает передаваемые сервером события
- 25. ОСОБЕННОСТИ HTTP(s) Автоматические восстановление соединения Отслеживание последнегополученного события Простой polyfill
- 26. SSE ЗАПРОС GET /users/updatesHTTP/1.1 Host: myserver.com Accept: text/event-stream Last-Event-ID: 43
- 27. SSE ОТВЕТ HTTP/1.1 200OK Connection: keep-alive Content-Type: text/event-stream Transfer-Encoding: chunked
- 28. SSE СОБЫТИЯ data: Simplemessage data: {“message”: “JSON payload”} event: user.update data: {“changed”: “firstName”} id: 42 event: broadcast data: shutdown 1 2 3 4
- 29. ПРИМЕР ИСПОЛЬЗОВАНИЯ Поток координатдвижущегоcя объекта на карте Поток измененных ID объектов, для сброса клиентских кэшей
- 30.
- 31. ЧТО НЕ ОЧЕНЬ Нетподдержки IE (но простой polyfill) Только текст (но есть base64) Нельзя дополнить запрос
- 32.
- 33.
- 34. WEB SOCKET WebSocket этоAPI, который позволяет отправлять и получать текстовые и бинарные сообщения серверу сколько угодно раз и в любом порядке
- 35. ОСОБЕННОСТИ Начинается как HTTP(S),но потом переходим на свой бинарный формат сообщений ws:// и wss:// вместо http:// и https:// как текстовые, так и бинарные данные
- 36. ПРИМЕРЫ Онлайн чат Доставка серверныхсобытий с обратной связью Прогрессивная загрузка медиа
- 37. КАК Я ВНЕДРЯЛWEB SOCKET В СВОЙ СЕРВЕР Более сложный протокол, чем HTTP Управление состоянием соединения на клиенте Различные спецификации (Hybi 13) SSE был бы лучше
- 38.
- 39. ЧТО НЕ ТАКС WEBSOCKET Сложный протокол (если придется внедрять) Нет сжатия (что-то эксперементальное в Chrome)
- 40. ЧТО НЕ ТАКСО ВСЕМИ: XHR, SSE, WEBSOCKET Нет мультиплексирования. Большой запрос тормозит все остальные Всего 6 доступных TCP соединений. Каждый API сжирает по одному
- 44. WEBRTC 2010 WebRTC это APIдля двунаправленной передачи текста и бинарного медиа напрямую между клиентами
- 45. ОСОБЕННОСТИ UDP вместо TCP Тексти банарные данные Встроенная поддержка медиа данных peer-to-peer Обязательное шифрование не-медиа данных
- 46. ЭТО НЕ ТОЛЬКО SKYPEKILLER
- 47. ЗАЧЕМ ЭТО НУЖНО Онлайновыеигрушки Обмен данными, которые важны клиенту, но не интересны серверу Ок, сделать лучший скайп
- 48.
- 49. 2 ПРИЧИНЫ Клиентам как-тонужно найти друг друга Нужно провести UDP траффик через NAT
- 50. SIGNALING CHANNEL Чтобы начатьсоединение, нужно обменяться Offer и Answer через заранее известный канал
- 51. В КОМПЛЕКТЕ КАНАЛАНЕТ! Как signaling channel можно использовать: Сервер + WebSocket Сервер + XHR, Курьера Отправить SMS товарищу
- 52.
- 53.
- 54. ВСЕ ОБХОДНЫЕ МАНЕВРЫ ЭТОICE ICE - interactive connectivity establishment Используя STUN и TURN сервера, он перебирает пары IP:Port (ICE candidate), по которым можно подключиться снаружи
- 55. И ВСЁ ВМЕСТЕ 1)Нам нужен signaling channel 2) Нам нужен список STUN/TURN серверов 3) RTCPeerConnection поможет создать Offer и найти ICE кандидатов 4) Всё это нужно передать через signaling channel другой стороне 5) Через signaling channel мы получим эти данные от второго клиента
- 57.
- 58. ЧТО ПЛОХО Нет поддержкиIE, Safari Сложный polyfill Сложно использовать Сырая реализация
- 59. ИТАК XMLHttpRequest Server-sent events WebSocketWebRTC fetch()
- 60. ЕЩЕ РАЗ ОКНИГЕ Закрывает основные вопросы по сетям Полная картина браузерных сетевых API
- 61.