Как построить электронный опрос в реальном времени в 5 шагах

Фото Arnaud Jaegers на Unsplash

Электронный опрос упрощает, как опросы проводятся и агрегаты данные в реальном времени. (В наши дни никто не должен взять на автобус в город, чтобы бросить голосование за свою любимую футбольную команду!) Как избиратели бросают свои голоса, каждый связанный клиент, который уполномочен видеть данные опроса, должен увидеть голоса, как они приходят.

В этой статье объясняется, как беспрепятственно добавлять функции в реальном времени в ваше приложение для опроса, используя Pusher, когда визуализируя данные на диаграмме, используя Canvasjs Отказ

Некоторые из инструментов, которые мы будем использовать, чтобы построить наше приложение:

Узел : JavaScript на сервере. Узел будет обрабатывать все наши потребности, связанные с сервером.
Экспресс : Утилита узла для обработки запросов HTTP по маршрутам
Теловый парсер : Прикрепляет полезную нагрузку запроса на Express’s req , следовательно, req .body хранит эту полезную нагрузку для каждого запроса.
Толкатель : Pub/Sub Pattern для строительства решений в реальном времени.
Canvasjs : Библиотека пользовательского интерфейса для облегчения визуализации данных с JavaScript на DOM.

Вместе мы построим минималистское приложение, в котором пользователи могут выбрать их любимую структуру JavaScript. Наше приложение также будет включать в себя страницу администратора, в которой владелец опроса может видеть опросы.

Давайте пройдем по шагам один за другим:

1. Обработка экрана

Первые вещи в первую очередь. Участники или избиратели опроса (позвоните им все, что соответствует вашему контексту), нужно подавать с помощью избирательного экрана. Этот экран содержит кликабельные элементы, из которых их просят выбрать опцию.

Постарайтесь не получать личные с вариантами, мы просто делаем демонстрацию в реальном времени. Ниже приведен HTML за сценой:



  
    Pick your favorite

HTML отображает избирательные карты и импорт Axios и наш обычай app.js файл. Axios Будет использоваться, чтобы сделать HTTP-вызовы на сервер, который мы создадим. Этот сервер несет ответственность за запуск/излучение событий в реальном времени с использованием Pusher.

2. Отправить запросы голосов

Когда пользователь нажимает на выбранный вами параметр, мы хотим реагировать с ответом. Ответ будет запускать HTTP-запрос. Ожидается, что этот запрос создаст событие Pusher, но мы еще представляем:

// ./app.js
window.addEventListener('load', () => {
  var app = {
    pollLogo: document.querySelectorAll('.poll-logo'),
    frameworks: ['Angular', 'Ember', 'React', 'Vue']
  }

  // Sends a POST request to the
  // server using axios
  app.handlePollEvent = function(event, index) {
    const framework = this.frameworks[index];
    axios.post('http://localhost:3000/vote', {framework: framework})
    .then((data) => {
      alert (`Voted ${framework}`);
    })
  }

  // Sets up click events for
  // all the cards on the DOM
  app.setup = function() {
    this.pollLogo.forEach((pollBox, index) => {
      pollBox.addEventListener('click', (event) => {
        // Calls the event handler
        this.handlePollEvent(event, index)
      }, true)
    })
  }

  app.setup();

})

Когда нажатие каждая из карт, Handlepollevent вызывается с правильными значениями в качестве аргумента в зависимости от индекса. Способ, в свою очередь, отправляет имя рамочного сервера в качестве полезной нагрузки через /голос (еще не реализован) конечная точка.

3. Настройте учетную запись PUSHER и приложение

Прежде чем мы прыгаем прямо в настройках сервера, в котором толкатель запускает события на основе запроса, отправленного от клиента, вам нужно будет создать учетную запись Pusher и приложение, если у вас его еще нет:

Зарегистрируйтесь Для бесплатной учетной записи Pusher
Создайте новое приложение, выбрав Приложения на боковой панели и нажав Создать новое приложение Кнопка на нижней части боковой панели:
Настройте приложение, предоставляя базовую информацию, запрошенную в представленной форме. Вы также можете выбрать окружающую среду, которую вы намерены интегрировать Pusher для лучшего опыта настройки:
Вы можете получить ваши ключи от Ключи приложений вкладка

4. Сервер Realtime

Самый простой способ настроить сервер узла – использование Express Project Generator. Вам необходимо установить этот генератор глобально на вашу машину, используя NPM:

npm install express-generator -g

Генератор – это инструмент Scaffold, поэтому после установки он бесполезно, если мы не используем его команду для создания нового приложения Express. Мы можем сделать это, запустив следующую команду:

express poll-server

Это генерирует несколько полезных файлов, включая важный точку входа ( app.js ) и маршруты (найденные в папке marross ).

Нам просто нужен один маршрут, чтобы получить вещи двигаться: A /голос Маршрут, где клиент отправляет почтовый запрос.

Создать новый голосовать .js Файл в папке маршрутов со следующей логикой:

// ./routes/votes.js
var express = require('express');
var Pusher = require('pusher');

var router = express.Router();
var pusher = new Pusher({
  appId: '',
  key: '',
  secret: '',
  cluster: '',
  encrypted: true
});
// /* Vote
router.post('/', function(req, res, next) {
  pusher.trigger('poll', 'vote', {
    points: 10,
    framework: req.body.framework
  });
  res.send('Voted');
});
module.exports = router;

Для вышеуказанного фрагмента для успешного запуска нам нужно установить Pusher SDK с помощью NPM. Модуль уже используется, но он еще не установлен:

npm install --save pusher

В верхней части файла мы импортируем Express и Pusher, а затем настройте маршрут с Express и экземпляром толкателя с учетными данными, которые мы извлекли из панели Dashboard.
Настроенный маршрутизатор используется для создания Опубликовать/Голосовать Маршрут, который при попадании, вызывает мероприятие Pusher. Trigger достигается с использованием триггер Метод, который принимает идентификатор триггера ( Poll ), имя события ( Голосовать ) и полезную нагрузку.
Полезная нагрузка может быть любое значение, но в этом случае у нас есть объект JS. Этот объект содержит точки для каждого голоса и название опции (в данном случае, рамки) проголосовали. Имя рамки отправляется от клиента и получено сервером, используя req.body.framework Отказ
Мы все еще продолжаем ответить на «проголосованную» строку, чтобы мы не покидаем висит сервера в середине неполного запроса.

В app.js Файл, нам нужно импортировать маршрут, который мы только что создали и добавили его как часть нашего Express Mardware. Нам также необходимо настроить CORS, потому что наш клиент живет в другом домене, поэтому запросы не будут сделаны из того же домена:

// ./app.js

// Other Imports
var vote = require('./routes/vote');

// CORS
app.all('/*', function(req, res, next) {
  // CORS headers
  res.header("Access-Control-Allow-Origin", "*");
  // Only allow POST requests
  res.header('Access-Control-Allow-Methods', 'POST');
  // Set custom headers for CORS
  res.header('Access-Control-Allow-Headers', 'Content-type,Accept,X-Access-Token,X-Key');
});

// Ensure that the CORS configuration
// above comes before the route middleware
// below
app.use('/vote', vote);

module.exports = app;

5. Подключите приборную панель

Последний шаг – самый интересный аспект примера. Мы создадим другую страницу в браузере, который отображает график голосов для каждой структуры. Мы намерены получить доступ к этой приборной панели через клиентский домен, но на /admin.html маршрут.

Вот разметка для графика:



  
    Chart

Div с ID Charcontainer где мы смонтим к графику.
Мы импортировали толкатель и холст JS (для диаграммы) через CDN, а также одинаковую app.js что наша домашняя страница использует.

Нам нужно инициализировать диаграмму с набором набора по умолчанию. Поскольку это простой пример, мы не будем беспокоиться с сохраняемыми данными, скорее мы можем просто начать с пустыми (Zeros):

// ./app.js
window.addEventListener('load', () => {
  // Event handlers for
  // vote cards was here.
  // Just truncated for brevity
  
  let dataPoints = [
      { label: "Angular", y: 0 },
      { label: "Ember", y: 0 },
      { label: "React", y: 0 },
      { label: "Vue", y: 0 },
    ]
    const chartContainer = document.querySelector('#chartContainer');
    
    if(chartContainer) {
      var chart = new CanvasJS.Chart("chartContainer",
        {
          animationEnabled: true,
          theme: "theme2",
          data: [
          {
            type: "column",
            dataPoints: dataPoints
          }
          ]
        });
      chart.render();
    }
    
    // Here:
    // - Configure Pusher
    // - Subscribe to Pusher events
    // - Update chart
})

dataPoints Массив – это источник данных для графика. Объекты в массиве имеют единую структуру этикетка который хранит каркасы и y который хранит точки.
Мы проверяем, если ChartContainer существует перед созданием диаграммы, потому что index.html файл не имеет ChartContainer Отказ
Мы используем Диаграмма Функция конструктора для создания диаграммы, передавая конфигурацию для диаграммы, которая включает данные. Диаграмма отображается по телефону Render () На экземпляре функции конструктора.

Мы можем начать слушать события толкателя в заполнителе комментариев в конце:

// ./app.js
// ...continued
// Allow information to be
// logged to console
Pusher.logToConsole = true;

// Configure Pusher instance
var pusher = new Pusher('', {
  cluster: '',
  encrypted: true
});

// Subscribe to poll trigger
var channel = pusher.subscribe('poll');
// Listen to vote event
channel.bind('vote', function(data) {
  dataPoints = dataPoints.map(x => {
    if(x.label == data.framework) {
      // VOTE
      x.y += data.points;
      return x
    } else {
      return x
    }
  });
  
  // Re-render chart
  chart.render()
});

Сначала мы попросим Pusher регистрировать каждую информацию о переводах в реальном времени к консоли. Вы можете оставить это в производстве.
Затем мы настроим Pusher с нашими учетными данными, передавая ключ приложения и объект конфигурации в качестве аргументов к функции конструктора Pusher.
Имя нашего триггера – Опрос поэтому мы подписываемся на это и слушаем его голосовать мероприятие. Следовательно, когда событие срабатывает, мы обновляем dataPoints Переменная и перенаправляйте диаграмму с оказывать()

Заключение

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

URL-адрес GitHub

Этот пост был первоначально размещен автором на Толкатель блог

1. Обработка экрана

Pick your favorite

2. Отправить запросы голосов

3. Настройте учетную запись PUSHER и приложение

4. Сервер Realtime

5. Подключите приборную панель

Chart

Заключение

Читайте ещё по теме: