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

Достаточно круто, правда?
Продолжая вы узнаете, как создать чат в реальном времени, список «кто онлайн», а также как структурировать приложение React. Для поддержки нашего чата мы будем использовать службу, которую я помогаю создать под названием Chatkit.
Звук хороший? Настройте радио FreeCodeCamp для плавной, нежной фоновой музыки, чтобы сосредоточиться, и давайте!
Что нужно знать
Собственно, еще одна вещь?
Было бы хорошо, если бы вы уже знали некоторые основные JavaScript, Node и React. Учитывая это, если вы не чувствуете себя комфортно с этими технологиями, все равно попробуйте!
Мы преднамеренно структурировали это руководство, чтобы было понятно, куда вставить код, чтобы вы могли следовать. Если у вас есть вопросы, задайте их сюда!
Ладно, шаг первый:
Настройка Электрон
Для создания кроссплатформенного настольного приложения с веб-технологиями мы будем использовать Electron.
Чтобы поднять нас, мы сделали минимальный стартовый шаблон. Загрузите его:
git clone electron-desktop-chat
cd electron-desktop-chat
И установите эти локальные зависимости:
npm install
Создайте аккаунт Chatkit
В этом учебнике мы не слишком озабочены созданием серверной части, поэтому мы будем использовать Chatkit.
Чтобы продолжить, создайте бесплатную учетную запись и новый экземпляр под названием «Electron desktop chat»:

В открывшемся окне настроек включите поставщика тестовых маркеров:

Примечание Конечная точка поставщика тестовых маркеров, Локатор экземпляров и Секретный ключ. Они нам пригодятся на следующем шаге.
Настройте сервер Node
У Chatkit есть две основные концепции: пользователи и комнаты.
Пользователи могут создавать комнаты, подключаться к ним и общаться в них. Но прежде, чем пользователь сможет взаимодействовать с комнатой, нам нужно ее создать.
Это должно произойти на сервере.
В электронном чате запустите:
npm install --save express cors body-parser pusher-chatkit-server
И вставьте это в новый файл под названием server.js:
Не забудьте заменить instanceLocator и ключ на свой файл Локатор экземпляров и Ключ.
Большая часть этого кода является шаблоном, импортом зависимостей, настройкой Express и т.д.
Важной частью является маршрут «/users», обрабатывающий запросы на создание нового пользователя.
Запустите сервер с помощью node server.js
и вы увидите, что сервер работает в порту 3001.
Создайте форму имени пользователя
Когда кто-то загружает наше приложение, мы захотим спросить у них имя пользователя, а затем отправить его на «/users».
Установите некоторые оригинальные компоненты пользовательского интерфейса с помощью:
npm install --save react-desktop
И создайте компонент формы под названием UsernameForm:
Вы можете прочитать больше о компонентах формы React здесь. Случайно, в документации используется класс NameForm, похожий на наш, поэтому все они должны быть знакомы!
Далее замените все приложение на:
И чтобы проверить это, запустите npm run dev
. Вы увидите форму имени пользователя:

Убедитесь, что сервер запущен (запомните команда `node server.js
), удар Податьи вы увидите, что пользователь создан:

Переход на экраны без библиотеки
Когда у нас есть пользователь, мы можем перенести его из формы имя пользователя на фактический экран чата. Мы должны определить это сейчас.
Создайте новый компонент под названием Chat:
И обновите приложение:
Запустите приложение, введите имя пользователя и вы перейдете на экран чата:

Добавьте чат в реальном времени с Chatkit
События действительно развиваются, не правда ли?
Чтобы подключиться к Chatkit с клиента, вам нужно установить @pusher/chatkit:
npm install --save add @pusher/chatkit
И замените весь чат на:
Не забудьте заменить tokenProviderUrl
и instanceLocator
значение с Конечная точка поставщика тестовых маркеров и Локатор экземпляров.
Запустите приложение, нажмите ⌘+⌥+I (Control+Shift+I), и вы увидите, что вы подключились к Chatkit.

Создайте комнату Chatkit
У нас есть пользователь, но теперь нужна комната!
Чтобы создать его, воспользуйтесь инспектором Chatkit:

Не забудьте скопировать свой идентификатор, это нам понадобится на следующем шаге.
Создайте компонент чатовой комнаты
Теперь у нас есть комната, мы можем подписаться на новые сообщения, отправленные в этой комнате.
Чтобы их воспроизвести, создайте компонент MessageList:
И обновите чат:
Как всегда, не забудьте обновить roomId
с вашим фактическим идентификатором комнаты.
Теперь, когда сообщения посылаются в нашей комнате, onNewMessage
будет вызван. Отсюда мы можем обновлять наше состояние и, в свою очередь, наш пользовательский интерфейс.
Через секунду мы позволим пользователям отправлять свои сообщения. Чтобы проверить подписку, воспользуйтесь инспектором:

Отправка сообщений
Чтобы разрешить пользователям отправлять собственные сообщения, создайте компонент SendMessageForm:
И обновите чат:
Перезагрузите приложение с помощью ⌘+R (Control+Shift+R), и вы сможете отправлять сообщения:

В самом деле, почему бы не открыть две программы бок о бок и не поговорить с собой?

Какое время быть живым…
Стиль интерфейса
Благодаря React Desktop, наша программа уже выглядит прилично, но мы можем сделать лучше.
Давайте внесем несколько изменений и определим наш макет для использования на следующем и последнем шаге.
Замените весь index.css на:
Показать, кто в сети
Чтобы завершить наше приложение для чата, мы добавим список «кто онлайн», чтобы показать, вы догадались, кто онлайн!
Создайте компонент OnlineList:
Затем обновите чат:
Вы ожидали, что это будет сложнее? Я точно сделал первый раз, когда попробовал!
Поскольку Chatkit обновляет users
динамически, нам не нужно управлять каким-либо из собственных штатов. Нам просто нужно указать React повторно воспроизвести и, в свою очередь, переоценить users
каждый раз, когда кто-то приходит в Интернет ( onUserCameOnline
), переходит в автономный режим (onUserWentOffline
) или присоединяется к комнате (onUserJoined
).
Запустите сервер и клиент и помилуйтесь своим замечательным новым приложением для чата:

Если вы зашли так далеко, вы можете продолжать уходить?! Испытайте эти бонусные задания…
Задание 1: Покажите, кто в комнате активно печатает
Убедитесь, что в программе можно добавить индикаторы ввода. К примеру, если я печатаю, вы и все остальные в комнате увидите «Букер печатает…».
Если бы мы с Крисом оба печатали, вы бы увидели «Букер и Крис печатают…».
Подсказки:
Задание 2. Позвольте пользователю создать собственную комнату
В этом учебнике мы использовали инспектор для создания комнаты, затем жестко закодировали идентификатор комнаты. Это не хорошая практика.
В большинстве программ необходимо динамически создавать комнаты с помощью функции createRoom.
Когда кто-то загружает приложение, попросите у него также название комнаты:

Если комната существует, подключитесь к ней; если нет, создайте его, а затем присоединитесь к нему.
Подсказки:
Вывод
Это было весело! Мы создали достаточно крутое приложение для чата за сколько меньше часа?
Одна вещь, которую я заметил (и, возможно, вы тоже сделали) это то, что как только фундамент создан (шаблон, подключение к Chatkit и т.д.), добавлять новые функции чата довольно просто.
Кроме затруднений, нам было бы интересно узнать, где еще можно взять заявку. Некоторые идеи:
- Отправить файлы
- Количество непрочитанных сообщений
- Уведомления
- Читайте курсоры
- Частные сообщения один на один
Не стесняйтесь подписываться на нас в Twitter, @bookercodes и @codebeast.
В следующий раз, чао.