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. Обратите внимание, что соглашение об именах заключается в использовании тире вместо пробелов.
Затем вам нужно выбрать свой кластер, и вы возможно захотите выбрать тот, что ближе всего к вашему серверу, потому что клиенты могут быть где угодно по всему миру. Для меня это всегда гадание между Огайо и Северной Вирджинией. Я выбрал Огайо, потому что он был выбран по умолчанию.
Затем вы выбираете технологии, которые будете использовать для написания вашего приложения. Я выбрал Node.js, но не стесняйтесь использовать любые технологии, которые вы хотите.
После нажатия кнопки Создать приложение вы увидите страницу Начало работы. Эта страница является клиентом и она указывает, что состояние подключения подключено. Если мы посмотрим на страницу Обзор, то увидим, что есть один клиент. Это демонстрационный клиент на странице «Начало работы».
В нижней части страницы обзора вы найдете идентификатор приложения, ключ, секретный ключ и кластер. Это информация, необходимая для подключения к вашему Channels приложению из клиентских и серверных приложений.
Создание серверного приложения
В новом каталоге создайте файл package.json следующей командой:
1 |
npm init --yes
|
Затем нужно установить пакет Pusher.
1 |
npm install pusher --save |
Затем создайте файл server.js - это наш файл приложения. Введите следующий код:
1 |
'use strict'; |
2 |
|
3 |
const Pusher = require('pusher'); |
4 |
|
5 |
var pusher = new Pusher({ |
6 |
appId: '530620', |
7 |
key: 'b534d4fac76717b9872e', |
8 |
secret: 'f84f62e45f82cc09b8c8', |
9 |
cluster: 'us2', |
10 |
encrypted: true |
11 |
});
|
Этот код создает объект Pusher, передавая объект, который имеет свойства для идентификатора приложения, ключа, секретного ключа и кластера для конструктора - в основном вся информация, которую мы только что видели на странице обзора, будет здесь. Существует также другое свойство - encrypted, которое указывает, что Pusher должен шифровать связь между нашим серверным приложением и службой Channels.
Наше простое серверное приложение будет принимать пользовательский ввод, позволяя нам вводить в консольное окно. Мы получим этот ввод и затем инициируем событие обмена сообщениями. Этот код выглядит следующим образом:
1 |
process.stdin.on('data', (chunk) => { |
2 |
const str = chunk.toString().trim(); |
3 |
|
4 |
if (str === 'exit') { |
5 |
process.exit(0); |
6 |
}
|
7 |
|
8 |
pusher.trigger('my-channel', 'my-event', { |
9 |
message: str |
10 |
});
|
11 |
});
|
12 |
|
13 |
console.log('Type a message...'); |
В этом коде мы используем стандартный поток ввода и прослушиваем событие data. Получаемые нами данные являются необработанными данными, поэтому мы затем преобразуем их в строку и обрезаем пробелы. Затем мы проверяем, не набрал ли пользователь слово «exit», и если это так, мы выходим из программы.
Затем мы используем метод trigger() объекта объекта Pusher для запуска события my-event в канале my-channel. Таким образом, запуск события включает в себя следующие три части информации:
- канал
- событие
- payload сообщения
Важно отметить, что имя канала не является именем приложения Channels. Скорее это произвольное имя, которое, надеюсь, имеет какое-то значение для нашего приложения. Мы использовали по умолчанию, my-channel, потому что это то, на что подписался демонстрационный клиент на странице «Начало работы». Клиенты, подписавшиеся на этот канал, могут прослушивать события, которые происходят в канале my-channel. В этом случае им нужно будет прослушать событие my-event, потому что это то, что мы запускаем, когда мы вводим что-то в консоль приложения Node.js.
Payload сообщения может быть объектом любой формы. Еще раз, этот код задает свойство message, потому что это то, что ищет клиент со страницы "Начало работы".
Мы закончили наш код приложения, выпустив сообщение, которое сообщает пользователю, что приложение готово.
Тестирование кода сервера
Вы можете сразу проверить свое серверное приложение, потому что у нас уже есть клиент: страница «Начало работы». Вы можете запустить сервер с помощью следующей команды:
1 |
node server.js |
Сообщения, которые вы вводите в консольном приложении, должны отображаться в окне предупреждения на странице «Начало работы». Не стесняйтесь поиграть с этим, прежде чем перейти к написанию клиентского приложения в следующем разделе.
Написание клиентского приложения
Инициализируйте проект клиента в другом каталоге с помощью следующей команды:
1 |
npm init --yes
|
Затем установите клиентскую библиотеку Pusher следующей командой:
1 |
npm install pusher-js --save |
Создайте файл client.js и введите следующий код:
1 |
'use strict'; |
2 |
|
3 |
const Pusher = require('pusher-js'); |
4 |
|
5 |
let pusher = new Pusher('b534d4fac76717b9872e', { |
6 |
cluster: 'us2', |
7 |
encrypted: true |
8 |
});
|
9 |
|
10 |
let channel = pusher.subscribe('my-channel'); |
11 |
channel.bind('my-event', (data) => { |
12 |
console.log(data.message); |
13 |
});
|
14 |
|
15 |
console.log('Listening for messages...'); |
Этот код создает клиентский объект Pusher. Обратите внимание, что для объекта клиента требуется меньше информации, чем для сервера - не включайте секретный ключ или идентификатор приложения в код клиента! В нашем примере мы затем подписываемся на канал my-channel с использованием метода subscribe() объекта Pusher. Это позволяет прослушивать любое событие в этом канале.
Подписка на канал дает вам объект канала, который затем можно использовать для прослушивания событий, происходящих в этом канале, и в этом коде мы использовали метод bind() для привязки слушателя к событию my-event. Каждый раз, когда клиент обрабатывает событие my-event, он использует console.log() для записи сообщения на экран.
Двигаемся дальше и запустите клиент в отдельном окне консоли, чтобы одновременно запускать как клиент, так и сервер. Команда для запуска приложения:
1 |
node client.js |
Введите сообщения в серверное приложение, и вы должны увидеть, как клиент получает и выводит их.
Заключение
Channels - это фантастическая платформа, которая дает вам возможность добавлять связь в реальном времени с вашими приложениями, и, как вы видели из двух приложений, которые мы написали в этом видео, вы можете с легкостью это сделать.
By
