Автор оригинала: Peter Mbanugo.
Данные в режиме реального времени – это представленные данные по мере того, как она приобретается. Он часто используется в системах отслеживания или мониторинга, такими как система GPS-GPS, приложения для аукционов/тортов и приложений на акции. Диаграммы помогают с графическим представлением этих данных и помочь зрителю легко принять решение.
В этом посте я покажу вам, как сделать диаграмму в реальном времени в JavaScript. Мы будем создавать основное веб-приложение для голосования со страницей для голосования, а другая страница с диаграммой в реальном времени, показывающей результат голосования, как это происходит. Вот заглянуть на то, что мы будем строить
Я буду использовать Chart.js и Hamoni Sync построить это. Chart.js – простая библиотека JavaScript Charting. Hamoni Sync – это сервис синхронизации состояний в реальном времени, который позволяет синхронизировать состояние вашего приложения в режиме реального времени. Результатом голосов является государство, которое мы хотим показывать пользователей в режиме реального времени. Hamoni Sync делает это проще, позволяя вам определить состояние для вашего приложения, в то время как вы избегаете проектирования сложной государственной логики вокруг публикации/подписки.
Мы будем использовать шаблон проекта, который уже имеет HTML-страницы и приложение Node для обслуживания статических файлов. Следуйте инструкциям ниже, чтобы настроить его
- Клонировать репо из GitHub, бегу на
Git Clone https://github.com/pmbanugo/realtime-Chartjs-hamoni-starter.gitв командной строке. Если вы не используете GIT, вы можете скачать его здесь Отказ - Переключиться в каталог проекта
CD Realtime-Chartjs-Hamoni-Starter - Установите зависимости, работающие
NPM установитьОтказ Это будет установить Экспресс и модули узлов Hamoni Sync.
server.js Файл содержит код для сервера HTML-страницы в публичный папка. Линии 9 – 14 определяет состояние по умолчанию для приложения для голосования. Он содержит 4 кандидата со своим количеством голосов как 0.
let voteData = [
{ candidate: "Peter Mbanugo", vote: 0 },
{ candidate: "Angela Daniels", vote: 0 },
{ candidate: "Rose Philly", vote: 0 },
{ candidate: "James Crump", vote: 0 }
];
Он также определяет конечную точку покоя для голосования, определяемую из строк 18-30. Когда появится голосование, мы можем захотеть сохранить эти данные в базу данных, а затем обновить диаграмму с актуальным результатом голосования. Состояние диаграммы будет передано в режиме реального времени с использованием Sync Hamoni. В строке 40 я объявил оператор для инициализации Hamoni, но нам нужен идентификатор учетной записи и идентификатор приложения.
Создать учетную запись Hamoni и приложение
Войдите в Hamoni Приборная панель (или регистрация, если у вас еще нет учетной записи). Когда вы вошли в систему, вы можете нажать на Показать идентификатор учетной записи кнопка, чтобы увидеть идентификатор вашей учетной записи. Нам нужен идентификатор приложения Hamoni, поэтому нам нужно создать приложение с помощью приборной панели. Приложение – это контейнер, который может удерживать состояние приложения. Вы обычно хотите иметь отдельное приложение Hamoni для каждого из ваших приложений.
В заголовке «Создание приложения» введите имя приложения и нажмите кнопку Создать. В течение нескольких секунд вы должны увидеть его созданные и отображаемые в разделе списка приложений.
Скопируйте приложение и идентификатор учетной записи и замените их строковым значением в строке 40 в server.js.
Создать состояние приложения в Hamoni
Теперь нам нужно создать состояние в Hamoni Sync. Для этого нам нужно использовать примитив синхронизации. Синхронизация примитивов – это то, что вы используете для определения и манипулирования состоянием. Они в основном способ классифицировать или дифференцировать виды данных, которые нужно хранить. Есть 3 синхронизации примитивов:
- Значение Примитив: Этот вид штата продвигает простую информацию, представленную с типорами типа данных, таких как строка, логические или цифры. Лучше всего подходит для таких случаев, как непрочитанное количество сообщений, переключение и т. Д.
- Примитивный объект ** * Государство объекта представляет состояния, которые могут быть смоделированы как объект JavaScript. Пример использования может хранить счет игры.
- Список примитив: Это содержит список государственных объектов. Государственный объект – это объект JavaScript. Вы можете обновить товар на основе его индекса в списке.
Я буду использовать примитив объекта для этого поста.
Добавьте следующую функцию в server.js.
function createState() {
hamoni
.createObject("election", voteData)
.then(statePrimitive => {
console.log("election state created");
state = statePrimitive;
})
.catch(console.log);
}
Это создает состояние с именем Выборы и значение состояния, используя переменную Ventedata Отказ Затем нам нужно подключиться к серверу Sync Hamoni. Мы делаем это, позвонив hamoni.connect () Отказ Добавьте следующий код ниже функции создать ()
hamoni.connect().then(() => createState()).catch(console.log);
Если он успешно подключается к серверу, мы называем создать () Функция для создания состояния для нашей таблицы.
Обновить состояние приложения
Мы хотим обновить состояние, когда приходит новый голос. Примитив объекта, который владеет нашим государством, имеет Обновление () Метод, который можно использовать для обновления состояния. Мы обновим Выборы состояние, когда пользователь звонит /голос Конечная точка нашего API. Ниже строки 27 добавьте следующий код для обновления состояния
app.post("/vote", function(req, res) {
....
state.update(voteData);
....
});
Это будет обновлять состояние и транслировать обновление подключенным клиентам.
Наша бэкэнда готова принять голоса и обновить государство. Теперь нам нужно построить интерфейс для отправки голосов и отображать диаграмму в реальном времени.
Шаблон стартера мы клонировали в начале, есть файлы Public/Review.html и Public/JS/Review.js. Эти файлы уже содержат код для отображения формы на веб-странице и JavaScript, чтобы опубликовать на сервере. Я пропустил запись этого кода здесь, потому что это базовая форма HTML и JavaScript для отправки данных форм на сервер. Оставьте комментарий, если что-нибудь там запутается.
Диаграмма будет отображаться в index.html Внутри общедоступной папки. index.html Уже содержит теги скрипта для Chart.js и Hamoni Sync (см. Линии 17 и 18)
Сделать график
Откройте файл Public/index.js. Добавьте функцию ниже, чтобы сделать диаграмму на веб-странице.
function renderChart(state) {
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "bar",
// The data for our dataset
data: {
labels: state.map(s => s.candidate),
datasets: [
{
label: "Elections 2018",
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgb(255, 99, 132)",
data: state.map(s => s.vote)
}
]
},
// Configuration options go here
options: {
scales: {
xAxes: [
{
time: {
unit: "Vote"
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 6
}
}
],
yAxes: [
{
ticks: {
min: 0,
max: 30,
maxTicksLimit: 10
},
gridLines: {
display: true
}
}
]
},
legend: {
display: true
}
}
});
}
Эта функция принимает параметр, который представляет наше состояние диаграммы. Параметры типа Укажите тип диаграммы, который мы хотим рендерировать, в этом случае, в этом случае гистограмму. Параметр данных определяет свойства, используемые для отображения данных для диаграммы. Есть два важных свойства, которые я хочу привлечь к вашему вниманию. Во-первых, свойство метки на линии 8, Этикетки: Stature.map (s => s.candidate) Это получает свою ценность из государства. Состояние диаграммы – это массив каждого избирательного кандидата и их голоса. С помощью этого кода мы устанавливаем имя кандидата в виде меток для диаграммы. Второй – Данные: State.map (s => s.vote) В строке 14. Он устанавливает данные для диаграммы.
Теперь нам нужно получить состояние диаграммы и сделать график.
Получить государственные и государственные обновления
Чтобы получить состояние диаграммы, нам нужно подключиться к синхронизации Hamoni. Добавьте следующий код, чтобы получить обновления состояния и состояния, затем сделайте диаграмму на основе этого:
let hamoni = new Hamoni("Account_ID", "APP_ID");
hamoni
.connect()
.then(response => {
hamoni
.get("election")
.then(statePrimitive => {
renderChart(statePrimitive.get());
statePrimitive.onUpdated(state => renderChart(state));
})
.catch(console.log);
})
.catch(error => console.log(error));
Если клиент успешно подключается к Hamoni Sync, мы называем Hamoni.get («выборы») Чтобы получить наше государство выборов. Если это удастся, мы называем Rendercharts () со значением для состояния.
Чтобы получить уведомление о государственных обновлениях, мы называем Onupdated () В соответствии с примитивом состояния с обратным вызовом, которое должно быть выполнено каждый раз, есть обновление.
Теперь мы можем проверить наш код, чтобы увидеть его работать. Откройте командную строку и запустите NPM начать Затем откройте свой браузер и перейдите к localhost: 5000 Отказ
Вуаля !! 🚀.
Государство диаграммы в реальном времени сделано с меньшими хлопотами. Chart.js прост в использовании. Hamoni Sync снижает время и усилие разработки в проектировании сложной государственной логики вокруг систем публикации/подписки, потому что оно охватывает концепцию государства.
Вы можете получить готовый исходный код на Github Отказ