Автор оригинала: FreeCodeCamp Community Member.
Уго
Строительный чат в вашем приложении может быть довольно сложным. Тем не менее, с Чаткит Реализация полностью оборудованного чата – не что иное, как несколько строк кода.
В этом руководстве я прогуляю вас, как построить Command-Line Chat, как это:
Полный код можно найти на Github Отказ
Что такое Chatkit?
Вам может быть интересно: «Что такое Chatkit?»
В двух словах Chatkit является API, который поможет вам создать функциональность чата в вашем приложении. Функциональность, как:
- Номера
- Онлайн присутствие
- Индикаторы печати
- Читать индикаторы (непрочитанные сообщения сообщения, чтение квитанции)
- Богатые медиа сообщения
- И больше
Кроме того, Chatkit обрабатывает сложные детали, которые придумывают при наращивании чата в реальном времени как надежность и масштаб.
Для меня, используя ChatKit означает не иметь дело с прокаткой веб-сервера сокет, управление инфраструктурой для него и иметь дело с управлением чатом в масштабе!
В этом руководстве мы только прикасаемся только к поверхности того, что может сделать чатекут. Чтобы дать вам представление о том, что вы можете построить, проверьте этот открытый источник Slack Clone, питание от Chatkit:
Довольно аккуратно, верно?
Создать экземпляр Chatkit
Перед погружением в учебное пособие вы должны настроить экземпляр Chatkit. Это займет всего секунду.
Создать один, отправляйтесь на pusher.com/chatkit и нажмите Зарегистрируйтесь Отказ В приборной панели ниже «Chatkit», нажмите Создать новый + Затем введите имя для экземпляра. Я позвонил по моему “моему удивительному приложению chatkit!”:
В пределах Ключи Вкладка, обратите внимание на ваш Актуальный локатор и Секретный ключ Отказ Нам понадобится этим в мгновение.
Создать комнату Chatkit
Chatkit позволяет нам создавать общественные или частные чаты и даже поддерживает чат один на один.
Обычно вы создадите номера динамически – например, когда конечный пользователь создает новую комнату, но в этом руководстве мы будем Инспектор создать один вручную:
Создайте сервер аутентификации
Аутентификация – это действие доказательства пользователя – это то, кем они говорят. Обычно это включает в себя пароль.
В этом руководстве мы не будем подтверждать, что пользователи мы не будем задать их пароль – но нам все равно нужно будет написать /аутентифицировать Маршрут, который возвращает Токен Chatkit Отказ
Кроме того, нам нужно будет определить маршрут под названием /пользователи Это создает пользователя Chatkit.
Для этого создайте новую папку, я позвонил моей Terminal-Chat Отказ Тогда установите @ pusher-chatkit-server , Экспресс и некоторые выраженные промежуточные программы:
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 Вставьте следующее:
Начиная с вершины, мы впервые импортируем Чатманагер и Токенпровидер от @ pusher/chatkit Отказ Мы будем ссылаться на это в ближайшее время.
Мы также импортируем jsdom зависимость, которую я упомянул ранее.
В двух словах, @ pusher/chatkit-клиент Работает в браузере, но не в узле. В функции под названием makechatkitnodeComosmatible мы используем jsdom Чтобы «Хитрость» подумать, думая, что он работает в браузере? T его т Emporry обходной путь, Но это работает отлично.
В нижней части модуля мы определяем async Функция называется Главная , что позволяет нам использовать ждать при вызове асинхронных функций.
Если ждать Это новая концепция для вас, вот и Отличное введение Отказ
Подскажите пользователь свое имя пользователя
Прежде чем мы сможем позволить пользователю присоединиться к комнате, нам нужно подскажите их имя. Для этого мы можем использовать Подсказка.
Сначала установите Подскажите :
npm install --save prompt
А потом импортировать его:
Затем обновите нашу основную функцию:
Теперь, если мы запустим приложение с помощью команды Node Client.js У нас должна быть наша подсказка:
Ву?!
Создать пользователя
Перед подключением к ChatKit мы должны сначала создать пользователь Chatkit через сервер, который мы написали ранее.
Для этого мы отправим запрос на /пользователи Маршрут используя Axios , который является клиентом HTTP:
npm install --save axios
После установки Axios Импортируйте это:
Затем определите функцию под названием Createuser :
Теперь мы можем назвать эту функцию с запросным именем пользователя:
Давайте проверим это.
Откройте две оконные окна. В одном запустите сервер с Node Server.js а в другом, запустите клиента с Node Client.js Отказ Если все хорошо, вы Должен быть предложенным для имени пользователя, и вы увидите Создан пользователь:
Если вы видите ошибку вдоль строк Не удалось создать пользователь, подключите Econnrefuse Тогда ваш сервер может не запустить, поэтому дважды проверьте это.
Настройка Chatkit SDK
На данный момент у нас есть имя пользователя и возможность создавать пользователь. Далее мы захотим подключиться к Chatkit в качестве пользователя.
Чтобы сделать это, под вызовом, которого вы только что сделали Createuser Вставьте следующее:
Опять же, не забудьте заменить ваш Your_instance_locator с Актуальный локатор Вы отмечали ранее.
Этот код инициализирует Chatkit, затем подключается к службе, возвращая CUNCEUSER Отказ Обратите внимание, как мы предоставляем Токенпровидер какие указывает на Наш сервер аутентификации Отказ
Список номеров
Теперь у нас есть аутентифицированный пользователь, мы можем показать им список помещений, которые они могут присоединиться.
Для этого мы должны обновить основную функцию в Client.js Для привлечения привлеченных номеров ( getjoinablerooms ), и перечислите их рядом с комнатами, у пользователя есть Уже Присоединился ( пользователь. Номер ):
... синтаксис там называется Разрушение и это дает краткий способ объединить два или более массивов.
Бег Node Client.js Теперь следует распечатать список комнат:
Вы, вероятно, просто увидите одну комнату для начала. Чтобы создать дополнительные номера, вернитесь к инспектору или используйте Создатель функция.
Подписаться на комнату
Далее мы должны подсказать пользователю выбрать комнату, с этим кодом:
Одна крутая вещь о Подскажите Это то, что вы можете создавать правила проверки. Выше мы создаем один, чтобы убедиться, что вход пользователя между 0 и количество привлеченных комнат.
Как только у нас есть выбор номера пользователя, мы можем установить, что как комната и подписаться на комнату:
После подписки мы добавляем OnnewMessage Крюк Отказ
Вы можете подумать о крючке как функцию, которая называется всякий раз, когда происходит событие. В этом случае это когда получено новое сообщение.
OnnewMessage будет называться в режиме реального времени Всякий раз, когда новое сообщение отправляется «пользователем». Когда я говорю «пользователь», что включает в себя Текущий пользователь, поэтому внутри функции мы печатаем только сообщение, если он был отправлен кем-то другим.
Отправить сообщения от ввода пользователя
Возможность получать сообщения, не так много используют, если мы также не можем отправлять сообщения сейчас, это?
К счастью, отправка сообщения – это всего лишь одна строка кода с Chatkit.
Сначала установите readline Читать вход от пользователя:
npm install --save readline
Затем импортируйте это:
Наконец, ссылаться на него ниже:
Если вы запускаете два экземпляра клиента, вы должны иметь возможность отправлять и получать сообщения:
Добавить загрузку спина для немного удовольствия ✨
Как всегда, отправка данных по сети может занять секунду или две. Для немного веселья, и сделать наше приложение чувствовать Быстрее, давайте добавим Nifty Loading Spinner:
Сначала установите ORA , модуль загрузки спиннера:
npm install --save ora
Тогда, в Client.js мы можем позвонить Начать , преуспеть и т. Д. В зависимости от состояния команды.
Вот полный Client.js Файл, с выделенным новым кодом, связанным с спинником:
Заключение
Удивительно, мы закончили!
Чтобы повторить, вы узнали, как:
- Подскажите и подтвердить подлинность пользователя
- Подключиться к Chatkit.
- Список пользователей Доступные номера
- Присоединиться к комнате
- Отправить и получать сообщения из комнаты
- И, для удовольствия, добавьте загрузку спиннера
В этом руководстве мы едва коснулись поверхности Chatkit. Там намного больше, мы могли бы построить, в том числе:
- Переключаться между комнатами
- Создать новые номера
- Показать пользователей в автономном режиме/автономный статус
- Показать индикаторы печати
- Показать прочитанные квитанции
Хотите узнать, как? Дайте мне знать в комментариях, и мы напишем часть 2.
Alex Booker создал видеоурок на основе этой статьи. Проверьте это!