Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Cloud Services

Начало работы с Pusher: демонстрация взаимодействия в реальном времени с Channels

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Get Started With Pusher.
Get Started With Pusher: Introducing Channels
Get Started With Pusher: Build a Chat App With Channels, PHP, and Vue.js
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Russian (Pусский) translation by Anna k.Ivanova (you can also view the original English article)

Channels от Pusher - это платформа, которая позволяет легко добавлять "бесшовные" данные в реальном времени в ваши приложения. В этом видео я покажу вам, как начать писать код для приложений в режиме реального времени между клиентскими и серверными приложениями с помощью JavaScript и Channels от Pusher.

Создание приложения Channels

Первое, что вам нужно сделать, это создать учетную запись на https://www.pusher.com. Нажмите кнопку Зарегистрироваться и выберите способ входа в свою учетную запись. Вы можете использовать свою учетную запись GitHub или Google, или можете использовать адрес электронной почты и пароль. Войдите в систему после создания своей учетной записи.

При первом входе в систему вам будет предложено создать новое приложение Channels. Channels будут предоставлять имя по умолчанию для вашего приложения, но имеет смысл называть приложение Channels чем-то похожим на ваше приложение. Поскольку мы будем писать консольное приложение Node.js, я назову свое приложение node-console-app. Обратите внимание, что соглашение об именах заключается в использовании тире вместо пробелов.

Create a Channels app

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

Затем вы выбираете технологии, которые будете использовать для написания вашего приложения. Я выбрал Node.js, но не стесняйтесь использовать любые технологии, которые вы хотите.

После нажатия кнопки Создать приложение вы увидите страницу Начало работы. Эта страница является клиентом и она указывает, что состояние подключения подключено. Если мы посмотрим на страницу Обзор, то увидим, что есть один клиент. Это демонстрационный клиент на странице «Начало работы».

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

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

В новом каталоге создайте файл package.json следующей командой:

Затем нужно установить пакет Pusher.

Затем создайте файл server.js - это наш файл приложения. Введите следующий код:

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

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

В этом коде мы используем стандартный поток ввода и прослушиваем событие data. Получаемые нами данные являются необработанными данными, поэтому мы затем преобразуем их в строку и обрезаем пробелы. Затем мы проверяем, не набрал ли пользователь слово «exit», и если это так, мы выходим из программы.

Затем мы используем метод trigger() объекта объекта Pusher для запуска события my-event в канале my-channel. Таким образом, запуск события включает в себя следующие три части информации:

  • канал
  • событие
  • payload сообщения

Важно отметить, что имя канала не является именем приложения Channels. Скорее это произвольное имя, которое, надеюсь, имеет какое-то значение для нашего приложения. Мы использовали по умолчанию, my-channel, потому что это то, на что подписался демонстрационный клиент на странице «Начало работы». Клиенты, подписавшиеся на этот канал, могут прослушивать события, которые происходят в канале my-channel. В этом случае им нужно будет прослушать событие my-event, потому что это то, что мы запускаем, когда мы вводим что-то в консоль приложения Node.js.

Payload сообщения может быть объектом любой формы. Еще раз, этот код задает свойство message, потому что это то, что ищет клиент со страницы "Начало работы".

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

Тестирование кода сервера

Вы можете сразу проверить свое серверное приложение, потому что у нас уже есть клиент: страница «Начало работы». Вы можете запустить сервер с помощью следующей команды:

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

Alert box showing this is a test text

Написание клиентского приложения

Инициализируйте проект клиента в другом каталоге с помощью следующей команды:

Затем установите клиентскую библиотеку Pusher следующей командой:

Создайте файл client.js и введите следующий код:

Этот код создает клиентский объект Pusher. Обратите внимание, что для объекта клиента требуется меньше информации, чем для сервера - не включайте секретный ключ или идентификатор приложения в код клиента! В нашем примере мы затем подписываемся на канал my-channel с использованием метода subscribe() объекта Pusher. Это позволяет прослушивать любое событие в этом канале.

Подписка на канал дает вам объект канала, который затем можно использовать для прослушивания событий, происходящих в этом канале, и в этом коде мы использовали метод bind() для привязки слушателя к событию my-event. Каждый раз, когда клиент обрабатывает событие my-event, он использует console.log() для записи сообщения на экран.

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

Введите сообщения в серверное приложение, и вы должны увидеть, как клиент получает и выводит их.

Message being typed and output

Заключение

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.