[DUMP Екатеринбург 2017] Real-time приложения. Модные фреймворки. Что дальше?

by Vladimir Dementyev

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Teachbase * 2010 – 2016

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Уведомления

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

История

Slide 14

Slide 14 text

До нашей эры

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Comet

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Выбор есть?

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

DataSync Client Client DB DB App DB sync

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Транспорт

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Проблема отключения Client Server Network ws pong ws ping

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Bayeux CometD (Java) Faye (Ruby, NodeJS)

Slide 41

Slide 41 text

Google Trends

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Broadcast RTT 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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Решения?

Slide 53

Slide 53 text

OSS Centrifugo WAMP

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Присутствие

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Будущее?

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

AnyCable

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

cult of martians.com

Slide 71

Slide 71 text

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