Чем можно обмениваться данными: XMLHttpRequest, fetch(), Server-Sent Events, WebSocket, WebRTC. В чем отличия. Какие недостатки. Примеры задач, под которые они заточены.

1. БРАУЗЕРНЫЕ API
ОБМЕНА ДАННЫМИ
какие и зачем
Павел Клименков

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

4. ПЛАН НА ВЕЧЕР
Request
Response
Request
Response
Request
Response

5. Request
Response

6. MSXML2
XMLHTTP
XMLHttpReque
st
Классический XHR

7. ПРИМЕР

8. ОСОБЕННОСТИ
HTTP(S): GET, POST, PUT,
DELETE
Только текст (либо base64)
Перезапись http headers
Sync/async
GZip, deflate компрессия

9. ПОДДЕРЖКА
ВЕЗДЕ!

10. ЧЕГО НЕ ХВАТАЕТ
Поддержки файлов
Кросс-доменных запросов
Удобных POST запросов

11. XML HTTP REQUEST
LEVEL 2 (2011)
+ бинарные данные и файлы
+ поддержка html форм - объект FormData
+ кросс доменные запросы (CORS)
+ события о прогрессе загрузки

12. CORS
ЗАГОЛОВОК ЗАПРОСА
GET /secret.html HTTP/1.1
Host: microsoft.com
Origin: http://google.com

13. CORS
ЗАГОЛОВОК ОТВЕТА
HTTP/1.1 200 OK
Access-Control-Allow-Origin:
http://google.com

14. FORM DATA

15. ПОДДЕРЖКА

16. FETCH()
Пришел из service worker
Promise ориентированный
Почти как XMLHttpRequest
Сырой

17. FETCH()

18. ПОДДЕРЖКА

19. ПОДРЕЗЮМИРУЕМ
У нас есть XMLHttpRequest и fetch()
Они работают по HTTP(S)
Ориентированы на атомарный запрос: сделал -
свободен
Работают как с текстом, так и с файлами
Поддержка кросс доменных запросов

20. ЧТО ПЛОХО
Минус одно TCP соединение
Не годится для real time доставки событий с
сервера
> polling
> long polling

21. LONG POLLING

22. Request
Response

23. SERVER-SENT EVENTS
(2006)

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

25. ОСОБЕННОСТИ
HTTP(s)
Автоматические восстановление
соединения
Отслеживание последнего полученного
события
Простой polyfill

26. SSE ЗАПРОС
GET /users/updates HTTP/1.1
Host: myserver.com
Accept: text/event-stream
Last-Event-ID: 43

27. SSE ОТВЕТ
HTTP/1.1 200 OK
Connection: keep-alive
Content-Type: text/event-stream
Transfer-Encoding: chunked

28. SSE СОБЫТИЯ
data: Simple message
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. Request
Response

33. WEB SOCKET
2010

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. ЭТО НЕ ТОЛЬКО
SKYPE KILLER

47. ЗАЧЕМ ЭТО НУЖНО
Онлайновые игрушки
Обмен данными, которые важны клиенту, но
не интересны серверу
Ок, сделать лучший скайп

48. ПОЧЕМУ WEBRTC
ТАКОЙ СЛОЖНЫЙ?

49. 2 ПРИЧИНЫ
Клиентам как-то нужно найти друг друга
Нужно провести UDP траффик через NAT

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

51. В КОМПЛЕКТЕ КАНАЛА НЕТ!
Как signaling channel можно использовать:
Сервер + WebSocket
Сервер + XHR,
Курьера
Отправить SMS товарищу

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

53. ВЫХОД: STUN, TURN

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
WebSocket WebRTC
fetch()

60. ЕЩЕ РАЗ О КНИГЕ
Закрывает основные
вопросы по сетям
Полная картина
браузерных сетевых API

61. СПАСИБО!
/pasha.klimenkov
/in/pavelklimenkov
DotsAndBrackets.com