Какой день, чтобы построить! Сегодня мы исследуем, насколько далеко наступил чат, и насколько легко создать полнофункциональное приложение в чате, в комплекте с возможностью отправки SMS-сообщений с несколькими (Super-Rad) инструментами разработчика, которые доступны для всех с пальцами. Там довольно много, так что давайте погрузимся!
TLDR:
Node.js чат приложение Demo Node.js чат исходный код приложения
Вступление
Давайте поговорим о Цели , что мы хотим достичь в следующем часе или около того.
Наше приложение в том, что это ядро в чате. Мы собираемся держать вещи очень простыми здесь. Наша система сможет зарегистрировать новые пользователи с минимальной пользовательской информацией, создавать и излучать сообщения для пользователей в чате, и, наконец, вытесните пользователей из чата, когда они хотят уйти.
Для бонусных баллов мы также собираемся настроить нашу систему с системой уведомлений SMS, которая отправит уведомление текста на учетную запись администратора, когда сообщение отправляется по нашей системе. Довольно круто верно?
Прежде чем начать
Эта система собирается использовать ряд технологий для функции. Самое главное космическое js для управления всеми нашими данными: нашими пользователями и нашими сообщениями. Для того, чтобы следовать с этим руководством, вы должны свободное ведро на своей платформе и создать Пользователь и а Сообщение Объект.
Для отправки SMS-сообщений мы используем Twilio Отказ Коммуникационная платформа, которая позволяет разработчикам делать телефонные звонки и отправлять текстовые сообщения через веб-API. Для реализации наших уведомлений вам придется зарегистрироваться для бесплатного номера Twilio и запустить пробную запись.
Требования к программному обеспечению?
Мы используем узел js в качестве нашей среды выполнения, поэтому, пожалуйста, убедитесь, что у вас установлена недавняя (ish) версия узла. С этим бизнесом вы можете начать строительство.
Обзор высокого уровня
Это полное приложение стека, которое означает, что мы строим веб-сервер для обработки наших запросов и обслуживать нашему приложению клиента. Мы собираемся создать Экспресс Приложение, которое будет запускать на нашем узле JS-сервере для обработки маршрутизации на небольшой API и подавать HTML, а WebPack Разблокировать наш клиентский интерфейс, построенный с Реагировать и Graphql Отказ Таким образом, мы можем использовать центральный сервер, чтобы сделать запросы к различным частям нашего приложения: наш интерфейс, наши контроллеры и наши веб-сервисы.
Здесь довольно много движущихся частей, так что давайте прыгнем!
Строительство нашего веб-сервера
Это позволило нашему приложением, которое позволит нам контролировать различные части нашего основного приложения. Мы собираемся начать с создания и инициализации каталога проекта, где будут установлены все наши зависимости. Давайте откроем наш терминал и создайте некоторые файлы:
$ mkdir chat $ cd chat
Это создает каталог под названием Чат и изменяет наш текущий каталог в этот каталог чата. Теперь мы можем инициализировать этот каталог как Узел проект:
$ npm init
Ваш терминал представит вам пару подсказков для создания наших Package.json Файл, который будет содержать большинство метаданных о нашем проекте. Я рекомендую ударить ключ ввода в эти шаги, если вы не знаете определенную информацию, которую вы хотели бы дать вашему приложению. Вы всегда можете изменить эти значения позже.
Теперь давайте установим некоторые Модули узлов Нам нужно запустить наш проект и сохранить их в Package.json Список зависимостей. Мы собираемся установить наш Bundler WebPack Наряду с необходимыми погрузчиками нам нужно подключить наши файлы JS, HTML и SASS/CSS, а также нашу Server Framework Express:
$ npm install --save webpack webpack-cli clean-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader file-loader sass-loader css-loader node-sass url-loader style-loader express express-session cookie-parser body-parser socket.io socket.io-client cosmicjs dotenv
Мы экономьте все это в качестве зависимостей проекта, поскольку любой развертывающий контейнер, который мы используем, необходимо использовать их для создания и запуска нашего приложения.
Далее мы также собираемся установить зависимости, необходимые для рендеринга нашего пользовательского интерфейса:
$ npm install --save react react-dom react-router-dom react-icons graphql react-apollo apollo-boost axios
Настройка нашего файла ввода
Теперь, когда у нас установлены некоторые зависимости, нам нужно создать файл ввода, который будет обрабатывать все запросы на наше приложение. Когда пользователь делает запрос на маршрут по умолчанию «/», мы будем обслуживать HTML-файл. Когда клиент делает запрос на нашу API, мы используем конечные точки, добавленные с помощью «/API». Первый шаг просто создает файл:
$ touch index.js
Давайте откроем этот файл в нашем текстовом редакторе и настроить Экспресс Так что мы обслуживаем HTML, когда браузер навигации на нашем Server Localhost:
Начальный сервер index.js.
Мы ищем index.html файл, который хранится в каталоге, расположенном в ./public Так что давайте пойдем вперед и создадим этот файл в ./public/index.html И вставьте некоторую котующую таблицу, чтобы убедиться, что наш HTML обслуживается нашим Express Server.
Начальный index.html.
Мы должны иметь возможность начать наш сервер, используя Узел :
$ node index.js
Когда эта команда работает, мы должны увидеть простое сообщение консоли:
Cosmic Messenger listening on port : 3000
Теперь указывая на наш браузер на http://localhost: 3000 Покажет нам в основном пустой экран, но теперь мы видим немного «Hello World» в верхней части нашей страницы. Теперь наш сервер устанавливается для обслуживания контента из нашего HTML-файла.
Настройка WebPack
Мы хотим создать наш интерфейс с Реагировать , но нам нужно обслуживать этот интерфейс из каталога, который может получить доступ к нашему узлу сервера. Нам также необходимо скомпилировать наш JavaScript из модного синтаксиса, который мы используем для создания наших компонентов к тому, что все браузеры могут обрабатывать. Для этого мы собираемся использовать WebPack Чтобы подключить все наши файлы в определенное местоположение и Babel, чтобы скомпилировать весь наш код.
Давайте создадим файл под названием webpack.config.js и добавить некоторую конфигурацию для объединения нашего клиентского интерфейса:
Первоначальный конфигурация WebPack
Это позволит нам создавать исходный код и организовать его значимым способом, используя любую структуру каталогов, которое нам нравится для структурирования логики, затем связывайте все в один файл, который наш index.html может ссылаться, пока она подается с нашего веб-сервера.
Инициализация нашего приложения React
У нас есть созданный наш файл конфигурации, но теперь нам нужно создать какой-то исходный код и убедиться, что WebPack связывает все правильно. Давайте пойдем вперед и создадим папку, называемую SRC и коснитесь файла под названием app.js в. Оттуда мы можем создать простой реактивный компонент, который будет представлять то же самое, что и раньше, но теперь мы обслуживаем JavaScript в комплекте вместе и вводили в наш index.html, обслуживаемый с нашего веб-сервера. Сервер боковой рендеринг ребенка!
Вот что наше app.js Файл будет выглядеть изначально:
Начальное ract app.js.
Прежде чем мы запустим WebPack И подавать наш интерфейс, нам нужно установить некоторые зависимости разработчиков и добавить некоторые простой значений конфигурации нашим Package.json Отказ В частности, нам нужно сказать наш сервер, что мы используем Бабел Чтобы скомпилировать наш интерфейсный код и несколько сценариев NPM, чтобы мы могли запустить наш веб-сервер и объединить наш код React.
Давайте установим некоторые зависимости, которые нам нужно только использовать для местных целей развития:
$ npm install --save-dev morgan nodemon webpack-dev-server
С этими установленными, давайте откроем Package.json и добавить Prestart , Начать и dev Свойства к нашим сценариям объект, а также Бабел Объект Config. Вот как все должно выглядеть:
package.json Конфигурация
Теперь мы можем запустить WebPack И узел одновременно просто работает:
$ npm run dev
Через секунду вы увидите некоторые выходные текст от WebPack :
Возвращаясь к http://localhost: 3000 должен производить тот же результат, что и раньше, но теперь мы обслуживаем Реагировать Приложение, позволяющее нам создавать разумные классы компонентов и визуализации их в наших index.html Отказ
Создание нашего API отдыха
Мы собираемся интерфейс с нашими ресурсами Cosmic JS, сделав запросы на наш серверный код через Экспресс маршруты, которые мы настроим прямо сейчас.
Нам понадобится три Пост Маршруты, которые будут обрабатывать запросы на наш сервер. Один для регистрации пользователей, которые посещают приложение, один для сообщений, которые отправляются через Messenger и маршрут выхода для пользователей, желающих покинуть чат.
Мы также хотим настроить промежуточное программное обеспечение для обработки тел запроса, отправленные через нашу API, Body-Parser, модуль для создания файлов cookie сеанса, чтобы слабоутеализировать запросы на нашу службу обмена сообщениями, экспресс-сеанс. Наконец, нам нужно настроить веб-сокеты, чтобы мы могли излучать события для всех клиентов, подключенных к нашему серверу через Socket.IO.
Socket.io будет выделять 3 отдельных события в настоящее время: один, когда пользователь Регистры Так что другие клиенты могут отслеживать, кто вошел в приложение в режиме реального времени. Обратно, мы отслеживаем Выход из системы Событие, которое позволит пользователю знать, когда пользователи покинули чат. И один для того, когда * сообщение отправлено.
Если вы не установили их в начале нашего настроек сервера, вы можете установить их с помощью быстрой NPM команда:
$ npm install --save socket.io socket.io-client express-session body-parser
Теперь давайте откроем наш файл входа: index.js и добавьте наши маршруты и конфигурацию промежуточного программного обеспечения:
Окончательный index.js Конфигурация
Вы заметите несколько новых библиотек, которые мы импортируем. Наиболее заметно мы используем промежуточное программное обеспечение под названием Twiliodifications и Cosmicjs которые необходимо настроить до того, как наш сервер будет функционировать правильно. Для уведомлений Twilio для работы нам нужно создать некоторое промежуточное программное обеспечение, которое будет управлять, когда отправляется сообщение SMS. Нам также необходимо настроить это промежуточное программное обеспечение с помощью токенов аутентификации и ключами для веб-сервера Twilio. Для Cosmicjs нам нужно сделать то же самое, возьмите несколько токенов Authens и сохраните их в нашей настройке Config Config.
Настройте наши переменные среды
Давайте создадим файл называемый .env в корне нашего каталога проекта. В нем нам нужно будет хранить некоторые переменные среды, но и некоторые конфигурационные переменные конфигурации для наших веб-сервисов. Вот что вам нужно:
.env Config.
Вам нужно будет захватить два набора учетных данных аутентификации для наших переменных окружающей среды. Из Twilio вам понадобится ваш Счет SID и Автор токен а также номер телефона, связанный с вашей учетной записью, который будет расположен в https://www.twilio.com/console Отказ От Cosmicjs Нам нужно схватить наши клавиши чтения и записи для аутентификации наших запросов. Они можно найти по адресу https://cosmicjs.com/main. Возможно, вам придется генерировать их на панели «Общие настройки».
Как только это здесь, мы должны обновить наше webpack.config.js Так что мы можем ссылаться на эти переменные на нашем клиентском языке JavaScript. Обновленный файл должен выглядеть что-то подобное:
Final WebPack Config
Вы заметите, что добавили несколько глобальных переменных приложений, используя Офиниругин метод WebPack Отказ Теперь эти переменные могут использоваться во всем мире по всему нашему приложению благодаря объединению WebPack.
Наши смс уведомления
Создайте каталог, называемое промежуточным программным обеспечением и разместить пару файлов внутри:
$ mkdir middleware $ touch middleware/twilioNotifications.js middleware/twilioClient.js middleware/config.js
Наше Twilioclient Файл будет обрабатывать сделать запрос на API Twilio:
Клиентский файл Twilio для интерфейса веб-сервиса
Наш файл TwiliOOtifiection будет обрабатывать объект запроса из Express и убедитесь, что любые маршруты, которые используют модуль, привернут клиенту Twilio:
Уведомление Twilio Marmware
Наконец мы собираемся создать config.js Чтобы настроить нашу промежуточное программное обеспечение с необходимыми переменными конфигурации, необходимые для того, чтобы наш приложение хорошо играть с Твилио API:
Twilio Config файл
Теперь наше приложение настроен на функцию в качестве сервера чата. Все, что осталось, это создать наши элементы реагирования и заставить их разговаривать с нашим сервером для функции в качестве интерфейса чата.
Создание наших интерфейсных компонентов
Наш интерфейс будет очень прямым. Мы начнем с создания наших app.js Файл и настройте две маршруты, один для нашей регистрационной формы, а другой для нашего ввода, сообщений, сообщений и списка пользователей. Мы также хотим настроить наши graphql клиент, чтобы мы могли получить данные напрямую из Космические JS Когда мы визуализировать каждую страницу.
Окончательный компонент app.js.
Давайте создадим папку под названием Компоненты под SRC каталог. Здесь мы поставим все наши наши компоненты реагирования, которые мы хотим импортировать в app.js Отказ
Теперь нам нужно создать наши два компонента, оказываемые в нашей логике маршрутизации: Чат и Вход в систему Отказ Начнем с нашей формы входа в SRC/Компоненты/loginform.js :
Компонент в системе loginfrom
Далее нам нужно создать компоненты для нашей формы чата, для которой мы создадим новый каталог, называемый Чат В каталоге компонентов. Здесь мы создадим три файла, один для компонента формы родительского чата: SRC/Компоненты/Чат/index.js :, один для списка сообщений: SRC/Компоненты/Чат/Messagelist.js И один для списка пользователей: SRC/Компоненты/Чат/userList.js Отказ Начнем с нашей формы чата:
компонент корневого чата
Этот компонент содержит нашу форму сообщения, которая отправляет текстовые данные на наш сервер чата. Вы заметите, что он также излучает событие, используя модуль, который нам нужно построить для обработки событий веб-сокета. Мы доберемся до этого за секунду, прежде чем это давайте создадим наше userList и Мессагелист :
UserList компонент
Наше UserList Просто отображает наш пользователь в нашем UI. Это выбирает тех пользователей из Cosmic JS graphql Серверы, а затем подписываются на наш модуль Socket, которые выводят данные каждый раз, когда наш сервер испускает эти события.
Теперь давайте создадим наше Мессагелист :
Компонент Messagelist
Теперь давайте создадим наш модуль Socket, который позволит этим компонентам подписаться на наши серверные события. Создать новую папку под названием lib и создать файл внутри называемого Socket.js :
Модули подписки сокетов
С этим теперь у нас есть полный полное приложение для чата для стека, оснащенные с помощью веб-сервера клиентского интерфейса. С бонусом уведомления администратора, когда сообщения отправляются по серверу.
Следующие шаги
Поскольку это приложение создано и запущено полностью с веб-сервера, мы можем легко развернуть это, используя любую услугу хостинга, которая поддерживает Узел js контейнеры. Я бы порекомендовал Heroku или Космические JS Поскольку они оба поддерживают такие структуры проекта, как это, и могут быстро создавать развертывание.
Это все для меня на этой неделе, я. До следующего раза.