Это сообщение от Баяса из блога NuoDB.
В предыдущей статье мы обсуждали Moonshot и наш подход к разработке простой панели статистики в реальном времени на платформе NuoDB. Итак, как это работает? В этой статье мы поговорим о реализации простого веб-приложения node.js, которое фиксирует изменения состояния в NuoDB и публикует эти изменения для прослушивающих клиентов. Я предполагаю общее знакомство и комфорт с сетевыми технологиями. Вот повестка дня:
- Разработка интерфейса с помощью Backbone.js
- HTML5 Websockets
- Внутренняя разработка с Node.js + NuoDB
- Собираем все вместе в пример веб-приложения
Вступление
Панели мониторинга являются отличным способом представления сложных наборов данных в самых простых терминах, так что можно сразу же получить выгоду от представленной информации. Панели управления в реальном времени особенно полезны, поскольку они обеспечивают мгновенную обратную связь, позволяя людям принимать обоснованные решения при изменении состояния системы.
Более того, вы хотите быстро создать панель статистики, которая (1) берет метрику и сохраняет ее в NuoDB, а (2) позволяет нескольким пользователям (возможно, десяткам или сотням, может даже тысячам) просматривать панель мониторинга в реальном времени.
Довольно интенсивно Что такое жизнеспособное, масштабируемое решение?
Введите node.js и NuoDB в помощь. Как я уже упоминал в моей предыдущей статье: Начало работы: Node.js и NuoDB , в зависимости от требований вашего конкретного проекта, NuoDB и node.js являются отличным сочетанием для создания высокопроизводительных, масштабируемых веб-приложений или веб-продуктов на основе SOA .
Мы собираемся обсудить на высоком уровне несколько технологий для создания простого интерфейса панели мониторинга для мониторинга статистики. Давайте начнем.
Введите backbone.js
Часть 1 — Разработка Front End W / Backbone.js
За прошедшие годы были достигнуты значительные успехи в области инструментов веб-разработки, непосредственно связанных с расширением разработки на стороне клиента. Backbone.js — это минималистский набор инструментов, который обеспечивает структуру веб-приложения, придерживающегося парадигмы типа MVC. Причина, по которой я выбрал backbone.js вместо angular.js , knockout.js , ember.js или других, была в большей степени вопросом предпочтений и привычного отношения, чем что-либо еще, то же самое можно легко сделать в любой среде интерфейса. Проверьте предоставленные ссылки, чтобы увидеть, какой фреймворк вам подходит, но для целей этого упражнения мы будем придерживаться backbone.js
Основная обязанность backbone.js в этом упражнении будет заключаться в том, чтобы (1) отобразить начальное представление панели мониторинга, (2) установить соединение через веб-сокет с node.js и (3) подписаться на событие «metrics: update» с сервера обновить наш взгляд.
После рендеринга приложения backbone.js и подключения сокета мы свяжемся с событием «metrics: update», генерируемым из node.js, тогда и только тогда, когда произойдет изменение состояния. Пока это не произойдет, переднему и заднему концу не нужно разговаривать друг с другом. Единственный раз, когда они говорят, это когда происходят изменения состояния ИЛИ информация запрашивается с любой стороны. Это в основном то, что на стороне клиента, единственное, что нам сейчас нужно, это данные, чтобы мы могли динамически изменять пользовательский интерфейс.
Итак, как мы собираемся получить эти данные в двух направлениях?
Введите веб-сокеты
Часть 2 — HTML5 веб-сокеты
Появление HTML5 в основных браузерах представило множество действительно интересных функций, одна из моих любимых — веб-сокеты., Почему веб-сокеты действительно крутые? Ну, веб-сокеты позволяют двунаправленную связь между клиентом и сервером. До HTML5 было довольно распространенной практикой выполнять некоторый тип механизма опроса от клиента к серверу для получения новых данных с сервера для эмуляции работы в реальном времени. Проблема с опросом AJAX, означающим выполнение HTTP GET для серверного ресурса каждые несколько секунд во многих случаях, заключается в том, что он чрезвычайно дорогой и плохо масштабируется. Был также длинный опрос AJAX (Comet), который поддерживал соединение перед закрытием и повторным открытием на неопределенное время, что лучше, чем ранее описанное решение, и, возможно, лучшее решение в то время, но во многих случаях это все же был взлом. ,
Веб-сокеты устанавливают соединение между сервером и клиентом, поэтому они могут отправлять или получать данные в любое время, что чрезвычайно важно. Кроме того, накладные расходы на выборку данных через веб-сокеты существенно ниже по сравнению с AJAX, поскольку ему не нужно повторно отправлять информацию заголовка HTTP и, в некоторых случаях, прерывать SSL-соединения для нескольких запросов данных. Это делает веб-сокеты особенно полезными для веб-приложений, которые имеют то, что я называю компонентом реального времени, присущим ядру приложения, и я искренне чувствую, что большинство динамических веб-приложений движутся в этом направлении.
Кроме того, существует ряд доступных библиотек веб-сокетов, которые поддерживают веб-сокеты, но одним из самых популярных в сообществе node.js является socket.io . Эта библиотека действительно проста в установке через npm в узле, и после установки вы можете ссылаться на нее с вашего клиента. Так почему же акцент на веб-сокетах? Итак, основное средство, с помощью которого приложение backbone.js и наш внутренний интерфейс NuoDB + node.js взаимодействуют через JSON, и мы хотим обеспечить высокую производительность этого канала для панели мониторинга в реальном времени.
Таким образом, мы говорили о backbone.js как о среде переднего плана для структурирования нашего кода переднего плана, о веб-сокетах как о способе транспортировки JSON от внутреннего интерфейса до внешнего, но кто отвечает за публикацию этих обновлений для прослушивающих клиентов?
Введите node.js
Часть 3 — Back-end разработка с NuoDB & Node.js
Теперь серверная часть содержит службу node.js, которая отвечает за (1) обслуживание исходного HTML-запроса, который загрузит приложение backbone.js, и (2) публикацию любых изменений состояния NuoDB в веб-сокете, чтобы клиент мог выполнить повторную визуализацию. меняется. Для нашего примера панели мониторинга в реальном времени показатели (1) хранятся в NuoDB и (2) публикуются в событии веб-сокета «metrics: update». Это событие может показаться знакомым, потому что в первой части мы обсуждали подписку на событие «metrics: update», это вторая половина, где мы публикуем обновление. Обратите внимание, что они должны совпадать, чтобы пользовательский интерфейс получил правильное событие. Идея заключается в том, что по мере поступления новых метрик из HTTP POST мы будем хранить эту информацию и публиковать ее, так просто, и представления должны обновляться мгновенно.
Для всех интенсивных целей сервер node.js чрезвычайно прост, менее 50 строк кода для реализации того, что мы только что описали.
Теперь, когда мы обсудили все основные компоненты, давайте соберем их вместе с некоторым стандартным кодом
Часть 4 — Собираем все вместе
Итак, мы поговорили о внешнем интерфейсе, внутреннем интерфейсе и о том, какие классные веб-сокеты HTML5. Ниже приведен примерный код, который поможет вам начать работу. Для получения справки по настройке node.js & NuoDB прочитайте блог Getting Started: Node.js & NuoDB .
Для начала на вашей HTML-странице создайте новый элемент div с атрибутом id «metric». Здесь мы будем загружать новые значения метрики с сервера node.js.
Вот простое представление Backbone.js, которое прослушивает веб-сокет и выполняет метод обновления для изменения состояния метрики.
Вот наше представление Backbone, которое связывается с событием сокета «metrics: update» и вызывает метод update ():
view = Backbone.View.extend({
initialize: function(){
_.bindAll(this, "render", "update");
Backbone.socket = io.connect(window.location.host);
Backbone.socket.on("metrics:update", this.update);
},
update: function(data){
$("#metric").html(data.foo);
},
render: function(){
return this;
}
});
Круто, затем нам нужно настроить node.js, чтобы он мог прослушивать соединения с сокетами и выдавать обновления через него. В вашем веб-приложении установите socket.io через npm:
npm install socket.io
И наш простой серверный код node.js выглядит так:
http = require("http");
express = require("express");
io = require("socket.io");
nuodb = require("db-nuodb");
app = express();
sio = io.listen(app);
app.get("/", function(req, res){
res.render("index", { title: "demo" });
});
app.post("/metrics", function(req, res){
sio.sockets.emit("metrics:update", req.body);
res.end();
});
Давайте улучшим это, чтобы обновить таблицу статистики в NuoDB, которая собирает информацию, связанную со статистикой, перед публикацией всем прослушивающим клиентам
http = require("http");
express = require("express");
io = require("socket.io");
nuodb = require("db-nuodb");
app = express();
sio = io.listen(app);
new nuodb.Database({
hostname: 'localhost',
user: 'root',
password: 'password',
database: 'node'
}).connect(function(error) {
if (error) {
return console.log("ERROR: " + error);
}
app.get("/", function(req, res){
res.render("index", { title: "demo" });
});
app.post("/metrics", function(req, res){
cmd = "INSERT INTO METRICS(FOO) VALUES (" + req.body.foo + ")";
this.query().execute(cmd, function(error) {
if (error) {
return console.log('ERROR: ' + error);
}
metrics = { foo: req.body.foo };
sio.sockets.emit("metrics:update", metrics);
res.end();
});
});
});
Теперь нам нужно загрузить какую-то нагрузку на систему. Мы можем использовать простой REST-клиент для выдачи HTTP POST для нашего ресурса node.js или мы можем реализовать простой загрузчик, который выполняет HTTP POST за несколько секунд со случайно сгенерированной статистикой. Независимо от того, как выполняется HTTP POST, вы заметите, что как только обработчик постов node.js будет выполнен, данные будут сохранены в NuoDB, и все прослушивающие клиенты будут обновлены с новой метрикой.
Это основные инструменты, так что теперь сходите с ума! Изучите мою другую статью, пользовательский интерфейс управления предприятием для Project Moonshot , чтобы взглянуть на нашу панель инструментов, которую мы реализовали за пару дней с использованием приведенной выше парадигмы. Для тех, кто заинтересован в разработке веб-приложений с узлом, я настоятельно рекомендую проверить Express , инфраструктуру веб-приложений для node.js.