Вхід і реєстрація
×
Розробка · 28 серпня 2018, 9:30 2326
Eugene Nuribekov, SSE

Как отобразить данные реального времени на веб-интерфейсе максимально простым способом?

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Дано: сервис, который собирает некие аналоговые данные и дискретные события в реальном времени.

Требуется: максимально простой способ отрисовать график и «лампочки» на веб-интерфейсе для демо, но имея в виду, что в дальнейшем понадобится миграция на профессиональное решение.

Сам сервис пишется на C (привязка к библиотекам), но возможна реализация RPC или REST API. Для платформы доступны также Python и Go.

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дмитро 01.09.2018 10:23

В azure есть готовые решения дл hot path stream аналитики.
Будет выглядеть так —
Ваш c клиент — event hubs(по rest api) — stream analytics(для агрегаций) — power bi.
Либо
C клиент — power bi(по rest api) если у вас там поток событий небольшой
docs.microsoft.com/...​ream-analytics-manage-job
docs.microsoft.com/...​pes-of-real-time-datasets

Можно попробовать с бесплатной подпиской.

Відповісти
Підтримати
Sеrgejs Bоrуsson Senior Tractorist 29.08.2018 01:39

Еще тут не упоминали SignalR — но под капотом там те же WebSockets. Учитывая бесплатность и кросплатформерность .net core тоже вполне может подойти.

Відповісти
Підтримати
anonymous 29.08.2018 01:34

Grafana + писать в какое-то хранилище вроде InfluxDB/ElasticSearch и не надо никакого UI городить.

Відповісти
Підтримати
Oleg Korol POWER Ops, again 31.08.2018 22:40

и где тут система реального времени

Відповісти
Підтримати
anonymous
Nikita Galkin Software Engineer, System Architect, Node.js Tech Speaker 28.08.2018 15:16
  1. Формулировка. Мне кажется вам нужна система не реального времени, а близкая к реальной. С системами реального времени работают программы и счет там идет на миллисекунды, пример: биржевые боты, автопилоты автомобилей, и так далее. У вас же конечный пользователь человек, веб как никак. Задержку в 0.5-2 секунды вас вполне устроит. Верно?
  2. Подход — сквозная событийная модель реализованная с помощью реактивного программирование. Наиболее популярные реализации на разных языках — ReactiveX. В случае другого подхода вы не сможете иметь задержку сопоставимую с задержкой сети/реакции человека. Поддерживать вашу систему с таким подходом будет значительно проще, чем с объектной моделью.
  3. FrontEnd может быть реализован на любом из тройки современных фреймворков. Angular 2+ имеет под капотом RxJs, React нужно стоит брать вместе с Mobx вместо Redux или припиливать RxJs, аналогично Vue с Rx. Тут лучше смотреть по разработчикам. Для MVP можно брать даже PureJS.
  4. Протокол коммуникации server<->client очень важный вопрос. Учитывая плотный поток данных вам он нужен один протокол на обновления и на получения начального состояния. То есть забрать начальные данные по REST, и сделать подписку по WS нельзя. У вас будут или дублироваться события или терятся.
    Если у вас поток данных только от сервера, то берите SSE. Он отлично работает и решает проблему подписок, синхронизации состояния ложиться на протокол. Только убедитесь, что сможете прикрутить http2 без него легко упереться в ограничение количества соединения между браузером и сервером.
    Если нужен двунаправленный поток, то вам WebSockets.
    Подробней habr.com/post/120429
  5. BackedEnd любой технологический стэк для реализации веб сервера с поддержкой WS/SSE и интеграции с C кодом по сокетам. Определитесь, можете ли вы терять события. Это подскажет, что будет у вас single source of truth о прошедших событиях — какая-то база данных или in memory веб-сервера. С помощью RxGO/RxPY можно будет легко агрегировать события для отдачи на FE.
    Вы в списке почему-то не указали мой любимый Node.js. Я бы рекомендовал рассмотреть и его. Там удобные Stream для реактивного программирования.
  6. Масштабирование, если оно конечно потребуется, необходимо будет делать с использование Event Bus паттерна, то есть внедрять RabbitMQ, Nats и производить рапределиние потока событий уже через них
Відповісти
Підтримати
Eugene Nuribekov SSE 29.08.2018 10:44
Система реального времени (СРВ) — это система, которая должна реагировать на события во внешней по отношению к системе среде или воздействовать на среду в рамках требуемых временных ограничений.
...
Следует заметить, что определение жёсткого реального времени ничего не говорит об абсолютном значении времени отклика: это могут быть как миллисекунды, так и недели
Дальнейшее не комментирую.
Відповісти
Підтримати
Nikita Galkin
Андрей Литвинов C Señor 28.08.2018 14:32

Я уверен, такие решения и в проде можно найти. Жесть, конечно. Так и стриминг логов можно реализовать через файлстрим.

Відповісти
Підтримати
anonymous
Alex Koshterek погромизд 28.08.2018 14:49

tail -f huge.log | вебсокет_куда_надо )

Відповісти
Підтримати
Андрей Литвинов
Андрей Литвинов C Señor 29.08.2018 18:33

Да, как-то ELEKS рассказывали как они poll`или кассандру для подобной задачи. Все шустро работало. Но я бы пробовал сначала реактивный подход.

Відповісти
Підтримати
anonymous
Gennady Dogaev full-stack web developer (freelance) 28.08.2018 13:47

На фронте plotly.js, фреймворк на ваш вкус, забирать данные или по REST API (делать запрос каждые 15 сек, например) или смотреть в сторону веб-сокетов. Но учитывая что это для демо — проще будет наверное REST API. Только зависит от того как часто нужно обновлять график. Если каждую секунду — веб-сокеты.

Відповісти
Підтримати
Oleksandr Khoroshylov Software developer at Self-employed 28.08.2018 14:05

Есть пет проект, бесплатный https веб сокет сервер, если надо погонять — есть возможность конектиться и работать.

Відповісти
Підтримати
Gennady Dogaev
Lyova Zi 29.08.2018 18:28
бесплатный https веб сокет сервер

это многого стоит ))

Відповісти
Підтримати
Oleksandr Khoroshylov
Oleksandr Khoroshylov Software developer at Self-employed 29.08.2018 18:34

шутки шутить изволите? :D

Відповісти
Підтримати
Lyova Zi
Gennady Dogaev full-stack web developer (freelance) 29.08.2018 11:25

Для графиков взять вот эту библиотеку (там примеры есть на чистом жс). Потом делаете серверную часть простую, которая будет например по адресу /api/chart отдавать массив с данными в json. Каждые несколько секунд делаете запрос и перерисовываете график. Как по мне, то опрашивать сервер даже каждую секунду не проблема, если это демо для одного-двух-трех человек, а не 1000 клиентов сразу одновременно. Для этого можно использовать jquery и setTimeout — пишете рекурсивную функцию которая делает запрос, при получении ответа перерисовывает график с помощью Plotly.purge/Plotly.plot и вызывает сама себя через 1000мс при помощи setTimeout. Это самая простая реализация без фреймворков.

А вот в дальнейшем если предполагается много клиентов, смотрящих на графики, то нужно использовать сокеты. Но по сокетам не подскажу — сам ними не пользовался.

Відповісти
Підтримати
Eugene Nuribekov
Vitaly Panchuk Tech Lead в StrongSD 28.08.2018 13:14

Если нужно одностороннее соединение (отображение графиков, логов) идеально использовать SSE (Server Sent Events) или даже обычный стриминг. Можно также посмотреть в сторону long polling, или даже обычного polling.

Websockets подойдут, если нужно еще получать ответы от клиента в реальном времени.

Вкратце можно почитать тут habr.com/post/120429

Відповісти
Підтримати
Андрей Литвинов C Señor 28.08.2018 13:20
Server Sent Events

Круто, не слышал про такой API. Но Edge не поддерживается.

Відповісти
Підтримати
Vitaly Panchuk
Nikita Galkin Software Engineer, System Architect, Node.js Tech Speaker 28.08.2018 15:18

Лайк за правильную статью

Відповісти
Підтримати
Vitaly Panchuk
Victor Mikhaylov junior manual tester 28.08.2018 12:33

вебсокеты. реальным временем оно не будет из-за задержки соединения

Відповісти
Підтримати
Леонид Мартынюк инженер-программист в 1World online R&D Сenter 28.08.2018 12:26

никак — интернет не система реального врмени

Відповісти
Підтримати
Eugene Nuribekov SSE 29.08.2018 10:51

А кто сказал, что здесь присутствует Интернет? В худшем случае 1G линк на соседний хост.

Відповісти
Підтримати
Леонид Мартынюк
Леонид Мартынюк инженер-программист в 1World online R&D Сenter 28.08.2018 12:31

и каким боком тут less и sass? и чем ангуляр тут лучше обычного яваскрипта который будет работать на два порядка быстрее? Вы перечислили четыре не самых простых и главное, нафиг ненужных для данного вопроса технологии и назвали это «не заморачиватся». Пробуйте хоть иногда мозги включать

Відповісти
Підтримати
anonymous
Seva Shasharin Senior Front End Developer в NeoGames 28.08.2018 11:42

Максимально просто — дергать бэк по setInterval. Но это нехорошо, лучше уже сокеты.

Відповісти
Підтримати
Vlad Stelmahovsky Software Engineer в Verity AG 28.08.2018 11:19

пожалуй поддержу, но желательно знать скорость потока данных

Відповісти
Підтримати
Ярослав Шутко
Eugene Nuribekov SSE 28.08.2018 12:08

Обычное логирование. Т.е. дискретность порядка десятков миллисекунд.

Відповісти
Підтримати
Vlad Stelmahovsky
Олександр Шпак Oarsman в Self Employed 29.08.2018 01:26

Наскільки багато даних треба показувати? Бо можна й фронт зафлудити за три секунди..

Відповісти
Підтримати
Eugene Nuribekov
Eugene Nuribekov SSE 29.08.2018 10:54

Пара аналоговых параметров и факты их выхода за предельные значения.

Відповісти
Підтримати
Олександр Шпак
Олександр Шпак Oarsman в Self Employed 29.08.2018 12:56

Тоді краще попередньо обробляти їх на стороні сервера, на UI вже можна кидати готові для споживання/рендерінгу дані.
Можна й без новомодних фреймворків та протоколів обійтися, хоч на jQuery наклепати. В якості протоколу використати AJ (Asyncronous JavaScript), коли UI періодично міняє src у тега script з певним id, браузер лізе звичайним GET за «даними», у відповідь приходить jQuery скрипт, який оновлює контент в деяких нодах. Тупіше не придумати.

Відповісти
Підтримати
Eugene Nuribekov
Eugene Nuribekov SSE 28.08.2018 12:16

Я правильно понимаю, что браузерный скрипт откроет соединение с сервисом и будет его опрашивать дергая REST?

Відповісти
Підтримати
Ярослав Шутко
Андрей Литвинов C Señor 28.08.2018 12:42

Сервер будет пушить данные на клиент — реактивная модель.

Відповісти
Підтримати
Eugene Nuribekov

Підписатись на коментарі

Не підписуватись
Скористайтесь акаунтом
×
з умовами використання сайту і політикою конфіденційності.