Содержание статьи
Рахат Кханна
Сегодня «Социальный» стал модным словом, и мы все хотим, чтобы наши программы являлись центром этих удивительных социальных разговоров. Комментарии к публикации, видео, обновлениям или любой функции вашей новой программы – отличный способ добавить веселых и обогащающих социальных бесед в вашу программу.
Если эти разговоры могут происходить в реальном времени, это еще лучше. Поэтому в этой статье мы обсудим, как мы можем создать функцию комментариев в реальном времени для наших веб-приложений с помощью Pusher с JavaScript JavaScript на интерфейсе и Node.js на сервере.
Мы будем называть это системой комментариев в реальном времени Флэш комментарии, который можно повторно использовать для нескольких публикаций/функций в вашем приложении и может генерировать отличные разговоры в режиме реального времени. Чтобы прочитать эту публикацию в блоге, требуются только базовые знания HTML, CSS и JavaScript.
Наше приложение будет выглядеть примерно так:
Разделы
- Краткое вступление в Pusher
- Регистрация в Pusher
- Node.js и программа Express для предоставления API создания комментариев и инициирования события Pusher
- Передний интерфейс с использованием Vanilla JavaScript подписки на канал
** Пропустите первые два раздела, если вы уже зарегистрировались в Pusher.
Краткое вступление в Pusher
Pusher – это удивительная платформа, которая абстрагирует сложности самостоятельного внедрения системы реального времени с помощью WebSockets или Long Polling. Мы можем мгновенно добавлять функции реального времени в наши существующие веб-приложения с помощью Pusher, поскольку он поддерживает широкий спектр наборов программного обеспечения (SDK).
Комплекты интеграции доступны для различных интерфейсных библиотек, таких как Backbone, React, Angular и jQuery, а также для внутренних платформ/языков, таких как .NET, Java, Python, Ruby, PHP и GO.
Регистрация в Pusher
Вы можете создать бесплатный аккаунт в Pusher здесь. После регистрации и входа в систему впервые вам будет предложено создать новую программу, как показано на рисунке ниже. Вам нужно будет заполнить некоторую информацию о своем проекте, а также библиотеку интерфейса или серверный язык, с помощью которой вы будете создавать свою программу. У вас также есть возможность выбрать кластер Pusher на основе распределения местоположения ваших пользователей, я выбрал ap2 (Mumbai, India) потому что я, возможно, создаю программу для региона Индии.
Для этой конкретной статьи мы выберем JavaScript для интерфейса и Node.js для бэк-энда, как показано на рисунке выше.
Это просто покажет вам набор исходных образцов кодов для этих вариантов, но вы можете использовать любой комплект интеграции позже с этой программой.
Приложение Node.js
Вы можете создать новую папку под названием flash-comments и выполните такую команду в корне папки:
Он спросит вас о куче информации о программе и создаст новую package.json файл в вашей папке.
Мы будем использовать довольно простой и популярный фреймворк Express в Node.js. Теперь мы установим важные пакеты, которые будут использоваться в нашей минимальной программе Express.
После установки всего необходимого npm модулей, теперь мы создадим файл точки входа для нашей программы Node.js как server.js внутри корневой папки. Добавьте следующий базовый код для базового сервера HTTP, который будет запускаться с помощью порта 9000.
Pusher имеет открытый модуль NPM для интеграции Node.js, который мы будем использовать. Он предоставляет набор служебных методов для интеграции с Pusher API с помощью уникального appId, key и а secret. Сначала мы установим pusher npm модуль с помощью такой команды:
Теперь мы можем использовать require, чтобы получить модуль Pusher и создать новый экземпляр, передавая объект параметров с важными ключами для инициализации нашей интеграции. Для этой статьи я разместил случайные ключи. Вам нужно будет получить его для своей программы из информационной панели Pusher.
Вам придется заменить appId, key и а secret со значениями, характерными для программы. После этого мы напишем код нового API, который будет использоваться для создания нового комментария. Этот API откроет маршрут /comment с HTTP POST и будет ожидать объект для комментария со свойствами name, email и comment. Добавьте следующий код в свой server.js файл перед app.listen часть.
В приведенном выше коде мы извлекли данные из req.body в a newComment а затем использовал его для вызова trigger метод на Pusher экземпляр.
Важные концепции Pusher
Канал
В Pusher у нас есть концептуальная группировка под названием «каналы», обеспечивающая базовый способ фильтрации данных в Pusher. Канал может представлять многие объекты в реальной программе. Например: в нашей программе для комментариев по каналу могут быть комментарии к определенной статье, видео, публикации в блоге, фотографии или прямые трансляции события.
Мы создали бы новый уникальный идентификатор канала для каждой из этих сущностей, чтобы уникально идентифицировать или группировать данные, такие как комментарии, связанные с любым из них. Два уникальных потоковых видео в прямом эфире должны иметь отдельные каналы, чтобы мы могли показывать соответствующий поток комментариев в прямом эфире на соответствующих страницах.
Мы создадим новый уникальный канал для каждой сущности с их уникальным идентификатором. Например, можно назвать канал видеокомментариев YouTube comments-youtube-234.
Есть три вида канала
- Общественный канал — подписаться может каждый знающий название канала.
- Частный канал – канал, на который могут подписаться только авторизованные пользователи. Если в названии канала есть a
private-префикс, он будет считаться частным каналом. - Канал присутствия — особый тип канала, похожий на частный, поскольку только авторизованные пользователи могут подписаться, где список подписчиков также поддерживается и сообщается другим пользователям. Название канала должно иметь префикс
presence-
Мы будем использовать общедоступный канал в нашем сообщении в блоге, который мы называем как flash-комментарии но в идеале вам следует использовать приватный канал для систем комментирования с уникальным именем для каждой сущности, для которой вы хотите включить функцию комментирования.
Событие
Теперь реальные данные в pusher передаются через события, являющиеся основным способом упаковки сообщений. Событие может инициировать бэкэнд или даже клиент в особых случаях для любого конкретного канала. Чтобы убедиться, что ваше сообщение получит получателя, нужен канал.
Мы предоставляем уникальное название каждого события, чтобы мы могли настроить обработчики для получения и обработки этих сообщений о событиях на каждом из наших клиентов, подписавшихся на любой канал.
Метод запуска толкателем
Теперь мы разберемся с нашим серверным кодом для отправки события на канал толкателя flash-comments.
Мы используем .trigger(channel-name,event-name, payload)присылать событие с сервера каждый раз, когда POST API вызывается для создания нового комментария. Для простоты этой статьи мы будем использовать не любую базу данных для сохранения и сохранения комментариев, а только рабочую систему. Вам нужно будет сохранить комментарий, соответствующий уникальному идентификатору объекта, например идентификатор видео YouTube или идентификатор публикации в блоге.
Теперь мы можем запустить наш сервер с помощью node server команда. Наш веб-сервис будет доступен по URL-адресу http://localhost:9000/comment.Мы можем написать a POST запросить с помощью любого расширения Chrome, например Postman или даже завиток проверить, возвращается { "created":"true" } .
Команда curl для проверки вашего POST API будет следующим:
Интерфейс с использованием Vanilla JavaScript
Теперь мы будем писать важнейшую часть, интерфейсный код с помощью Vanilla JavaScript. В интерфейсном коде мы разработаем раздел окна для комментариев, который будет иметь следующие две функции:
- Дисплей все комментарии в прямом эфире, добавленные в канал с плавной анимацией
- добавить новый комментарий к комментариям в прямом эфире, нажав
POSTAPI, который мы только что создали
Шаг 1. Создайте папку с названием public и создайте файл index.html
Мы уже написали код в нашем server.js для обслуживания статического содержимого public папку, так что мы запишем весь наш интерфейсный код в эту папку.
Пожалуйста, создайте новую папку public а также создать пустой index.html файл на данный момент.
Шаг 2: Добавьте шаблонный код в наш index.html
Мы добавим базовый шаблонный код, чтобы настроить базовую структуру для нашей веб-приложения Headerи Sections где можно размещать такое содержимое, как видео или сообщение в блоге, а также раздел, который будет содержать наши Flash Comments коробка.
Шаг 3: Создайте файл style.css
Теперь мы также создадим a style.css файл, содержащий важный код CSS для стилизации нашей веб-приложения и flash comments компонент. Мы прибавим базовые стили для визуализации нашего скелета.
Шаг 4: Добавьте библиотеку pusher.js и создайте app.js
Теперь мы добавим библиотеку pusher.js, доступную в CDN, чтобы использовать ее для интеграции с системой Pusher с помощью простого кода JavaScript. Добавьте следующий тег сценария в конце тела перед его закрывающим тегом:
Также создайте новый app.js файл, где мы будем писать весь наш код, а также импортировать его в наш index.html файл после тега сценария для импорта pusher.js файл.
В нашем файле app.js Теперь мы напишем код для инициализации экземпляра Pusher с помощью уникального клиентского ключа API, который мы получили из информационной панели Pusher. Мы также передадим объект, определяющий кластер и устанавливающий для флага encrypted значение true, чтобы все сообщения и связь были зашифрованы. Мы также будем использовать pusher.subscribe('channel-name') чтобы прослушать все события канала.
Мы создадим JavaScript IIFE (функции немедленного вызова), чтобы создать частную область, чтобы не загрязнять глобальную область. Добавьте следующий код в app.js файл:
Теперь мы создадим элементы управления формой, которые позволят пользователю вводить свое имя, адрес электронной почты и текст комментария для создания нового комментария с помощью нашего API Node.js и Pusher. Мы добавим следующий HTML-код в существующий тег формы, чтобы создать форму:
В приведенном выше коде формы мы использовали проверку HTML5, например required и type=email что не позволит пользователю оставлять эти поля пустыми или отправлять недействительный электронный адрес. Эти проверки будут автоматически работать в большинстве браузеров, поддерживающих проверку форм HTML5.
Кроме того, мы добавим следующий CSS для стилизации формы:
После создания визуальной формы теперь нам нужно присоединить обработчик события к Submit событие формы. Мы сделаем это с помощью следующего кода в app.js файл, вероятно, в верхней части после var заявления:
Теперь мы напишем код для реализации обработчика addNewComment с таким кодом:
Мы используем собственный запрос XHR, чтобы сделать запрос AJAX к Node API. Вы можете использовать jQuery AJAX или любую специальную структуру ajax в вашем приложении. Теперь, если мы запустим нашу заявку, заполним форму и пришлем ее, мы увидим a Success: { created: true }сообщения на консоли инструментов разработчика обозревателя.
Кроме того, мы можем увидеть информационную панель Pusher, чтобы увидеть статистику о сообщениях о событиях, отправленных для любого канала.
Теперь мы привяжемся к new_comment событие на этом канале flash-comments чтобы мы могли получить любое уведомление о создании новых комментариев от любого клиента в реальном времени, и мы могли показать все эти комментарии.
Сначала мы добавим шаблон для нового комментария в наш index.html файл внутри тега div из id="comments-list".
Теперь мы напишем код JavaScript для привязки к событию new_comment на экземпляре канала толкателя, на который мы подписались. Каждый раз, когда new_comment будет запущено событие, мы возьмем содержимое шаблона innerHTML и заменим заполнители {{name}}, {{email}} & {{comment}}с данными, переданными вместе с событием, и добавьте их в comments-list элемент div.
С помощью приведенного выше кода новый тег div, представляющий новый комментарий, будет автоматически создан и добавлен в comments-list контейнер.
Теперь мы добавим следующий CSS, чтобы хорошо отображать список комментариев, а также анимировать каждый раз, когда в списке появляется новый комментарий:
Теперь вы можете запустить приложение, которое мы создали, либо в двух разных браузерах, либо в одном в обычном браузере, а другой в окне анонимного просмотра, и добавить несколько комментариев. Мы видим, что живые комментарии будут добавляться в реальном времени с плавной анимацией.
Полный код этого руководства доступен на GitHub.
Вывод
Мы создали отличную веб-приложение с функцией живых комментариев, используя Pusher, Node.js и Vanilla JavaScript. Мы можем использовать этот компонент с любым из наших приложений и включать комментарии в прямом эфире для различных социальных объектов, таких как видео, публикации в блоге, опросы, статьи и прямые трансляции.
Мы использовали сервер Node.js для создания REST API, чтобы получить новый комментарий, а затем инициировать событие Pusher на определенном канале. Для любой реальной программы можно взять уникальный идентификатор для каждой сущности и использовать уникальное название канала для любой сущности. В рабочем сценарии мы можем также хранить комментарии в постоянном хранилище, а затем получить их позже.
Мы также создали приложение Front-End, которое будет подключаться к API Pusher с помощью библиотеки pusher.js. Мы создали форму для обращения к Node API, инициирующей new_comment событие. Комментарии отображаются в реальном времени с анимацией посредством метода привязки в экземпляре канала.
Эта статья была первоначально опубликована в блоге Pusher.