Автор оригинала: FreeCodeCamp Community Member.
Алекс Букер
Этот учебник был написан в сотрудничестве с удивительной христианской NWAMBA.
При изучении кода у вас есть куча ресурсов в вашем распоряжении – книги, скринкасты, учебные пособия, даже упражнения. Но стать отличным разработчиком, вам нужно практиковать то, что вы учитесь с проектом.
Обучение, делать мотивацию для этой статьи. Вы начнете от ничего и создаете полный приложение чата, шаг за шагом.
Вы построите проект один шаг за раз и проверить, вы понимаете его, мы включили некоторые специальные бонусные вызовы в конце. Вы до теста?
Вот что мы построим:
Довольно круто, верно ??
Когда вы будете следить, вы узнаете, как построить чат в Realtime, список «Who Online» и по пути, как структурировать приложение React. Чтобы включить наш чат, мы будем пользоваться услугой, я помогаю построить под названием Чаткит Отказ
Звучит неплохо? Настройтесь на FreeCodeCamp Radio Для некоторой гладкой, нежной фоновой музыки, чтобы сохранить сосредоточенные и поехать!
Что тебе нужно знать
На самом деле, еще одна вещь?
Было бы здорово, если бы вы знали какой-то базовый JavaScript, узел и реагируют уже. Это сказано, если вы не чувствуете себя комфортно с этими технологиями, пойти в любом случае!
Мы намеренно структурировали этот учебник, чтобы понять, где вставить код, чтобы вы могли следовать. Если у вас есть вопросы, бросьте их здесь!
Хорошо, шаг один:
Настройка электрона
Чтобы построить кроссплатформенное настольное приложение с веб-технологиями, мы будем использовать Электрон Отказ
Чтобы получить нас от земли, мы сделали минимальный шаблон стартера. Загрузить:
git clone https://github.com/pusher/electron-desktop-starter-template electron-desktop-chat
cd electron-desktop-chat
И установите эти локальные зависимости:
npm install
Создать учетную запись Chatkit
Мы не слишком обеспокоены созданием заднего конца в этом руководстве, поэтому мы будем использовать Чаткит Отказ
Следовать, Создать бесплатный аккаунт И новый экземпляр называется «Электронный настольный чат»:
В окне настроек включите провайдер Test Token:
Примечание Ваш тестовый токен провайдера конечная точка , Актуальный локатор и Секретный ключ . Нам понадобится их на следующем шаге.
Настройка сервера узла
Chatkit имеет две фундаментальные концепции: Пользователи и Номера Отказ
Пользователи могут создавать комнаты, присоединиться к ним и общаться в них. Но прежде чем пользователь сможет взаимодействовать с комнатой, нам нужно создать один.
Это должно случиться на сервере.
В Enelon-Desk-Chat, запустить:
npm install --save express cors body-parser pusher-chatkit-server
И вставьте это в новый файл под названием Server.js:
Не забудьте заменить InstanceLocator и ключ со своими собственными Локатор экземпляра и Ключ Отказ
Большинство из этого кода является котельной, импортирующие зависимости, настройки Express и так далее.
Важная часть – это маршрут «/пользователей», который обрабатывает запросы, чтобы создать новый пользователь.
Запустите сервер с Node Server.js И вы увидите, что сервер «работает на порту 3001».
Создайте форму имени пользователя
Когда кто-то загружает наше приложение, мы захочем спросить их на имя пользователя, а затем отправить его на «/пользователи».
Установите некоторые компоненты пользовательского интерфейса с:
npm install --save react-desktop
И создать компонент формы под названием usernameform:
Вы можете узнать больше о компонентах React Form здесь Отказ Случайно, документация использует класс nameform, аналогичный нашему, так что все должно быть знакомым!
Далее замените все приложение с помощью:
И тестировать его, запустить NPM запустить 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:
И обновить чат:
Как всегда, не забудьте обновить витрин с вашим фактическим номером номера.
Теперь, когда сообщения отправляются в нашу комнату, Onnewmessage будет называться Отсюда мы можем обновить наше состояние и в свою очередь, наш интерфейс.
Через секунду мы позволим пользователям отправлять свои собственные сообщения. На данный момент, чтобы проверить подписку, используйте инспектор:
Отправка сообщений
Чтобы позволить пользователям отправлять свои собственные сообщения, создать компонент SendMessageForm:
И обновить чат:
Перезагрузите приложение с ⌘ + R (Control + Shift + R), и вы сможете отправлять сообщения:
На самом деле, почему бы не открыть два приложения бок о бок и разговаривать с собой?
Какое время быть живым …
Стиль Ui
Благодаря React Desktop Наше приложение уже выглядит приличным, но мы можем сделать лучше.
Давайте сделаем несколько настроек и определим нашу планировку для использования в следующем и последнем шаге.
Заменить все index.css с:
Показать, кто онлайн
Чтобы закончить наше приложение чата, мы добавим список «кто онлайн», чтобы показать, вы уже догадались, кто он в сети!
Создать компонент onlineList:
Затем обновите чат:
Вы ожидали, что это будет сложнее? Я определенно первый раз пытался!
Потому что Chatkit обновляет Пользователи Имущество динамично, нам не нужно управлять каким-либо собственным государством. Нам просто нужно сказать отреагировать на повторно визуализацию и, в свою очередь, переоценить Пользователи Каждый раз, когда кто-то приходит в интернет ( onusercameonline ), выходит в автономный режим ( onuserwentoffline ) или присоединяется к комнате ( OnuSerjoed ).
Продолжай, запустите сервер и клиент и полюбуйтесь своему великолепному новому приложению чата:
Если вы пришли так далеко, вы также можете продолжать идти?! Удалить на эти бонусные вызовы …
Challenge 1: Показать, кто в комнате активно печатает
Посмотрите, можете ли вы добавить индикаторы печати приложение. Например, если я печатаю, вы и все остальные в комнате увидели, что «Букер печатает …».
Если Крис, и я оба набрали, вы увидите «Букер и Крис набрали …» и так далее.
Подсказки:
Challenge 2: Разрешить пользователю создавать собственную комнату
В этом руководстве мы использовали инспектор, чтобы создать комнату, а затем жестко закодировал номер комнаты. Это не хорошая практика.
В большинстве приложений вы хотели бы динамически создавать комнаты с Создатель функция.
Когда кто-то загружает приложение, спросите их имени комнаты:
Если комната существует, присоединяйтесь к ней; Если нет, создайте это, затем присоединитесь к нему.
Подсказки:
Заключение
Это было весело! Мы построили довольно круто Приложение чата в чем, менее часа?
Одна вещь, которую я заметил (и, возможно, ты тоже сделал) – это то, что когда-то фундамент находится на месте (шаблон, соединение Chatkit, и так далее), добавление новых функций чата довольно просты.
Помимо проблем, нам было бы любопытно увидеть, где еще вы можете принять приложение. Некоторые идеи:
- Отправить файлы
- Непрочитанное количество сообщений
- Уведомления
- Читать курсоры
- Частный обмен сообщениями
Не стесняйтесь следовать нами в Twitter, @ookercodes. и @CodeBeast Отказ
До следующего раза, Ciao.
Оригинал: “https://www.freecodecamp.org/news/build-a-desktop-chat-app-with-react-electron-and-chatkit-744d168e6f2f/”