от Гьюго

Создание чата в вашем приложении может быть достаточно сложным. Однако с помощью 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: <username> в выводе сервера.

Если вы видите ошибку в строке 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.

Алекс Букер создал видеоурок по этой статье. Проверь!