Real-time приложения
Модные фреймворки
Что дальше?
Владимир Дементьев, Злые Марсиане
Злые Марсиане
Злые Марсиане
Teachbase
* 2010 – 2016
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
А можно пример?
Мгновенные сообщения
Уведомления
Визуализация данных
Совместный доступ
Многопользовательские
игры
История
До нашей эры
Средние века
• FlashSocket
• Short Polling
• Бесконечный iframe
• Long Polling
Comet
Эпоха Просочения
Эпоха Просочения
• Поддержка WebSockets в Chrome (2009)
• Опубликован стандарт WebSockets (2011)
• WebSockets в IE (2012)
• WebSockets в Safari и Android (2013)
2005 2007 2011 2012 2014 2017
Real-time эволюция
до н.э. Средние века Эпоха Просочения
Выбор есть?
Архитектура
• Publish/Subscribe
• DataSync
Архитектура
• Publish/Subscribe
• DataSync
DataSync
• Оптимистичный UI
• Offline first
• Real-time first
DataSync
Client
Client
DB
DB
App
DB
sync
DataSync: проблемы
• Разрешение конфликтов (CRDT)
• Синхронизация времени
* см. @andrey_sitnik goo.gl/NOqXhi
DataSync: решения
PouchDB
Firebase
Horizon
GunJS
* см. @nikitonsky goo.gl/ubvYpc
Проблемы решений
• Как встроить в существующий
проект?
• Как мигрировать с/на?
• Оно вообще работает?
Pub/Sub
• Простые "живые" обновления
(live updates)
• Real-time last/first
Pub/Sub + RPC
Client
Client
Client
Channel
Channel
Channel
Server
Типовые проблемы
Транспорт
Транспорт
• Поддержка фоллбеков*
• Сжатие/сериализация данных
• Heartbeat
• Фаейрволы/антивирусы и ws://
* поддержка WS в браузерах в 2017 – 94%* caniuse.com
Проблема отключения
Client ServerNetwork
ws pong
ws ping
Проблема отключения
Client ServerNetwork
ws pong
ws ping
ws ping
closed
Проблема отключения
Client ServerNetwork
ws pong
ws ping
ws ping
closed
Schrödinger's Socket
socket.io
• Поддержка транспортов
• Pub/Sub (rooms)
• Встроенный heartbeat
• Никакого протокола → DYI
Протокол
• "Язык" общения (схема)
• Взаимозаменяемость
(interoperability)
• Абстракция над транспортом
Протокол
• Bayeux
• STOMP
• MQTT
• WAMP
Bayeux
CometD (Java)
Faye (Ruby, NodeJS)
Google Trends
STOMP / MQTT
• Взаимодействие машина-машина
• Гарантия доставки
• Интеграция с MQ
• Постоянные клиенты
STOMP / MQTT
• Взаимодействие машина-машина
• Гарантия доставки
• Интеграция с MQ
• Постоянные клиенты
Согласованность
• Потеря сообщений при разрыве
соединения
• Опоздавшая подписка
Согласованность
Как решить?
• История сообщений потока
• Различные варианты хранения
(список, last-win, свой вариант)
• Подписка с last_message_id
Когда уже поздно
Производительность
• Требования к ресурсам
• Время ретрансляции сообщения
• Масштабируемость
Websocket Shootout
* https://hashrocket.com/blog/posts/websocket-shootout
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
Чего мы хотим
• Решение транспортных проблем
• Адекватная производительность
• Согласованность данных
• Интеграция с существующей
бизнес-логикой
Решения?
OSS
Centrifugo
WAMP
Centrifugo
* https://github.com/centrifugal/centrifugo
• История сообщений
• Авторизация по токену
• Трекинг присутствия
Centrifugo
Присутствие
Аутентификация
• Cookies
• Токены + HTTP
• JWT
• История сообщений
• Авторизация по токену
• Трекинг присутствия
• PUSH-only
Centrifugo
WAMP
• Pub/Sub + RPC (RMI)
• Клиент – Брокер – Клиент
• Подробная спецификация
(базовый и продвинутый профиль)
WAMP
Client
Client
Broker /
Dealer
Client
(App)
RMI
broadcast
RMI
WAMP
• Логика на любом языке
• Готовые реализации брокеров
• История сообщений*
• Бинарная сериализация (MsgPack)
* только в продвинутом профиле
WAMP
• crossbar.io
• Autobahn (Python, JS, C++)
• Erwa, akka-wamp, Turnpike
WAMP
• Продвинутый профиль в α-стадии
• Масштабируемость?
Будущее?
• Попытка исправить Meteor
• GraphQL как единый протокол
(query, mutation, subscription)
• GraphQL подписки не
стандартизированы
* http://www.apollodata.com
AnyCable
Logux
Марсианский подход
AnyCable
AnyCable
• Протокол ActionCable (Rails) с
расширениями
• gRPC для взаимодействия с
приложением
• "Умный" WebSocket прокси
(Erlang, Golang)
* https://anycable.io
Logux
• Синхронизация логов
• Logux протокол
• Интеграция с Redux/Vuex/etc
• Замена AJAX и REST
* https://github.com/logux/logux-protocol
cult of martians.com
Владимир Дементьев
evilmartians.com
github.com/palkan
@palkan_tula
Спасибо?
Вопросы?

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