от Алекса Букера

Этот учебник был написан в сотрудничестве с великолепным Кристианом Нвамбой.

Когда вы учитесь кодировать, в вашем распоряжении есть куча ресурсов – книги, скринкасты, учебные пособия, даже упражнения. Но чтобы стать отличным разработчиком, вам нужно практиковать то, чего вы узнаете с проектом.

Мотивация для этой статьи – обучение на практике. Вы начнете с ничего и создадите полную программу для чата, шаг за шагом.

Вы будете строить проект шаг за шагом, и чтобы проверить, понимаете ли вы его, мы включили некоторые специальные бонусные задания в конце. Вы готовы к тесту?

Вот что мы построим:

Достаточно круто, правда?

Продолжая вы узнаете, как создать чат в реальном времени, список «кто онлайн», а также как структурировать приложение 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.

В следующий раз, чао.