Создайте приложение для голосования в режиме реального времени с помощью Pusher, Node и Bootstrap

 router.post("/", (req, res) => { pusher.trigger('hp-voting', 'hp-house', { "points": 1, "house": req.body.house }); return res.json({ "success": true, "message": "Thanks for voting." }); }); 

Создание внешнего интерфейса приложения

Я использовал jQuery и Bootstrap для создания внешнего интерфейса. Вот часть, где мы разрешаем пользователям голосовать.

Я также собираюсь добавить контейнер графика, который будет отображать график в режиме реального времени по мере получения голосов.

Интегрируя все

У нас уже есть готовый конец. Теперь мы увидим, как отправить запрос в службу Pusher при нажатии кнопки голосования, благодаря внешнему JavaScript. Мы запустим событие submit формы, когда пользователь нажмет кнопку, и он должен будет сделать запрос POST к нашему внутреннему интерфейсу к маршруту /vote .

Слушатель событий, пользовательские данные и Ajax

Давайте добавим прослушиватель событий для отправки формы, код для захвата пользовательских данных и вызов Ajax:

 // Execute only after the whole document is fetched and assets are loaded. $(document).ready(function () { // Form submission event listener (event handler) $("#voteForm").submit(function (e) { e.preventDefault(); // Get the checked input element's value. var house = $(".form-check-input:checked").val(); // Construct the data to be sent as a payload to the AJAX call. var data = { "house": house }; $.post("/vote", data, function (res) { // Log the output in the console. console.log(res); }); }); }); 

Работа с толкателем и графиками

Когда форма отправляется, вызов Ajax запускает конечную точку routes/vote.js , а внутреннее приложение Node также запускает службу Pusher, используя приведенный ниже код в routes/vote.js :

 pusher.trigger('hp-voting', 'hp-house', { "points": 1, "house": req.body.house }); 

Когда код выше нажал (или запустил), служба Pusher вызовет событие с hp-voting и hp-house . Мы еще не поймали событие и не подписались на него. Таким образом, мы собираемся реализовать CanvasJS для построения нашей диаграммы, и мы собираемся подписаться на вышеуказанное событие и будем добавлять точки данных с помощью триггера, указанного прослушивателем события submit формы.

Добавление CanvasJS

Как только вы добавите все биты правильно, ваш script.js стороне клиента должен быть похож на этот:

 // Execute only after the whole document is fetched and assets are loaded. $(document).ready(function () { // Form submission event listener (event handler) $("#voteForm").submit(function (e) { // Prevent the default event. e.preventDefault(); // Get the checked input element's value. var house = $(".form-check-input:checked").val(); // Construct the data to be sent as a payload to the Ajax call. var data = { "house": house }; // Fire the POST request Ajax call to our /vote end point. $.post("/vote", data, function (res) { // Log the output in the console. console.log(res); }); }); // Create the base data points. var dataPoints = [ { label: "Gryffindor", y: 0 }, { label: "Hufflepuff", y: 0 }, { label: "Ravenclaw", y: 0 }, { label: "Slytherin", y: 0 } ]; // Initialize Chart using jQuery selector. // Get the chart container element. var chartContainer = $("#chartContainer"); // Check if the element exists in the DOM. if (chartContainer.length === 1) { // Construct the options for the chart. var options = { "animationEnabled": true, "theme": "light1", "title": { "text": "Harry Potter House Results" }, "data": [ { "type": "column", "dataPoints": dataPoints } ] }; // Initialize the chart. $("#chartContainer").CanvasJSChart(options); } }); 

Теперь сохраните файл, и когда вы перезагрузите страницу, вы сможете увидеть диаграмму заполнителя. Это, безусловно, реальный график, но без каких-либо значений. Вы должны увидеть что-то вроде этого:

Теперь мы реализовали нашу диаграмму CanvasJS с правой стороны.

Инициализация Pusher на стороне клиента

После регистрации Pusher мы должны инициализировать объект Pusher . Поскольку у нас уже есть клиентский config.js , мы будем использовать этот код в этой части:

 // Initialise a Pusher Object. var pusher = new Pusher(PusherConfig.key, { cluster: PusherConfig.cluster, forceTLS: PusherConfigforceTLS. }); 

После инициализации объекта Pusher нам нужно подписаться на наш канал, где наши сообщения публикуются на стороне сервера. Мы будем копировать код с панели инструментов Pusher, но немного изменим, чтобы подписаться на наш канал hp-voting hp-house событие hp-house . Значения по умолчанию my-channel и my-event должны быть обновлены следующим образом в соответствии с нашим внутренним кодом:

 // Subscribe to the channel. var channel = pusher.subscribe('hp-voting'); // Bind to a particular event and listen to the event data. channel.bind('hp-house', function(data) { alert(JSON.stringify(data)); }); 

Вместо того, чтобы alert о сообщении data , мы хотим добавить данные в график. Способ, которым мы можем сделать это, беря наши dataPoints и манипулируя массивом относительно ответа сервера. С уже существующей переменной dataPoints (помните, что мы использовали var вместо const поскольку мы должны иметь возможность изменить ее на более позднем этапе), мы будем использовать функцию Array.map () более высокого порядка следующим образом:

 // Bind to a particular event and listen to the event data. channel.bind('hp-house', function(data) { // Use a higher order Array map. dataPoints = dataPoints.map(function (d) { // Check if the current label is the updated value. if (d.label == data.house) { // Increment the house's value by the number of new points. dy += data.points; } // Return the original value as this is a map function. return d; }); }); 

Мы перебираем все метки dataPoints , и когда конкретная метка соответствует текущей метке, мы будем увеличивать значение текущей метки с количеством обновленных точек. Поскольку мы используем функцию JavaScript Array.map() , мы должны вернуть исходное значение d обратно в вызов функции. После того, как мы обновили dataPoints , мы должны повторно визуализировать диаграмму.

После функции map() мы сделаем следующее:

 channel.bind('hp-house', function(data) { // Use a higher order Array map. dataPoints = dataPoints.map(function (d) { // Check if the current label is the updated value. if (d.label == data.house) { // Increment the house's value by the number of new points. dy += data.points; } // Return the original value as this is a map function. return d; }); // Re-render the chart. $("#chartContainer").CanvasJSChart(options); }); 

Как только вы напишете весь приведенный выше код, сохраните и запустите приложение в своем браузере, запустите инструменты веб-разработчика и проверьте консоль. Вы должны увидеть, что Pusher Service связывается с вашим приложением. Я смог увидеть следующее в своей консоли (я скрыл свой appId и secret , поэтому кроме этих конфиденциальных битов информации все остальное показывается):

Вывод

В этот момент, когда вы пытаетесь открыть два окна одного и того же приложения и голосовать на одном экране, вы можете видеть, что все экраны обновляются одновременно. Это в основном то, как вы используете сервис Pusher для создания приложений в реальном времени.

Наше веб-приложение для голосования «Гарри Поттер» теперь отображает параметры (все четыре дома) и диаграмму справа, которая обновляется при голосовании подключенного пользователя. Следующим очевидным шагом будет использование базы данных, такой как MongoDB, для хранения всей информации, чтобы она сохранялась даже при перезагрузке страниц приложения.