Выступление на конференции DUMP-2017

1. Real-time приложения
Модные фреймворки
Что дальше?
Владимир Дементьев, Злые Марсиане

3. Злые Марсиане

4. Злые Марсиане

5. Teachbase
* 2010 – 2016

6. Real-Time
The real-time web is a web … that enable users
to receive information as soon as it is published
by its authors, rather than … check a source
periodically for updates.
* https://en.wikipedia.org/wiki/Real-time_web

7. А можно пример?

8. Мгновенные сообщения

9. Уведомления

10. Визуализация данных

11. Совместный доступ

12. Многопользовательские
игры

13. История

14. До нашей эры

15. Средние века
• FlashSocket
• Short Polling
• Бесконечный iframe
• Long Polling

16. Comet

17. Эпоха Просочения

18. Эпоха Просочения
• Поддержка WebSockets в Chrome (2009)
• Опубликован стандарт WebSockets (2011)
• WebSockets в IE (2012)
• WebSockets в Safari и Android (2013)

19. 2005 2007 2011 2012 2014 2017
Real-time эволюция
до н.э. Средние века Эпоха Просочения

20. Выбор есть?

21. Архитектура
• Publish/Subscribe
• DataSync

22. Архитектура
• Publish/Subscribe
• DataSync

23. DataSync
• Оптимистичный UI
• Offline first
• Real-time first

24. DataSync
Client
Client
DB
DB
App
DB
sync

25. DataSync: проблемы
• Разрешение конфликтов (CRDT)
• Синхронизация времени
* см. @andrey_sitnik goo.gl/NOqXhi

26. DataSync: решения
PouchDB
Firebase
Horizon
GunJS
* см. @nikitonsky goo.gl/ubvYpc

27. Проблемы решений
• Как встроить в существующий
проект?
• Как мигрировать с/на?
• Оно вообще работает?

28. Pub/Sub
• Простые "живые" обновления
(live updates)
• Real-time last/first

29. Pub/Sub + RPC
Client
Client
Client
Channel
Channel
Channel
Server

30. Типовые проблемы

31. Транспорт

32. Транспорт
• Поддержка фоллбеков*
• Сжатие/сериализация данных
• Heartbeat
• Фаейрволы/антивирусы и ws://
* поддержка WS в браузерах в 2017 – 94%* caniuse.com

33. Проблема отключения
Client ServerNetwork
ws pong
ws ping

34. Проблема отключения
Client ServerNetwork
ws pong
ws ping
ws ping
closed

35. Проблема отключения
Client ServerNetwork
ws pong
ws ping
ws ping
closed
Schrödinger's Socket

37. socket.io
• Поддержка транспортов
• Pub/Sub (rooms)
• Встроенный heartbeat
• Никакого протокола → DYI

38. Протокол
• "Язык" общения (схема)
• Взаимозаменяемость
(interoperability)
• Абстракция над транспортом

39. Протокол
• Bayeux
• STOMP
• MQTT
• WAMP

40. Bayeux
CometD (Java)
Faye (Ruby, NodeJS)

41. Google Trends

42. STOMP / MQTT
• Взаимодействие машина-машина
• Гарантия доставки
• Интеграция с MQ
• Постоянные клиенты

43. STOMP / MQTT
• Взаимодействие машина-машина
• Гарантия доставки
• Интеграция с MQ
• Постоянные клиенты

44. Согласованность
• Потеря сообщений при разрыве
соединения
• Опоздавшая подписка

45. Согласованность

46. Как решить?
• История сообщений потока
• Различные варианты хранения
(список, last-win, свой вариант)
• Подписка с last_message_id

47. Когда уже поздно

48. Производительность
• Требования к ресурсам
• Время ретрансляции сообщения
• Масштабируемость

49. Websocket Shootout
* https://hashrocket.com/blog/posts/websocket-shootout

50. BroadcastRTT
0s
1s
2s
3s
4s
5s
6s
7s
8s
9s
10s
Number of connections
1000 2000 3000 4000 5000 6000 7000 8000 9000 10000
Go Erlang ActionCable
Running on AWS EC2 c3.4xlarge (16 vCPU, 30 GiB RAM)
Websocket Shootout

51. Чего мы хотим
• Решение транспортных проблем
• Адекватная производительность
• Согласованность данных
• Интеграция с существующей
бизнес-логикой

52. Решения?

53. OSS
Centrifugo
WAMP

54. Centrifugo
* https://github.com/centrifugal/centrifugo

55. • История сообщений
• Авторизация по токену
• Трекинг присутствия
Centrifugo

56. Присутствие

57. Аутентификация
• Cookies
• Токены + HTTP
• JWT

58. • История сообщений
• Авторизация по токену
• Трекинг присутствия
• PUSH-only
Centrifugo

59. WAMP
• Pub/Sub + RPC (RMI)
• Клиент – Брокер – Клиент
• Подробная спецификация
(базовый и продвинутый профиль)

60. WAMP
Client
Client
Broker /
Dealer
Client
(App)
RMI
broadcast
RMI

61. WAMP
• Логика на любом языке
• Готовые реализации брокеров
• История сообщений*
• Бинарная сериализация (MsgPack)
* только в продвинутом профиле

62. WAMP
• crossbar.io
• Autobahn (Python, JS, C++)
• Erwa, akka-wamp, Turnpike

63. WAMP
• Продвинутый профиль в α-стадии
• Масштабируемость?

64. Будущее?

65. • Попытка исправить Meteor
• GraphQL как единый протокол
(query, mutation, subscription)
• GraphQL подписки не
стандартизированы
* http://www.apollodata.com

66. AnyCable
Logux
Марсианский подход

67. AnyCable

68. AnyCable
• Протокол ActionCable (Rails) с
расширениями
• gRPC для взаимодействия с
приложением
• "Умный" WebSocket прокси
(Erlang, Golang)
* https://anycable.io

69. Logux
• Синхронизация логов
• Logux протокол
• Интеграция с Redux/Vuex/etc
• Замена AJAX и REST
* https://github.com/logux/logux-protocol

70. cult of martians.com

71. Владимир Дементьев
evilmartians.com
github.com/palkan
@palkan_tula
Спасибо?
Вопросы?