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

Полный код можно найти на GitHub.
Что такое Chatkit?
Возможно, вам будет интересно: Что такое Chatkit?
В двух словах, Chatkit – это API, который поможет вам создать функциональные возможности чата в вашем приложении. Функционал как:
- комнаты
- Присутствие в Интернете
- Индикаторы печати
- Индикаторы прочтения (количество непрочитанных сообщений, квитанции о прочтении)
- Мультимедийные сообщения
- И более
Кроме того, Chatkit обрабатывает сложные детали, возникающие при построении чата в реальном времени, таких как надежность и масштаб.
Для меня использование Chatkit означает, что не нужно иметь дело с развертыванием веб-сокетов, управлением инфраструктурой для него и масштабным управлением чатом!
В этом учебнике мы коснемся только того, что может делать Chatkit. Чтобы дать вам представление о том, что вы можете создать, ознакомьтесь с этим клоном Slack с открытым исходным кодом на основе Chatkit:
Хватит аккуратно, правда?
Создайте экземпляр Chatkit
Прежде чем погрузиться в учебник, вам следует настроить экземпляр Chatkit. Это занимает всего секунду.
Чтобы создать его, выделите pusher.com/chatkit и нажмите Зарегистрироваться. На панели приборов под «Chatkit» нажмите Создать новый + затем введите название экземпляра. Я назвал свой My Awesome Chatkit App!

В пределах Ключи вкладку, примите во внимание ваш Локатор экземпляров и Секретный ключ. Через мгновение они нам пригодятся.
Создайте комнату Chatkit
Chatkit позволяет нам создавать публичные или приватные чаты и даже поддерживает чат один на один.
Обычно комнаты создаются динамически – например, когда конечный пользователь создает новую комнату, – но в этом учебнике мы инспектор чтобы создать его вручную:

Создайте сервер аутентификации
Аутентификация – это действие, подтверждающее, что пользователь является тем, кем он является. Обычно это включает пароль.
В этом учебнике мы не будем аутентифицировать пользователей – мы не будем спрашивать у них пароль – но нам все равно нужно будет написать /authenticate
маршрут, возвращающий токен Chatkit.
Кроме того, нам нужно определить маршрут под названием /users
который создает Chatkit пользователя.
Для этого создайте новую папку, я назвал свою terminal-chat
. Затем установите @pusher-chatkit-server
, express
и некоторое промежуточное программное обеспечение Express:
mkdir terminal-chat
cd terminal-chat
npm init -y
npm install --save @pusher/chatkit-server npm install --save express npm install --save body-parser cors
Затем создайте новый файл под названием server.js
и вставьте следующий код:
Не забудьте заменить YOUR_INSTANCE_LOCATOR
и YOUR_CHATKIT_KEY
со своими.
Настройте нашего клиента
Теперь у нас есть сервер и экземпляр Chatkit, мы можем начать создавать клиент командной строки.
В этом же проекте установите @pusher/chatkit
и jsdom
:
npm install --save @pusher/chatkitnpm install --save jsdom
Чтобы было понятно, на предыдущем шаге мы установили Chatkit сервер SDK (@pusher/chatkit-server
) и вот, мы устанавливаем клиента Chatkit SDK (@pusher/chatkit-client
). Мы также установили jsdom
но об этом чуть позже.
В новом файле под названием client.js
вставьте следующее:
Начиная сверху мы сначала импортируем ChatManager
и TokenProvider
от @pusher/chatkit
. Вскоре мы упомянем о них.
Мы также импортируем jsdom
зависимость, о которой я упоминал раньше.
Кратко, @pusher/chatkit-client
работает в браузере, но не в Node. В функции, которая называется makeChatkitNodeCompatible
мы используем jsdom
чтобы «обмануть» Chatkit, чтобы подумать, что он работает в браузере? Это навременный обходной путь, но он работает идеально.
В нижней части модуля мы определяем an async
вызванная функция main
что позволяет нам использовать await
при вызове асинхронных функций.
Если await
это новая концепция для вас, вот отличное вступление.
Попросите пользователя ввести имя пользователя
Прежде чем мы сможем разрешить пользователю подключиться к комнате, нам нужно спросить его имя. Для этого мы можем воспользоваться prompt.
Сначала установите prompt
:
npm install --save prompt
А затем импортируйте его:
Затем обновите нашу главную функцию:
Теперь, если мы запустим программу с помощью команды node client.js
мы должны иметь подсказку:

Ву?!
Создать пользователя
Прежде чем подключаться к Chatkit, мы должны сначала создать Chatkit пользователя через сервер, о котором мы писали ранее.
Для этого мы отправим запрос по адресу /users
использование маршрута axios
который является клиентом HTTP:
npm install --save axios
После установки axios
импортируйте его:
Затем определите функцию, которая называется createUser
:
Теперь мы можем вызвать эту функцию с приглашенным именем пользователя:
Давайте проверим это.
Откройте два окна терминала. В одном запустите сервер с node server.js
а в другом запустите клиент с помощью node client.js
. Если все хорошо, ты след вам будет предложено ввести имя пользователя, и вы увидите User created: <userna
me> в выводе сервера.
Если вы видите ошибку в строке Failed to create a user, connect ECONNREFUSED
тогда ваш сервер может не работать, поэтому перепроверьте это.
Настройте Chatkit SDK
На данный момент у нас есть имя пользователя и возможность создать пользователя. Далее мы хотим подключиться к Chatkit как этот пользователь.
Для этого под вызовом, на который вы только что сделали createUser
вставьте следующее:
Опять же, не забудьте заменить YOUR_INSTANCE_LOCATOR
с Локатор экземпляров вы указывали раньше.
Этот код инициализирует Chatkit, а затем подключается к службе, возвращая currentUser
. Обратите внимание, как мы даем a TokenProvider
что указывает на наш сервер аутентификации.
Комнаты списка
Теперь у нас есть подлинный пользователь, мы можем показать ему список комнат, к которым они могут присоединиться.
Для этого нам следует обновить функцию main в client.js
чтобы получить смежные комнаты (getJoinableRooms
), и перечислите их рядом с комнатами, которые есть у пользователя уже присоединился (user.rooms
):
The ...
там синтаксис называется деструктуризацией, и он обеспечивает краткий способ объединения двух или более массивов.
Бег node client.js
теперь следует распечатать список комнат:

Вы, вероятно, увидите только одну комнату для начала. Чтобы создать дополнительные комнаты, вернитесь к Инспектору или воспользуйтесь файлом createRoom
функция.
Подпишитесь на комнату
Далее мы должны предложить пользователю выбрать комнату с таким кодом:
Одна крутая вещь prompt
состоит в том, что вы можете создавать правила проверки. Выше мы создаем его, чтобы убедиться, что ввод пользователя находится между 0
и количество присоединенных комнат.
После того как у нас есть выбор пользовательской комнаты, мы можем установить его как room
и подписывайся на комнату:
После подписки мы добавляем a onNewMessage
крючок.
Вы можете думать о хуке как о функции, которая вызывается всякий раз, когда происходит событие. В этом случае это когда получено новое сообщение.
onNewMessage
будет вызвано реальное время каждый раз, когда пользователь отправляет новое сообщение. Когда я говорю «пользователь», это включает текущего пользователя, поэтому в пределах функции мы печатаем сообщения только в том случае, если его направил кто-то другой.
Отправка сообщений с введенного пользователя
Возможность получать сообщения не очень полезна, если мы не можем также отправлять сообщения сейчас, не правда ли?
К счастью, отправка сообщения – это только одна строка кода из Chatkit.
Сначала установите readline
чтобы прочитать ввод от пользователя:
npm install --save readline
Затем импортируйте его:
Наконец, ссылка на него ниже:
Если вы запускаете два экземпляра клиента, вы можете отправлять и получать сообщения:

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

Сначала установите ora
модуль загрузочного спинера:
npm install --save ora
Затем в client.js
можем позвонить start
, succeed
и т.д. в зависимости от статуса команды.
Вот полное client.js
файл с выделенным новым кодом, связанным со спиннером:
Вывод
Прекрасно, мы закончили!
Подытоживая, вы научились:
- Подсказывайте и аутентифицируйте пользователя
- Подключитесь к Chatkit
- Перечислите доступные для пользователей комнаты
- Присоединиться к комнате
- Отправка и получение сообщений из комнаты
- И, для удовольствия, добавьте загрузочный спинер
В этом уроке мы едва коснулись поверхности Chatkit. Мы можем построить гораздо больше, в частности:
- Переключайтесь между комнатами
- Создавайте новые комнаты
- Показывать пользователям статус офлайн/офлайн
- Показать индикаторы ввода
- Показать сообщение о прочтении
Хотите узнать, как? Дайте мне знать в комментариях и мы напишем часть 2.
Алекс Букер создал видеоурок по этой статье. Проверь!