Создайте приложение для голосования в реальном времени с Pher, Node и Bootstrap
В этой статье я расскажу вам, как создать в режиме реального времени веб-приложение для голосования о Гарри Поттере.
Приложения реального времени обычно используют WebSocket, который является относительно новым транспортным протоколом вместо HTTP. HTTP — это односторонняя связь, которая происходит только по запросу пользователя. Пока соединение остается открытым, WebSocket обеспечивает постоянную связь между сервером и пользователем и всеми пользователями, подключенными к приложению.
Веб-приложения в реальном времени относятся к приложениям, которые мгновенно передают (почти) информацию между пользователями и серверами (а также между пользователями и другими пользователями по расширению). Это резко контрастирует с традиционными веб-приложениями, и в этом случае клиент должен получать информацию с сервера.
Наше веб-приложение для голосования «Гарри Поттер» будет отображать параметры (все четыре дома) и диаграмму справа, а при обновлении подключенный пользователь будет голосовать.
Гордон о логотипе единого дня голосования в России #shorts
Чтобы дать вам простое понимание внешнего вида, окончательное приложение выглядит следующим образом:
Вот небольшой предварительный просмотр работы приложения в реальном времени:
Для того, чтобы сделать наше приложение в реальном времени, мы будем использовать Pher и WebSocket. Pusher действует как слой в реальном времени между сервером и клиентом. Он поддерживает постоянное соединение с клиентом через WebSocket, если это возможно, и возвращается к HTTP-соединению, так что, как только на вашем сервере появятся новые данные для отправки клиенту, они могут сделать это немедленно через Pher.
Создайте наше приложение
Давайте создадим наше новое приложение, используя следующую команду npm init .. вам будет задан вопрос о деталях вашего приложения в интерактивном режиме. Вот что у меня есть:
[email protected] ➜ Harry-Potter-Pusher $ npm init < «name»: «harry-potter-pusher», «version»: «1.0.0», «description»: «A real-time voting application using Harry Potter’s house selection for my article for Pusher.», «main»: «index.js», «scripts»: < «test»: «echo «Error: no test specified» exit 1″ >, «repository»: < «type»: «git», «url»: «git+https://github.com/praveenscience/Harry-Potter-Pusher.git» >, «keywords»: [ «Harry_Potter», «Pusher», «Voting», «Real_Time», «Web_Application» ], «author»: «Praveen Kumar Purushothaman», «license»: «ISC», «bugs»: < «url»: «https://github.com/praveenscience/Harry-Potter-Pusher/issues» >, «homepage»: «https://github.com/praveenscience/Harry-Potter-Pusher#readme» > Is this OK? (yes)
Поэтому я сохранил большинство настроек по умолчанию. Теперь пришло время установить зависимости.
StrawPoll: очень простой сервис для онлайн-голосований и опросов
Установить зависимости
Нам нужны экспресс-анализатор, анализатор тела, совместное использование ресурсов (CORS), установка mongoose и cart как зависимости. Чтобы установить все в одной команде, используйте следующую команду. Вы также можете просмотреть вывод этой команды.
Нужен наш модуль
Поскольку это приложение Express, мы должны включить express() Как первое. Для этого нам также понадобятся некоторые сопутствующие модули. Итак, во-первых, давайте начнем со следующих аспектов:
const express = require(«express»); const path = require(«path»); const bodyParser = require(«body-parser»); const cors = require(«cors»);
Создать экспресс-заявку
Давайте начнем создавать наше приложение Express прямо сейчас. Во-первых, нам нужно получить express() Функция, назначенная новой переменной app :
const app = express();
Служить статическим активам
Добавление вышеупомянутой строки после начального набора включения инициализирует наш app В качестве экспресс-заявки. Следующее, что нам нужно сделать, это настроить статические ресурсы. Давайте создадим проект под названием public Давайте использовать статическое промежуточное ПО Express для обслуживания статических файлов. В каталоге давайте создадим простой index.html Документ с надписью «Привет, мир»:
Hello, World Hello, World!
Для обслуживания статических файлов у нас есть встроенный.use ()Функция иФормула ()В экспресс. Синтаксис выглядит следующим образом:
app.use( express.static( path.join(__dirname, «public») ) );
Нам также нужно использовать промежуточное программное обеспечение анализатора тела для доступа к содержимому HTTPPOST как JSON req.body .. мы также будем использовать urlencoded Чтобы получить только разбор urlencoded Объекты, только просмотр запросов, в этих запросах, Content-Type Соответствие заголовка type Выбрать. Этот синтаксический анализатор принимает только кодировку тела UTF-8 и поддерживает gzip с deflate кодирование:
app.use( bodyParser.json() ); app.use( bodyParser.urlencoded( < extended: false >) );
Чтобы разрешить междоменные запросы, нам нужно включить CORS. Давайте включим модуль CORS с помощью следующего кода:
app.use( cors() );
Теперь все начальные конфигурации установлены. Все, что нам нужно сделать сейчас, это настроить порт и прослушивать входящие соединения на конкретном порту:
const port = 3000; app.listen(port, () => < console.log(`Server started on port $.`); >);
Убедитесь, что ваш выпускной экзамен app.js Это выглядит так:
const express = require(«express»); const path = require(«path»); const bodyParser = require(«body-parser»); const cors = require(«cors»); // Create an App. const app = express(); // Serve the static files from public. app.use( express.static( path.join(__dirname, «public») ) ); // Include the body-parser middleware. app.use( bodyParser.json() ); app.use( bodyParser.urlencoded( < extended: false >) ); // Enable CORS. app.use( cors() ); // Set the port. const port = 3000; // Listen to incoming connections. app.listen(port, () => < console.log(`Server started on port $.`); >);
Запустите команду для запуска сервера:
$ npm run dev
Откройте свой http://localhost:3000/ Смотрите волшебство на новой вкладке. Вы должны увидеть новую страницу «Привет, мир».
Бэкенд для построения приложений
Во-первых, давайте создадим файл с именем routes Затем создайте в нем файл, например vote.js .. нам нужно связать этот файл с нашими app.js Файл, так что давайте вернемся к нему и включим его в наш express() инициализации:
const app = express(); // Vote route. const vote = require(«./routes/vote»)
потому что routes Каталог и app.js Начнем с ./ Чтобы использовать это в маршрутизаторе, давайте начнем с нижней части и добавим код промежуточного программного обеспечения маршрутизатора, показанный ниже, перед определением порта:
app.use(«/vote», vote);
Любой проход /vote URL будет vote.js Файл от vote переменная.
Обработка запросов GET и POST
Используя экземпляр роутера Express, мы можем справиться GET с POST Через наш метод /vote дорожка. Давайте создадим значение по умолчанию GET Теперь направьте и отправьте текст по умолчанию, например, «You are in /vote» .
const express = require(«express»); const router = express.Router(); // Default get route. router.get(«/», (req, res) => < res.send(«You are in /vote»); >);
Приведенный выше код направляет все запросы к пути. /vote Новое для нас routes/vote.js .
Обработка требований к работе
Нам нужен еще один POST Обработчик, где мы можем вызвать PushAPI. Это будет Router.post() за POST в / Чтобы все запросы отправлялись на /vote Из-за нашего промежуточного программного обеспечения. Мы дадим здесь функцию стрелки того же типа и дадим следующее сообщение «You have POSTed to /vote.» :
// Default POST route. router.post(«/», (req, res) => < res.send(«You have POSTed to /vote.»); >);
Вот этот res.send() Функция будет заменена вызовами PuserAPI в будущем.
Выходной маршрутизатор
Наконец, мы должны экспортировать маршрутизатор как модуль. использование module.exports Наконец-то так. Это должен быть конец файла, хотя вы можете разместить его где угодно. Помните, JavaScript ориентирован на события, а не процедурный:
// Export the router. module.exports = router;
В этот момент, когда вы видите полный vote.js Файл должен выглядеть так:
const express = require(«express»); const router = express.Router(); // Default GET route. router.get(«/», (req, res) => < res.send(«You are in /vote.»); >); // Default POST route. router.post(«/», (req, res) => < res.send(«You have POSTed to /vote.»); >); // Export the router. module.exports = router;
Обязательно сохраните все, теперь попробуйте запустить оба URL в нашем веб-браузере.
- Домашняя страница Localhost
- Локальная главная страница голосования
Вы должны увидеть вывод в веб-браузере.
Интеграция с Pusher API
Давайте сначала изменим наш POST Хендлер-мы в vote.js файл. Это то, что мы действительно хотим вызвать. Давайте быстро перейдем к нашей панели инструментов корзины и выберите ваше приложение Pher ( praveen-science-app (В моем случае) и нажмите на стартовую вкладку. Вы увидите код запуска.
в нашем vote.js Нам нужно определить (или потребовать) библиотеку Pusher. Затем нам нужно создать новый экземпляр (объект) Pusher Класс, а затем, наконец, вызвать службу толкателя. POST .. я хочу переодеться vote.js Файл выглядит так:
Примечание: не забудьте изменить свой appId , key , secret Дайте тот на приборной панели.
const express = require(«express»); const router = express.Router(); // ///// Step 1: Include Pusher ///// // const Pusher = require(‘pusher’); // ///// Step 2: Instantiate an Object ///// // const pusher = new Pusher(< appId: ‘appId’, key: ‘key’, secret: ‘secret’, cluster: ‘eu’, encrypted: true >); // Default GET route. router.get(«/», (req, res) => < res.send(«You are in /vote.»); >); // Default POST route. router.post(«/», (req, res) => < // ///// Step 3: Trigger the Pusher service ///// // pusher.trigger(‘my-channel’, ‘my-event’, < «message»: «hello world» >); >); // Export the router. module.exports = router;
Когда пользователь отправит форму, наше приложение сработает POST Для этого перенаправленного запроса он получит доступ к PushAPI и будет использовать pusher.trigger() Вызов функции. Кроме того, мы не хотим использовать значение по умолчанию my-channel с my-event Итак, давайте заменим их hp-voting с hp-house .. нам не нужно message , Но вместо этого мы хотим дать points а также house данные:
router.post(«/», (req, res) => < pusher.trigger(‘hp-voting’, ‘hp-house’, < «points»: 1, «house»: req.body.house >); >);
Теперь мы назначим 1 к points (Я объясню почему скоро), мы используем req.body.house за house , Потому что значение будет исходить из данных таблицы, и это обеспечивается req.body Так же, как мы использовали body-parser .
Наконец, мы будем использовать res.json() Функция и передать объект с логическим значением. success с одним message Благодарим пользователей за голосование и успешно получили:
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 для работы с внешним интерфейсом. Это та часть, где мы разрешаем пользователям голосовать.
Я также добавлю контейнер графиков, который будет отображаться в режиме реального времени при получении голосов.
Интегрировать все
Голосование на PHP своими руками
Один из самых частых вопросов начинающих веб-программистов является вопрос «А как сделать онлайн голосование?». Очень просто! И даже если сейчас Вам так не кажется, уверяю Вас, стоит лишь вдумчиво прочитать данную статью, и Вы забудете про вопросы о голосования раз и навсегда.
Предисловие : если вдруг Вы являетесь не новичком в PHP, советую не кидать статью дочитав до середины, чертыхаясь на автора, а прочитать данный небольшой материальчик полностью.
Для начала давайте определимся, что нам нужно для создания голосования.
Итак, первое что понадобиться — форма для отображения пунктов голосования и передачи результатов на сервер соответствующему скрипту для сохранения. Сразу выделяются два новых объекта — скрипт для приема, обработки и сохранения результатов и место для хранения этих самых результатов голосования.
Местом для хранения данных спокойно может быть обычный файл. Чего-то не хватает? Ах, да! Нам же нужно еще отображать результаты голосования. Эту функцию можно спокойно исполнить в нашем едином скрипте.
Ну что же, приступим. Начнем, конечно же, с формы для отображения пунктов голосования и передачи данных на сервер. В нем нет ничего сложного:
| Как Вам мой сайт? |
| Супер! |
| Хорошо |
| Нормально |
| Слабо |
| Лажа! |
Как Вы видите, обычная форма, которая передает данные методом POST скрипту golos.php, имеется 5 вариантов ответа, кнопка Голосовать — для голосования и Результаты — просмотр результатов голосования без участия в самом голосовании.
Что дальше? Скрипт? Нет, в начале нужно определиться как мы будим хранить данные. Первое что приходит в голову — в каждой строчке по значению. Довольно удобно — все сразу можно считать в массив. Однако, не стоит забывать что при этом первая строка примет индекс 0 — тут начинающие программисты часто путаются.
Я советую не использовать первую строку для хранения результатов голосования, а написать там какой-нибудь комментарий, например, что это файл для хранения результатов такого-то голосования.
Самое время перейти к скрипту голосования. Он не такой тяжелый, так что я напишу весь скрипт сразу, а уже в нем буду давать комментарии каждой строчке.
Сразу скажу, что данный скрипт я нашел в кодах одного из моих знакомых, считающего себя большим спецом. Данный скрипт стоит у него на сайте.
Ну что же. Вот и все! Вы уже побежали ставить себе на сайт голосование? А зря! Ведь данный код лишь демонстрация алгоритма, слабого алгоритма, я уже молчу про возможности самого кода. Он даже не сможет обеспечить надежной работы — при большом количестве обращений файл голосований будет периодически обнуляться.
Или, например, у нас нет абсолютно никакой защиты от многократных голосований — один человек может голосовать столько раз, сколько ему захочется.
Я уже молчу про недоработанный алгоритм скрипта — посмотрите в первой части мы очень неплохо используем цикл, который не зависит от количества пунктов голосования, а вот при выводе результатов — мы жестко привязаны к этому числу. А вывод результатов? Куда это годиться.
В общем, продолжать перечислять недостатки скрипта можно долго.
Источник: www.internet-technologies.ru
Создайте приложение для голосования с помощью React и JavaScript
React — это простой в использовании фреймворк JavaScript, который позволяет нам создавать клиентские приложения.
В этой статье мы рассмотрим, как создать приложение для голосования с помощью React и JavaScript.