Рубрики
Без рубрики

Как создать функцию живого комментариев с помощью JavaScript и Pusher

Rahat Khanna Как построить функцию живого комментария, используя JavaScript и PuSerthestes Days «Social» стал модным словом, и мы все хотим, чтобы наши приложения были центром этих удивительных социальных разговоров. Комментарии к посту, видео, обновлению или любой функции вашего нового приложения

Автор оригинала: FreeCodeCamp Community Member.

Рахат Ханна

В наши дни «Социальная» стала модным словом, и мы все хотим, чтобы наши приложения были центром этих удивительных социальных разговоров. Комментарии к сообщению, видео, обновлению или любой функции вашего нового приложения – отличный способ добавить удовольствие и обогащать социальные разговоры в ваше приложение.

Если эти разговоры могут быть в реальном времени, то еще лучше. Таким образом, в этой статье мы будем обсуждать, как мы можем создать функцию комментариев в реальном времени для наших веб-приложений, использующих Толкатель с ванильным JavaScript на интернет-конце и Node.js на спине.

Мы назовем эту систему комментариев в реальном времени Flash Comments , который можно повторно использовать для нескольких постов/функций в вашем приложении и может генерировать удивительные разговоры в режиме реального времени. Только базовые знания HTML, CSS и JavaScript требуются для последующего просмотра в этом сообщении в блоге.

Наше приложение будет выглядеть что-то подобное:

Разделы

  • Краткое введение в толкатель
  • Подписаться с топлером
  • Node.js и Express приложение для разоблачения API создания комментариев и запуска события толкателя
  • Передний конец с использованием ванильного JavaScript подписывается на канал

** Пропустить первые две разделы, если вы уже зарегистрировались с Pusher.

Краткое введение в толкатель

Pusher – удивительная платформа, которая тезисывает сложности реализации системы реального времени на наших собственных с использованием WebSockets или длительного опроса. Мы можем мгновенно добавить функции в реальном времени нашим существующим веб-приложениям, используя Pusher, поскольку он поддерживает широкий спектр комплектов разработки программного обеспечения (SDK).

Интеграционные комплекты доступны для различных интерфейсных библиотек, таких как позвоночник, реагирование, угловые и jQuery – а также задневские платформы/языки, такие как .NET, Java, Python, Ruby, PHP и GO.

Подписаться с топлером

Вы можете создать бесплатный аккаунт в толках здесь Отказ После того, как вы зарегистрируетесь и войдите в систему, вам будет предложено создать новое приложение, как видно на рисунке ниже. Вам придется заполнить некоторую информацию о вашем проекте, а также на передней библиотеке или на заднем плане, с которым вы будете создавать ваше приложение. У вас также есть возможность выбрать кластер Pusher на основе распределения местоположения пользователей, я выбрал AP2 (Мумбаи, Индия) Как я могу построить приложение для региона Индии.

Для этой конкретной статьи мы выберем JavaScript для интерфейса и Node.js для задней части, как видно на рисунке выше.

Это просто покажет вам набор кодов образец стартера для этих выборов, но вы можете использовать любой интеграционный комплект позже с помощью этого приложения.

Node.js приложение

Вы можете создать новую папку с именем Flash-комментарии и запустить следующую команду в корне папки:

Он попросит вас куча информации относительно приложения, и это создаст новый Package.json Файл внутри вашей папки.

Мы будем пользоваться довольно простыми и популярными экспресс-структурами в Node.js. Теперь мы установим важные пакеты, которые будут использоваться в нашем приложении Minimal Express.

После установки все требуется NPM Модули, теперь мы создадим файл точек входа для нашего приложения Node.js, как server.js Внутри корневой папки. Добавьте следующий базовый код для базового HTTP-сервера для запуска порта 9000 Отказ

PUSHER имеет модуль NPM с открытым исходным кодом для интеграций Node.js, которые мы будем использовать. Он обеспечивает набор методов утилиты для интеграции с толкательными API с использованием уникального AppID , ключ и а Секрет Отказ Мы сначала установим толкатель NPM Модуль с использованием следующей команды:

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

Вам придется заменить AppID , ключ и а Секрет со значениями, специфичными для вашего собственного приложения. После этого мы напишем код для нового API, который будет использоваться для создания нового комментария. Этот API вызовет маршрут /комментарий с http Пост Метод и ожидает объект для комментариев со свойствами Имя , Email и Комментарий Отказ Добавьте следующий код в свой server.js Файл перед app.listen часть.

В приведенном выше коде мы извлекли данные из req .body в Новоприемник объект, а затем использовал его, чтобы вызвать триггер Метод на Толкатель пример.

Важные концепции толкателя

Канал

В толках у нас есть концептуальная группировка под названием «каналы», и она обеспечивает базовый способ фильтрации данных в толкатель. Канал может представлять многие объекты в реальном мире. Например: в наших комментариях приложение канал могут быть комментариями для конкретной статьи, видео, пост блога, фотографии или потоковой передачи события.

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

Таким образом, мы создадим новый уникальный канал для каждого объекта с их уникальным идентификатором. Например, может быть назван канал комментариев видео Youtube Комментарии-YouTube-234 Отказ

Есть три типа канала

  • Общественный канал – Может быть подписан всем, кто знает имя канала.
  • Частный канал – канал, который может быть подписан только уполномоченными пользователями. Если имя канала имеет частные- Префикс, он будет рассматриваться как частный канал.
  • Канал присутствия – Это специальный тип канала, похожий на Private, поскольку только авторизованные пользователи могут подписаться, где список подписчиков также поддерживается и уведомлен и другим пользователям. Имя канала должно иметь префикс присутствие-

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

Мероприятие

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

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

Метод триггера толкателя

Теперь мы поймем наш серверный код сервера для отправки события на канал толкателя Flash-комментарии Отказ

Мы используем .ttrigger (имя канала, имя события, полезная нагрузка) отправить событие с сервера всякий раз, когда Пост API вызывается для создания нового комментария. Для простоты этой статьи мы не будем использовать базу данных для сохранения и сохранения комментариев, но в производственной системе. Вам потребуется сохранить комментарий, соответствующий уникальному идентификатору объекта, как идентификатор видео YouTube или идентификатор сообщения в блоге.

Теперь мы можем запустить наш сервер, используя Узел сервер команда. Наш веб-сервис будет доступен на URL http://localhost: 9000/Комментарий Мы можем написать Пост Запрос с использованием любого расширения Chrome, как Почтальон или даже Curl Чтобы проверить, если он возвращает {«создан»: «Истинно»} Отказ

Команда Curl для проверки вашего Пост API будет следующим образом:

Входной интерфейс с использованием ванильного JavaScript

Теперь мы будем писать самую важную часть, интерфейсный код с использованием Vanilla JavaScript. В предельном коде мы будем разрабатывать раздел комментариев, который будет следовать за двумя функциями:

  • Дисплей Все живые комментарии добавлены в канал с гладкой анимацией
  • Добавить Новый комментарий к живым комментариям, ударяя Пост API мы только что создали

Шаг 1: Создайте папку с именем общественности и создать файл index.html

Мы уже написали код в нашем server.js служить статическому контенту от публичный Папка, поэтому мы будем писать весь наш интерфейсный код в этой папке.

Пожалуйста, создайте новую папку публичный а также создать пустую index.html файл на данный момент.

Шаг 2: добавить код BoaterPlate на наш index.html

Мы будем добавлять базовый код Bovertlate для настройки базовой структуры для нашего веб-приложения, как Заголовок и Разделы Где контент, как видео или сообщение в блоге, а также раздел, который будет содержать наши Flash Comments коробка.

Шаг 3: Создание файла style.css

Теперь мы также создадим still.css Файл, чтобы содержать важный код CSS для стайлинга нашего веб-приложения и Flash Comments составная часть. Мы добавим основные стили, чтобы сделать наш скелет.

Шаг 4: Добавьте библиотеку Pusher.js и создайте App.js

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

Также создайте новый app.js Файл, где мы будем писать все наш код, а также импортировать то же самое в нашем index.html Файл после тега скрипта для импорта pusher.js файл.

В нашем файле app.js Теперь мы напишем код для инициализации экземпляра толкателя, используя уникальный клиентский ключ API, который мы получили от панели инструментов Pusher. Мы также пройдем объект, указывающий кластер и устанавливаю флаг, зашифрованный в соответствии с true, чтобы все обмен и связь зашифрованы. Мы также будем использовать pusher.subscribe ('Channel-name') Чтобы прослушать все события для определенного канала.

Мы создадим JavaScript IIFE (немедленно вызывающие функции), чтобы создать частную область, чтобы мы не загрязняем глобальную область. Пожалуйста, добавьте следующий код в app.js файл:

Шаг 5: Создание формы для добавления нового комментария

Теперь мы создадим элементы управления формы, чтобы позволить пользователю вводить их имя, отправить текст электронной почты и комментариев для создания нового комментария, используя наш Node.js API и Pusher. Мы добавим следующий HTML-код внутри существующей теги виде, чтобы создать форму:

В форме формы выше, мы использовали проверки HTML5, такие как R Уравненные и Type = Email Что не позволит пользователю держать эти поля пустыми или отправлять недопустимый адрес электронной почты. Эти проверки будут автоматически работать в большинстве браузеров, которые поддерживают проверку формы HTML5.

Кроме того, мы будем добавлять следующие CSS для стиля формы:

После создания визуальной формы теперь нам нужно подключить обработчик событий к Отправить событие формы. Мы сделаем это, используя следующий код в app.js Файл, вероятно, сверху после var Декларации:

Теперь мы напишем код для реализации обработчика addwomment со следующим кодом:

Мы используем нативный запрос XHR, чтобы сделать запрос AJAX в API узла. Вы можете использовать либо jQuery ajax, либо любые рамки Ajax Метод в вашем приложении. Теперь, если мы запустим наше приложение, то заполните форму и отправьте ее, мы увидим Успех: {создано: правда} Сообщение в нашем браузере разработчика инструментов консоли.

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

Шаг 6: Показать список комментариев, полученных для этого канала

Теперь мы свяжемся с new_comment Событие на этом канале Flash-комментарии Так что мы можем получить любое сообщение о создании нового комментария, сделанного из любого клиента в реальном времени, и мы можем отобразить все эти комментарии.

Сначала мы добавим шаблон для нового комментария в нашем index.html Файл внутри тега DIV с ID = «Список комментариев» Отказ

Теперь мы напишем код JavaScript для привязки к событию New_Comment на экземпляре Channe Pusher, который мы подписались. Всякий раз, когда new_comment Событие будет увольнено, мы возьмем шаблон InnerHTML контента и замените заполнителей {{name}}, {{eail}} & {{комментарий}} с данными, передаваемыми вместе с событием и добавьте их к Комментарии-Список div элемент.

Используя вышеуказанный код, новый тег DIV, представляющий новый комментарий, будет автоматически создан и добавлен к Комментарии-Список контейнер.

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

Теперь вы можете запустить приложение, которое мы создали, либо в двух разных браузерах, либо в одном в обычном браузере, а другой в окне Incognito, и добавьте несколько комментариев. Мы видим, что живые комментарии будут добавлены в реальном времени с гладкой анимацией.

Полный код для этого учебника доступен на Github Отказ

Заключение

Мы создали хорошее веб-приложение с функцией Live Comment с помощью Pusher, Node.js и Vanilla JavaScript. Мы можем использовать этот компонент с любым из наших приложений и включить в живых комментариях для различных социальных объектов, таких как видео, блог, опросы, статьи и прямые потоки.

Мы использовали сервер Node.js, чтобы создать API для отдыха, чтобы получить новый комментарий, а затем вызвать событие Pusher на определенном канале. Для любого применения реального мира мы можем получить уникальный идентификатор для каждого объекта и использовать уникальное имя канала для любого объекта. В сценарии производства мы также можем хранить комментарии в постоянном хранении, а затем позже извлечь их.

Мы также создали приложение для интерфейса, которое подключится к PUSHER API с помощью библиотеки PUSHER.JS. Мы создали форму, чтобы поразить API узла, который будет вызвать new_comment мероприятие. Комментарии отображаются в реальном времени с анимацией с использованием метода привязки на экземпляре канала.

Эта статья была первоначально опубликована на Блог Pusher Отказ