Як створити графік реального часу за допомогою JavaScript та Pusher

Зараз світові потрібно все убер-швидко. Існує безліч потоків даних, що генеруються різними системами щодня. Вони служать для прийняття рішень у багатьох галузях. Сьогодні моніторинг та аналіз у режимі реального часу стали дуже важливими. Потоки даних включають моніторинг трафіку веб-сайтів у реальному часі, продуктивність сервера, оновлення погоди та датчики IOT. Важливо проаналізувати та інтерпретувати цю сукупність даних, для яких інтерактивні діаграми та графіки є чудовим рішенням.

У цій статті ми будемо створювати сервер Node.js, щоб виставляти API для надання історичних даних для метрики (в даному випадку погоди в Лондоні). Він також надає API для передачі нових точок даних. Ми також створимо інтерфейсний додаток із лінійною діаграмою для відображення змін температури в погоді в Лондоні в режимі реального часу. Додаток, який ми будуємо, виглядатиме приблизно так:

Реєстрація для штовхача

Першим кроком для початку цього підручника є Реєстрація в Pusher або вхід із наявними обліковими даними, якщо у вас вже є обліковий запис. Після входу вам потрібно буде створити нову програму та вибрати Vanilla JavaScript для інтерфейсу разом із Node.js для інтерфейсу. Потім ви перейдете на цільову сторінку, що містить код "Початок роботи" як для інтерфейсу, так і для інтерфейсу, який ми будемо використовувати пізніше в підручнику.

API сервера Node.js для системи моніторингу та аналітики

Основними API для будь-яких систем аналітики для будь-якого показника або сутності є:

  1. API поглинання - API для передачі нових точок даних для будь-якої конкретної сутності. На нашому сервері для цього допису в блозі ми створимо API для введення нових даних про температуру в певний час для Лондона. Цей API може викликати будь-яка глобальна погодна система або будь-який датчик IOT.
  2. API історичних даних - Цей API поверне всі дані в межах діапазону від цієї дати в часі. Для нашого сервера ми створимо простий API. Він поверне деякі статичні історичні дані з обмеженими даними для значень температури Лондона на будь-який день.

Скелет сервера Node.js Express

Ми створимо базовий Express Server разом із створенням екземпляра екземпляра сервера бібліотеки Pusher. Ми створимо нову папку для нашого проекту та створимо новий файл server.js . Додайте наступний код до цього файлу:

API для отримання історичних даних про температуру

Тепер ми додамо деякі статичні дані щодо температури Лондона в певний час протягом дня і збережемо їх у будь-якій змінній JavaScript. Ми також покажемо маршрут для повернення цих даних кожного разу, коли хтось викликає їх за допомогою виклику GET HTTP.

API для передачі даних про температуру

Тепер ми додамо код для викриття API для поглинання температури в певний час. Ми покажемо API GET HTTP із температурою та часом як параметрами запиту. Ми перевіримо, що це не порожні параметри. Ми зберігаємо їх, натискаючи на масив dataPoints нашої статичної змінної JavaScript londonTempData . Будь ласка, додайте наступний код у файл server.js

У наведеному вище коді, окрім збереження у джерелі даних, ми також ініціюємо подію "нова температура" на новому каналі "london-temp-chart" . Для кожного унікального джерела даних або діаграми ви можете створити новий канал.

Подія, ініційована нашим сервером, буде оброблена інтерфейсом для оновлення діаграми / графіку в режимі реального часу. Подія може містити всі важливі дані, необхідні діаграмі для коректного відображення точки даних. У нашому випадку ми будемо надсилати температуру в новий час на наш інтерфейс.

Створення Front-End App за допомогою Vanilla JavaScript і Chart.js

Тепер ми створимо інтерфейсний додаток. На ньому буде відображатися лінійна діаграма, що відображає зміни температури в Лондоні в різний час протягом дня. Ключовим підходом для відображення графіків у реальному часі є:

  1. Нам потрібно зробити початковий виклик Ajax, щоб отримати історичні дані та відтворити графік із наявними даними.
  2. Ми підпишемося на будь-які події щодо нових точок даних, які зберігаються на певному каналі.

Основний шаблон HTML

Ми створимо нову папку з назвою public у нашому корені проекту, а потім створимо новий файл index.html у цій папці. Цей файл буде містити основний HTML-код для відтворення простого заголовка та підзаголовка з назвою програми разом із кількома піктограмами. Ми також імпортуємо бібліотеку Pusher JavaScript із її URL-адреси CDN.

Додавання бібліотеки діаграм

У програмах JavaScript та HTML ми повинні використовувати SVG або Canvas для створення графічних компонентів, що представляють математичні графіки. Існує безліч бібліотек з відкритим кодом, які можуть допомогти вам відтворити різні типи діаграм. Сюди входять стовпчасті діаграми, секторні діаграми, лінійні та розсіяні діаграми.

Для нашого проекту ми оберемо Chart.js, оскільки він має досить простий API і робить надійні діаграми за допомогою тегу Canvas HTML. Ви можете вибрати будь-яку бібліотеку діаграм, але майте на увазі, що бібліотека повинна мати засоби для оновлення діаграми без повного її повторного відтворення. Chart.js надає метод на будь-якому екземплярі діаграми для його оновлення.

Додайте наступний код у файл index.html у відповідних місцях

Додавання файлу JavaScript та інстанціація бібліотеки на стороні клієнта

Тепер ми створимо новий файл app.js у нашій загальній папці, а також додамо наступний код для створення екземпляра бібліотеки на стороні клієнта Pusher.

У наведеному вище коді ми також додали кілька методів утиліти, щоб здійснити виклик Ajax, а також показати або приховати елементи з DOM API.

Додавання коду для отримання історичних даних

Тепер ми додамо код для отримання історичних даних про температуру для відображення графіку з початковими значеннями. Ми також створимо інстанцію нового об'єкта Chart з певною конфігурацією, щоб відтворити Line Chart. Ви можете прочитати більше про те, як створити ці конфігурації, у документації Chart.js.

Будь ласка, додайте наступний код у файл app.js:

У наведеному вище коді ми додали функцію renderWeatherChart. Це буде використано для візуалізації діаграми з використанням останніх даних, які вбудовані у змінну chartConfig під ключовими наборами даних . Якщо ми хочемо намалювати декілька лінійних діаграм на одному полотні, ми можемо додати більше елементів до цього масиву.

Дані ключа в кожному з елементів масиву буде відображати різні точки на графіку. Ми зробимо запит ajax до api / getTemperature, щоб отримати всі точки даних і помістити їх у цей ключ. Тоді ми будемо викликати метод візуалізації, щоб відобразити графік. Тепер ми можемо запустити команду, node server.jsа потім перейти до браузера із вказаною нижче URL-адресою, щоб побачити початкову діаграму, відтворену за допомогою даних.

//localhost:9000/

Для правильного стилювання нашого додатка, будь ласка, додайте наступний CSS у новий файл style.css всередині загальної папки. Додайте наступний код до цього файлу:

Код для оновлення графіка на новій події отримано

Тепер ми хочемо підписатися на унікальний канал, по якому наш сервер буде надсилати події оновлення для цього графіка. Для нашого проекту канал називається london-temp-chart, а подія - new-temperature . Будь ласка, додайте наступний код для обробки події, а потім оновіть діаграму в режимі реального часу:

Щоб побачити цей код у дії, вам слід оновити браузер, і ви побачите початкову діаграму. Тепер ми повинні проковтнути нову точку даних. Вам потрібно буде зателефонувати за наведеним нижче API або за допомогою якогось інструменту для виклику API, або використовуючи наступну URL-адресу з різними значеннями у браузері.

//localhost:9000/addTemperature?temperature=17&time=1500

Для того, щоб протестувати код оновлення діаграми, ви можете використовувати такий тимчасовий код у файлі app.js. Це зробить фіктивні запити Ajax на вказану вище URL-адресу через певний інтервал часу.

Ось репозитарій GitHub для посилання на повний код.

Висновок

Нарешті, наш додаток аналітики в режимі реального часу готовий. Ми побачимо графік погоди температури для міста Лондон в режимі реального часу.

Код із цього допису в блозі ми можемо використовувати для будь-якої бібліотеки діаграм. Він також може візуалізувати будь-який тип діаграми, наприклад, стовпчасту діаграму, розсіяну діаграму або секторну діаграму для оновлення в режимі реального часу.

Цей код також можна використовувати в декількох корпоративних програмах. Наприклад, моніторинг інформаційних панелей, аналітичних звітів, програм регулювання датчиків та фінансових програм. Бібліотека Pusher допомагає нам надсилати події в режимі реального часу до всіх підключених програм на стороні клієнта. Ці програми можуть споживати дані для оновлення діаграм у режимі реального часу.

Ця стаття спочатку була опублікована в блозі Pusher.